create document GUI

ng-app/src/classes.ts

@@ -98,6 +98,46 @@ export const official_classes = {
         "ng:compat": ["code:*","file:iana:text:javascript","file:iana:text:css","file:iana:text:html","file:iana:text:markdown", "file:iana:application:xml", 
                     "file:iana:application:yaml", "file:iana:text:xml", "file:iana:application:xhtml+xml"],
     },
+    "code:js": {
+        "ng:crdt": "YText",
+        "ng:n": "JavaScript", // edited with CodeMirror, displayed with highlight.js 
+        "ng:a": "A JavaScript Source Code file",
+        "ng:o": "n:g:z:pre",
+        "ng:w": "n:g:z:code_editor",
+        "ng:compat": ["file:iana:text:javascript"],
+    },
+    "code:ts": {
+        "ng:crdt": "YText",
+        "ng:n": "TypeScript", // edited with CodeMirror, displayed with highlight.js 
+        "ng:a": "A TypeScript Source Code file",
+        "ng:o": "n:g:z:pre",
+        "ng:w": "n:g:z:code_editor",
+        "ng:compat": ["file:iana:text:typescript"],
+    },
+    "code:rust": {
+        "ng:crdt": "YText",
+        "ng:n": "Rust", // edited with CodeMirror, displayed with highlight.js 
+        "ng:a": "A Rust Source Code file",
+        "ng:o": "n:g:z:pre",
+        "ng:w": "n:g:z:code_editor",
+        "ng:compat": [],
+    },
+    "code:svelte": {
+        "ng:crdt": "YText",
+        "ng:n": "Svelte", // edited with CodeMirror, displayed with highlight.js 
+        "ng:a": "A Svelte Source Code file",
+        "ng:o": "n:g:z:pre",
+        "ng:w": "n:g:z:code_editor",
+        "ng:compat": [],
+    },
+    "code:react": {
+        "ng:crdt": "YText",
+        "ng:n": "React", // edited with CodeMirror, displayed with highlight.js 
+        "ng:a": "A React Source Code file",
+        "ng:o": "n:g:z:pre",
+        "ng:w": "n:g:z:code_editor",
+        "ng:compat": [],
+    },
     "app": {
         "ng:n": "Official App",
         "ng:a": "App provided by NextGraph platform",
@@ -191,7 +231,7 @@ export const official_classes = {
     },
     "contract": {
         "ng:crdt": "YText",
-        "ng:n": "Contract", // edited with CodeMirror, displayed with highlight.js
+        "ng:n": "Smart Contract", // edited with CodeMirror, displayed with highlight.js
         "ng:a": "Smart Contract with Rust or JS code",
         "ng:compat": ["code:rust", "file:iana:application:wasm", "code:javascript", "code:typescript", "file:iana:text:javascript", "file:iana:application:node"],
     },
@@ -254,16 +294,16 @@ export const official_classes = {
     },
     "data:array": {
         "ng:crdt": "YArray",
-        "ng:n": "JSON Array", 
+        "ng:n": "Array", 
-        "ng:a": "JSON Array CRDT",
+        "ng:a": "Yjs Array CRDT",
         "ng:o": "n:g:z:json_viewer", // default viewer
         "ng:w": "n:g:z:json_editor", // default editor
         "ng:compat": ["file:iana:application:json", "code:json"],
     },
     "data:map": {
         "ng:crdt": "YMap",
-        "ng:n": "JSON Map", 
+        "ng:n": "Object", 
-        "ng:a": "JSON Map CRDT",
+        "ng:a": "Yjs Map CRDT",
         "ng:o": "n:g:z:json_viewer", // default viewer
         "ng:w": "n:g:z:json_editor", // default editor
         "ng:compat": ["file:iana:application:json", "code:json"],
@@ -285,7 +325,7 @@ export const official_classes = {
         "ng:crdt": "Graph",
         "ng:n": "Collection",
         "ng:a": "An ordered list of items",
-        "ng:o": "n:g:z:list",
+        "ng:o": "n:g:z:container",
         "ng:x": {
             "as": true,
             "rdf": true,
@@ -296,7 +336,7 @@ export const official_classes = {
         "ng:crdt": "Graph",
         "ng:n": "Container",
         "ng:a": "An unordered set of items",
-        "ng:o": "n:g:z:list",
+        "ng:o": "n:g:z:container",
         "ng:x": {
             "rdf": true,
             "rdfs": true,
@@ -386,7 +426,8 @@ export const official_classes = {
         "ng:crdt": "YArray",
         "ng:n": "Composition",
         "ng:a": "Compose several blocks into a single document",
-        "ng:o": "n:g:z:compose",
+        "ng:o": "n:g:z:compose:viewer",
+        "ng:w": "n:g:z:compose:editor",
     },
     "doc:diagram:mermaid" : {
         "ng:crdt": "YText",
@@ -534,7 +575,7 @@ export const official_classes = {
     },
     "doc:odf": { //!!! becareful: AGPL
         "ng:crdt": "Graph",
-        "ng:n": "OpenDocumentFormat (ODF)",
+        "ng:n": "ODF",
         "ng:a": "upload and display an ODF file",
         "ng:compat": ["file:iana:application:vnd.oasis.opendocument*"] // https://webodf.org/ https://github.com/webodf/WebODF https://viewerjs.org/ 
     },
@@ -553,7 +594,7 @@ export const official_classes = {
     },
     "doc:music:abc": { //https://github.com/paulrosen/abcjs
         "ng:crdt": "YText",
-        "ng:n": "Music ABC",
+        "ng:n": "Musical Notation",
         "ng:a": "sheet music notation",
         "ng:compat": []
     },
@@ -571,7 +612,7 @@ export const official_classes = {
     },
     "doc:chemistry": { //GPL!! https://github.com/aeris-data/ChemDoodle/tree/master/ChemDoodleWeb-8.0.0 or https://github.com/aseevia/smiles-3d-vue 
         "ng:crdt": "YText",
-        "ng:n": "Chemical",
+        "ng:n": "Molecules (SMILES)",
         "ng:a": "simplified molecular-input line-entry system (SMILES)",
         "ng:compat": ["file:iana:chemical:x-daylight-smiles"] // https://en.wikipedia.org/wiki/SYBYL_line_notation and http://fileformats.archiveteam.org/wiki/Chemical_data
     },
@@ -733,6 +774,11 @@ export const official_classes = {
         "ng:n": "ChatRoom",
         "ng:a": "A room for group chat",
     },
+    "social:live": {
+        "ng:crdt": "Graph",
+        "ng:n": "Live",
+        "ng:a": "A live session of video or audio, with optional chat",
+    },
     "prod:task": {
         "ng:crdt": "Graph",
         "ng:n": "Task",
@@ -821,6 +867,12 @@ export const official_classes = {
         "ng:a": "CADmium",
         "ng:compat": []
     }, 
+    "prod:spreadsheet": { 
+        "ng:crdt": "Automerge",
+        "ng:n": "Spreadsheet",
+        "ng:a": "Spreadsheet",
+        "ng:compat": []
+    }, 
     "prod:slides": { //https://github.com/hakimel/reveal.js
         //https://pandoc.org/MANUAL.html#slide-shows
         "ng:crdt": "Graph",

ng-app/src/lib/Document.svelte

@@ -25,7 +25,7 @@
   import { Button, Progressbar, Spinner, Alert } from "flowbite-svelte";
   import { inview } from 'svelte-inview';
   import { cur_tab, nav_bar, can_have_header, header_icon, header_title, header_description, cur_branch, set_header_in_view, edit_header_button, cur_app, load_official_app } from "../tab";
-  import NavIcon from "./components/NavIcon.svelte";
+  import NavIcon from "./icons/NavIcon.svelte";
 
   export let nuri = ""; 
 

ng-app/src/lib/FullLayout.svelte

@@ -17,27 +17,31 @@
     SidebarWrapper,
     Modal,
     Toggle,
+    Radio,
   } from "flowbite-svelte";
   import { link, location, push } from "svelte-spa-router";
   import MobileBottomBarItem from "./MobileBottomBarItem.svelte";
   import MobileBottomBar from "./MobileBottomBar.svelte";
   import Pane from "./Pane.svelte";
+  import DataClassIcon from "./icons/DataClassIcon.svelte";
+  import MarkdownIcon from "./icons/MarkdownIcon.svelte";
+  import TxtIcon from "./icons/TxtIcon.svelte";
   // @ts-ignore
   import Logo from "./components/Logo.svelte";
   import MenuItem from "./components/MenuItem.svelte";
   import PaneHeader from "./components/PaneHeader.svelte";
-  import BranchIcon from "./components/BranchIcon.svelte";
+  import BranchIcon from "./icons/BranchIcon.svelte";
   import Message from "./components/Message.svelte";
   // @ts-ignore
   import { t } from "svelte-i18n";
   import { onMount, onDestroy, tick } from "svelte";
-  import { cur_tab, cur_viewer, cur_editor, toggle_graph_discrete, cur_tab_update,
+  import { cur_tab, cur_viewer, cur_editor, toggle_graph_discrete, cur_tab_update, get_class,
           available_editors, available_viewers, set_editor, set_viewer, set_view_or_edit, toggle_live_edit,
-          has_editor_chat, all_files_count, all_comments_count, nav_bar, save, hideMenu, show_modal_menu } from "../tab";
+          has_editor_chat, all_files_count, all_comments_count, nav_bar, save, hideMenu, show_modal_menu, show_modal_create, openModalCreate } from "../tab";
   import {
-    active_session, redirect_after_login, toasts
+    active_session, redirect_after_login, toasts, check_has_camera
   } from "../store";
-  import ZeraIcon from "./ZeraIcon.svelte";
+  import ZeraIcon from "./icons/ZeraIcon.svelte";
 
   import {
     Home,
@@ -86,9 +90,14 @@
     XMark,
     ArrowLeft,
     ArchiveBox,
-    CheckCircle,
+    Square3Stack3d,
-    XCircle,
+    UserGroup,
-    ExclamationCircle,
+    Briefcase,
+    DocumentArrowUp,
+    Language,
+    Camera,
+    VideoCamera,
+    Microphone,
   } from "svelte-heros-v2";
     import NavBar from "./components/NavBar.svelte";
 
@@ -212,6 +221,137 @@
     }
   }
 
+  let createMenu = {
+    social: undefined,
+    pro: undefined,
+    media: undefined,
+    chart: undefined,
+    viz: undefined,
+    diagram: undefined,
+    doc: undefined,
+    data: undefined,
+    code: undefined,
+    apps: undefined,
+  };
+  async function scrollToCreateMenu(menu) {
+    await tick();
+    if (createMenu[menu]) createMenu[menu].scrollIntoView();
+  }
+
+  let createMenuOpened = {
+    social: false,
+    pro: false,
+    media: false,
+    chart: false,
+    viz: false,
+    diagram: false,
+    doc: false,
+    data: false,
+    code: false,
+    apps: false
+  }
+
+  const create_social_items = [
+    "social:contact",
+    "social:chatroom",
+    "social:event",
+    "social:channel",
+    "social:scheduler",
+    "social:calendar",
+    "social:live"
+  ];
+
+  const create_pro_items = [
+    "prod:project",
+    "prod:task",
+    "prod:issue",
+    "prod:form",
+    "prod:slides",
+    "prod:spreadsheet",
+    "contract",
+    "prod:question",
+    "prod:poll",
+    "prod:cad",
+  ];
+
+  const create_media_items = [
+    "media:image",
+    "media:reel",
+    "media:video",
+    "media:album",
+    "media:audio",
+    "media:song",
+    "media:overlay",
+  ];
+
+  const create_chart_items = [
+    "doc:chart:frappecharts",
+    "doc:chart:financial",
+    "doc:chart:apexcharts",
+    "doc:chart:billboard",
+    "doc:chart:echarts",
+    "doc:chart:chartjs",
+  ];
+
+  const create_viz_items = [
+    "doc:viz:cytoscape",
+    "doc:viz:vega",
+    "doc:viz:vizzu",
+    "doc:viz:plotly",
+    "doc:viz:avail",
+  ];
+
+  const create_diagram_items = [
+    "doc:diagram:mermaid",
+    "doc:diagram:drawio",
+    "doc:diagram:graphviz",
+    "doc:diagram:excalidraw",
+    "doc:diagram:gantt",
+    "doc:diagram:flowchart",
+    "doc:diagram:sequence",
+    "doc:diagram:markmap",
+    "doc:diagram:mymind",
+    "doc:diagram:jsmind",
+  ];
+
+  const create_doc_items = [
+    "doc:pdf",
+    "doc:odf",
+    "file",
+    "doc:music:abc",
+    "doc:music:guitar",
+    "doc:maths",
+    "doc:chemistry",
+    "doc:ancientscript",
+    "doc:braille",
+  ];
+
+  const create_data_items = [
+    "data:graph",
+    "data:container",
+    "data:collection",
+    "data:table",
+    "data:geomap",
+    "data:board",
+    "data:grid",
+    "data:json",
+    "data:array",
+    "data:map",
+    "data:xml",
+  ];
+
+  const create_code_items = [
+    "code:rust",
+    "code:js",
+    "code:ts",
+    "code:svelte",
+    "code:react",
+  ];
+
+  const create_apps_items = [
+    "app:n:xxx.xx.xx",
+  ];
+
   let top;
   let shareMenu;
   let toolsMenu;
@@ -251,7 +391,7 @@
   });
 
   active_session.subscribe((as) => { if(!as) {
-    console.log($location);
+    //console.log($location);
     if ($location!="/user") {
       $redirect_after_login = $location;
     }
@@ -346,6 +486,10 @@
     // });
   }
 
+  const closeModalCreate = () => {
+    $show_modal_create = false;
+  }
+
   const closePaneInModal = () => {
     cur_tab_update(ct => {
         ct.show_menu = true;
@@ -373,6 +517,7 @@
     {n:"embed",i:CodeBracketSquare},
     {n:"schema",i:ArrowsPointingOut},
     {n:"signature",i:ShieldCheck},
+    {n:"translations",i:Language},
     {n:"services",i:Cube},
     {n:"print",i:Printer},
     {n:"console",i:CommandLine},
@@ -392,12 +537,48 @@
     "mc":Sparkles,
   };
 
-  const customEv = new CustomEvent('loaded', {});
+  let destination = "store";
+
+  $: destination = $cur_tab.branch.id === "" ? "mc" : destination == "mc" ? "store" : destination;
+
+  let config = { tabindex:"-1",
+                 class:"w-7 h-7 text-gray-700  focus:outline-none  dark:text-white"
+               };
+
+  const new_document = (class_name) => {
+
+    closeModalCreate();
+  }
+
+  const new_group = () => {
+
+    closeModalCreate();
+  }
+
+  const new_app = () => {
+
+    closeModalCreate();
+  }
 
-	async	function addLoaded(node) {
+  const scan_qr = () => {
-		await tick()
+
-		node.dispatchEvent(customEv)
+    closeModalCreate();
-	}
+  }
+
+  const take_picture = () => {
+
+    closeModalCreate();
+  }
+
+  const record_reel = () => {
+
+    closeModalCreate();
+  }
+
+  const record_voice = () => {
+
+    closeModalCreate();
+  }
 
   let asideClass = "w-48";
   let spanClass = "flex-1 ml-3 whitespace-nowrap";
@@ -406,8 +587,7 @@
 </script>
 
 <svelte:window bind:innerWidth={width} />
-
+<Modal class="menu-modal"
-<Modal id="menu-modal"
     outsideclose
     bind:open={$show_modal_menu}
     size = 'xs'
@@ -433,7 +613,7 @@
     {#if $cur_tab.show_menu || (!$cur_tab.folders_pane && !$cur_tab.toc_pane && !$cur_tab.right_pane)}
       <aside style="width:305px; padding:5px;" class="bg-white" aria-label="Sidebar">
         <div class="bg-gray-60 overflow-y-auto dark:bg-gray-800">
-          <ul class="space-y-1 space-x-0 mb-10">
+          <ul class="mb-10">
             {#if $cur_tab.branch.has_discrete}
             <li>
               <div class="inline-flex graph-discrete-toggle mb-2 ml-2" role="group">
@@ -682,6 +862,248 @@
   </div>
 </Modal>
 
+<Modal class="menu-modal"
+    outsideclose
+    bind:open={$show_modal_create}
+    size = 'xs'
+    placement = 'top-left'
+    backdropClass="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 menu-bg-modal"
+  >
+  <div class="static">
+    <div class="absolute top-2 right-4 w-10 h-10 bg-white" role="button" aria-label="Close menu" title="Close menu" 
+      on:click={closeModalCreate}
+      on:keypress={closeModalCreate}
+      tabindex="0">
+      <XMark class="w-10 h-10 text-gray-700  focus:outline-none  dark:text-white"/>
+    </div>
+
+    <aside style="width:305px; padding:5px;" class="bg-white" aria-label="Sidebar">
+      <div class="bg-gray-60 overflow-y-auto dark:bg-gray-800">
+        <ul class="mb-10">
+
+          <Radio class="clickable m-2 text-base font-normal" name="destination" disabled={!$cur_tab.branch.id} value="store" bind:group={destination}>
+            <Square3Stack3d class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white mr-2" />
+            {$t("doc.destination.store")}
+          </Radio>
+          <Radio class="clickable m-2 text-base font-normal" name="destination" disabled={!$cur_tab.branch.id} value="stream" bind:group={destination}>
+            <Bolt class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white mr-2" />
+            {#if $cur_tab.store.store_type !== "dialog"}{$t("doc.destination.stream")}{:else}{$t("doc.destination.dialog")}{/if}
+          </Radio>
+          <Radio class="clickable m-2 text-base font-normal" name="destination" value="mc" bind:group={destination}>
+            <Sparkles class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white mr-2" />
+            {$t("doc.destination.mc")}
+          </Radio>
+          <h2 class="ml-2 my-4">{$t("doc.select_class")}</h2>
+          <MenuItem title={$t("doc.rich")} clickable={ ()=> new_document("post:rich") }>
+            <DataClassIcon dataClass="post:rich" {config}/>
+            <span class="ml-3">{$t("doc.rich")}</span>
+          </MenuItem>
+          <MenuItem title={$t("doc.markdown")} clickable={ ()=> new_document("post:md")  }>
+            <MarkdownIcon class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white" />
+            <span class="ml-3">{$t("doc.markdown")}</span>
+          </MenuItem>
+          <MenuItem title={$t("doc.text")} clickable={ ()=> new_document("post:text")  }>
+            <TxtIcon class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white" />
+            <span class="ml-3">{$t("doc.text")}</span>
+          </MenuItem>
+          <MenuItem title={$t("doc.group")} clickable={ ()=> new_group() }>
+            <UserGroup tabindex="-1"
+            class="w-7 h-7 text-gray-700  focus:outline-none  dark:text-white"/>
+            <span class="ml-3">{$t("doc.group")}</span>
+          </MenuItem>
+          <MenuItem title={get_class("doc:compose")["ng:a"]} clickable={ ()=> new_document("doc:compose") }>
+            <DataClassIcon dataClass="doc:compose" {config}/>
+            <span class="ml-3">{get_class("doc:compose")["ng:n"]}</span>
+          </MenuItem>
+          <div style="padding:0;" bind:this={createMenu.social}></div>
+          <MenuItem title={$t("doc.social")} clickable={ () => { createMenuOpened.social = !createMenuOpened.social; scrollToCreateMenu("social"); } }>
+            <Users
+              tabindex="-1"
+              class="w-7 h-7 text-gray-700  focus:outline-none  dark:text-white"
+            />
+            <span class="ml-3">{$t("doc.social")}</span>
+          </MenuItem>
+          {#if createMenuOpened.social }
+            {#each create_social_items as item}
+              <MenuItem title={get_class(item)["ng:a"]} extraClass="submenu" clickable={ () => new_document(item) }>
+                <DataClassIcon dataClass={item} {config}/>
+                <span class="ml-3">{get_class(item)["ng:n"]}</span>
+              </MenuItem>
+            {/each}
+          {/if}
+
+          <div style="padding:0;" bind:this={createMenu.apps}></div>
+          <MenuItem title={$t("doc.apps")} clickable={ () => { createMenuOpened.apps = !createMenuOpened.apps; scrollToCreateMenu("apps"); } }>
+            <DataClassIcon dataClass="app:z" {config}/>
+            <span class="ml-3">{$t("doc.apps")}</span>
+          </MenuItem>
+          {#if createMenuOpened.apps }
+            <MenuItem title={$t("doc.new_app")} extraClass="submenu" clickable={ () => new_app() }>
+              <Beaker tabindex="-1"
+                class="w-7 h-7 text-gray-700  focus:outline-none  dark:text-white"/>
+              <span class="ml-3">{$t("doc.new_app")}</span>
+            </MenuItem>
+            {#each create_apps_items as item}
+              <MenuItem title="" extraClass="submenu" clickable={ () => new_document(item) }>
+                <DataClassIcon dataClass={item} {config}/>
+                <span class="ml-3">3rd party app Class</span>
+              </MenuItem>
+            {/each}
+          {/if}
+
+          <div style="padding:0;" bind:this={createMenu.pro}></div>
+          <MenuItem title={$t("doc.pro")} clickable={ () => { createMenuOpened.pro = !createMenuOpened.pro; scrollToCreateMenu("pro"); } }>
+            <Briefcase
+              tabindex="-1"
+              class="w-7 h-7 text-gray-700  focus:outline-none  dark:text-white"
+            />
+            <span class="ml-3">{$t("doc.pro")}</span>
+          </MenuItem>
+          {#if createMenuOpened.pro }
+            {#each create_pro_items as item}
+              <MenuItem title={get_class(item)["ng:a"]} extraClass="submenu" clickable={ () => new_document(item) }>
+                <DataClassIcon dataClass={item} {config}/>
+                <span class="ml-3">{get_class(item)["ng:n"]}</span>
+              </MenuItem>
+            {/each}
+          {/if}
+          
+          {#await check_has_camera() then has_camera}
+            {#if !has_camera}
+              <MenuItem title={$t("buttons.scan_qr")} clickable={ ()=> scan_qr() }>
+                <QrCode tabindex="-1"
+                class="w-7 h-7 text-gray-700  focus:outline-none  dark:text-white"/>
+                <span class="ml-3">{$t("buttons.scan_qr")}</span>
+              </MenuItem>
+
+              <MenuItem title={$t("doc.take_picture")} clickable={ ()=> take_picture() }>
+                <Camera tabindex="-1"
+                class="w-7 h-7 text-gray-700  focus:outline-none  dark:text-white"/>
+                <span class="ml-3">{$t("doc.take_picture")}</span>
+              </MenuItem>
+
+              <MenuItem title={$t("doc.record_reel")} clickable={ ()=> record_reel() }>
+                <VideoCamera tabindex="-1"
+                class="w-7 h-7 text-gray-700  focus:outline-none  dark:text-white"/>
+                <span class="ml-3">{$t("doc.record_reel")}</span>
+              </MenuItem>
+            {/if}
+          {/await}
+
+          <MenuItem title={$t("doc.record_voice")} clickable={ ()=> record_voice() }>
+            <Microphone tabindex="-1"
+            class="w-7 h-7 text-gray-700  focus:outline-none  dark:text-white"/>
+            <span class="ml-3">{$t("doc.record_voice")}</span>
+          </MenuItem>
+
+          <div style="padding:0;" bind:this={createMenu.media}></div>
+          <MenuItem title={$t("doc.media")} clickable={ () => { createMenuOpened.media = !createMenuOpened.media; scrollToCreateMenu("media"); } }>
+            <DocumentArrowUp
+              tabindex="-1"
+              class="w-7 h-7 text-gray-700  focus:outline-none  dark:text-white"
+            />
+            <span class="ml-3">{$t("doc.media")}</span>
+          </MenuItem>
+          {#if createMenuOpened.media }
+            {#each create_media_items as item}
+              <MenuItem title={get_class(item)["ng:a"]} extraClass="submenu" clickable={ () => new_document(item) }>
+                <DataClassIcon dataClass={item} {config}/>
+                <span class="ml-3">{get_class(item)["ng:n"]}</span>
+              </MenuItem>
+            {/each}
+          {/if}
+
+          <div style="padding:0;" bind:this={createMenu.chart}></div>
+          <MenuItem title={$t("doc.chart")} clickable={ () => { createMenuOpened.chart = !createMenuOpened.chart; scrollToCreateMenu("chart"); } }>
+            <DataClassIcon dataClass="doc:chart" {config}/>
+            <span class="ml-3">{$t("doc.chart")}</span>
+          </MenuItem>
+          {#if createMenuOpened.chart }
+            {#each create_chart_items as item}
+              <MenuItem title={get_class(item)["ng:a"]} extraClass="submenu" clickable={ () => new_document(item) }>
+                <DataClassIcon dataClass={item} {config}/>
+                <span class="ml-3">{get_class(item)["ng:n"]}</span>
+              </MenuItem>
+            {/each}
+          {/if}
+
+          <div style="padding:0;" bind:this={createMenu.viz}></div>
+          <MenuItem title={$t("doc.viz")} clickable={ () => { createMenuOpened.viz = !createMenuOpened.viz; scrollToCreateMenu("viz"); } }>
+            <DataClassIcon dataClass="doc:viz" {config}/>
+            <span class="ml-3">{$t("doc.viz")}</span>
+          </MenuItem>
+          {#if createMenuOpened.viz }
+            {#each create_viz_items as item}
+              <MenuItem title={get_class(item)["ng:a"]} extraClass="submenu" clickable={ () => new_document(item) }>
+                <DataClassIcon dataClass={item} {config}/>
+                <span class="ml-3">{get_class(item)["ng:n"]}</span>
+              </MenuItem>
+            {/each}
+          {/if}
+
+          <div style="padding:0;" bind:this={createMenu.diagram}></div>
+          <MenuItem title={$t("doc.diagram")} clickable={ () => { createMenuOpened.diagram = !createMenuOpened.diagram; scrollToCreateMenu("diagram"); } }>
+            <DataClassIcon dataClass="doc:diagram" {config}/>
+            <span class="ml-3">{$t("doc.diagram")}</span>
+          </MenuItem>
+          {#if createMenuOpened.diagram }
+            {#each create_diagram_items as item}
+              <MenuItem title={get_class(item)["ng:a"]} extraClass="submenu" clickable={ () => new_document(item) }>
+                <DataClassIcon dataClass={item} {config}/>
+                <span class="ml-3">{get_class(item)["ng:n"]}</span>
+              </MenuItem>
+            {/each}
+          {/if}
+
+          <div style="padding:0;" bind:this={createMenu.doc}></div>
+          <MenuItem title={$t("doc.other")} clickable={ () => { createMenuOpened.doc = !createMenuOpened.doc; scrollToCreateMenu("doc"); } }>
+            <DataClassIcon dataClass="doc:" {config}/>
+            <span class="ml-3">{$t("doc.other")}</span>
+          </MenuItem>
+          {#if createMenuOpened.doc }
+            {#each create_doc_items as item}
+              <MenuItem title={get_class(item)["ng:a"]} extraClass="submenu" clickable={ () => new_document(item) }>
+                <DataClassIcon dataClass={item} {config}/>
+                <span class="ml-3">{get_class(item)["ng:n"]}</span>
+              </MenuItem>
+            {/each}
+          {/if}
+
+          <div style="padding:0;" bind:this={createMenu.data}></div>
+          <MenuItem title={$t("doc.data")} clickable={ () => { createMenuOpened.data = !createMenuOpened.data; scrollToCreateMenu("data"); } }>
+            <DataClassIcon dataClass="data:" {config}/>
+            <span class="ml-3">{$t("doc.data")}</span>
+          </MenuItem>
+          {#if createMenuOpened.data }
+            {#each create_data_items as item}
+              <MenuItem title={get_class(item)["ng:a"]} extraClass="submenu" clickable={ () => new_document(item) }>
+                <DataClassIcon dataClass={item} {config}/>
+                <span class="ml-3">{get_class(item)["ng:n"]}</span>
+              </MenuItem>
+            {/each}
+          {/if}
+
+          <div style="padding:0;" bind:this={createMenu.code}></div>
+          <MenuItem title={$t("doc.code")} clickable={ () => { createMenuOpened.code = !createMenuOpened.code; scrollToCreateMenu("code"); } }>
+            <DataClassIcon dataClass="code" {config}/>
+            <span class="ml-3">{$t("doc.code")}</span>
+          </MenuItem>
+          {#if createMenuOpened.code }
+            {#each create_code_items as item}
+              <MenuItem title={get_class(item)["ng:a"]} extraClass="submenu" clickable={ () => new_document(item) }>
+                <DataClassIcon dataClass={item} {config}/>
+                <span class="ml-3">{get_class(item)["ng:n"]}</span>
+              </MenuItem>
+            {/each}
+          {/if}
+
+        </ul>
+      </div>
+    </aside>
+    
+  </div>
+</Modal>
+
 {#each $toasts as toast, i}
   <Message {toast} {i}/>
 {/each}
@@ -710,7 +1132,12 @@
         icon={MagnifyingGlass}
         
       />
-      <MobileBottomBarItem href="#/create" icon={PlusCircle} />
+      <div class="flex items-center" on:click={openModalCreate} on:keypress={openModalCreate} tabindex="0" role="button">
+        <PlusCircle
+          tabindex="-1"
+          class="w-7 h-7 text-black  focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+        />
+      </div>
       <MobileBottomBarItem href="#/shared" icon={Users} on:click={scrollToTop}  />
     </MobileBottomBar>
   </div>
@@ -763,18 +1190,16 @@
               />
             </svelte:fragment>
           </SidebarItem>
-          <SidebarItem
+          <li >
-            label={$t("pages.full_layout.create")}
+            <div on:click={openModalCreate} on:keypress={openModalCreate} role="button" tabindex="0" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-200 hover:text-[#535bf2] dark:hover:bg-gray-700 py-1 tall-xs:p-2">
-            href="#/create"
-            class="py-1 tall-xs:p-2"
-          >
-            <svelte:fragment slot="icon">
               <PlusCircle
                 tabindex="-1"
                 class="w-7 h-7 text-black  focus:outline-none dark:text-white group-hover:text-gray-900 "
               />
-            </svelte:fragment>
+              <span class="ml-3">{$t("pages.full_layout.create")}</span>
-          </SidebarItem>
+            </div>
+          </li>
+         
           <SidebarItem
             label={$t("pages.full_layout.shared")}
             href="#/shared"

ng-app/src/lib/Home.svelte

@@ -62,7 +62,7 @@
       <div
         class="mx-auto flex flex-wrap justify-between items-center w-full xxs:px-8 xs:px-10"
       >
-        <a href="#/user" class="flex items-center" on:click>
+        <a href="#/user" class="flex items-center" >
           <Logo className="w-7 h-7 tall:w-10 tall:h-10" />
           <span
             class="ml-2 self-center text-base font-normal text-gray-900 rounded-lg dark:text-white whitespace-nowrap"
@@ -76,7 +76,7 @@
               class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white focus:outline-none"
             />
           </a>
-          <a href="#/messages" class="ml-4 row items-center" on:click>
+          <a href="#/messages" class="ml-4 row items-center" >
             <PaperAirplane
               tabindex="-1"
               class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white focus:outline-none"
@@ -88,7 +88,7 @@
             </span>
           </a>
 
-          <a href="#/notifications" class="ml-4 row items-center" on:click>
+          <a href="#/notifications" class="ml-4 row items-center" >
             <Bell
               tabindex="-1"
               class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white focus:outline-none"

ng-app/src/lib/MobileBottomBarItem.svelte

@@ -29,7 +29,7 @@
   $: active = sidebarUrl ? href === sidebarUrl : false;
 </script>
 
-<a {href} class="flex items-center" on:click>
+<a {href} class="flex items-center">
   <Icon
     tabindex="-1"
     color="black"

ng-app/src/lib/components/Message.svelte

@@ -55,6 +55,7 @@
 
 <div class="toast fixed flex w-full max-w-xs" style="top:{16+i*74}px;" 
     on:click|capture|stopPropagation={()=>{remove_toast(toast.i);}} 
+    on:keypress={()=>{}}
     >
     <Toast color="{toast_color[toast.level]}" >
       <Icon tabindex="-1" slot="icon" class="w-8 h-8 p-1 focus:outline-none"  variation="outline" color="currentColor" icon={toast_icon[toast.level]} />

ng-app/src/lib/components/NavBar.svelte

@@ -18,7 +18,7 @@
     EllipsisVertical,
     ExclamationTriangle,
   } from "svelte-heros-v2";
-  import NavIcon from "./NavIcon.svelte";
+  import NavIcon from "../icons/NavIcon.svelte";
 
   import {
     Popover,

ng-app/src/lib/icons/BrailleIcon.svelte

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24" tabindex="-1" class={$$props.class || ''} style={$$props.style || ''}>
+  <path d="M4 21.25c-1.519 0-2.75 1.231-2.75 2.75s1.231 2.75 2.75 2.75c1.519 0 2.75-1.231 2.75-2.75v0c-0.002-1.518-1.232-2.748-2.75-2.75h-0zM4 25.25c-0.69 0-1.25-0.56-1.25-1.25s0.56-1.25 1.25-1.25c0.69 0 1.25 0.56 1.25 1.25v0c-0.001 0.69-0.56 1.249-1.25 1.25h-0zM20 21.25c-1.519 0-2.75 1.231-2.75 2.75s1.231 2.75 2.75 2.75c1.519 0 2.75-1.231 2.75-2.75v0c-0.002-1.518-1.232-2.748-2.75-2.75h-0zM20 25.25c-0.69 0-1.25-0.56-1.25-1.25s0.56-1.25 1.25-1.25c0.69 0 1.25 0.56 1.25 1.25v0c-0.001 0.69-0.56 1.249-1.25 1.25h-0zM12 13.25c-1.519 0-2.75 1.231-2.75 2.75s1.231 2.75 2.75 2.75c1.519 0 2.75-1.231 2.75-2.75v0c-0.002-1.518-1.232-2.748-2.75-2.75h-0zM12 17.25c-0.69 0-1.25-0.56-1.25-1.25s0.56-1.25 1.25-1.25c0.69 0 1.25 0.56 1.25 1.25v0c-0.001 0.69-0.56 1.249-1.25 1.25h-0zM20 13.25c-1.519 0-2.75 1.231-2.75 2.75s1.231 2.75 2.75 2.75c1.519 0 2.75-1.231 2.75-2.75v0c-0.002-1.518-1.232-2.748-2.75-2.75h-0zM20 17.25c-0.69 0-1.25-0.56-1.25-1.25s0.56-1.25 1.25-1.25c0.69 0 1.25 0.56 1.25 1.25v0c-0.001 0.69-0.56 1.249-1.25 1.25h-0zM28 5.25c-1.519 0-2.75 1.231-2.75 2.75s1.231 2.75 2.75 2.75c1.519 0 2.75-1.231 2.75-2.75v0c-0.002-1.518-1.232-2.748-2.75-2.75h-0zM28 9.25c-0.69 0-1.25-0.56-1.25-1.25s0.56-1.25 1.25-1.25c0.69 0 1.25 0.56 1.25 1.25v0c-0.001 0.69-0.56 1.249-1.25 1.25h-0zM4 5.25c-1.519 0-2.75 1.231-2.75 2.75s1.231 2.75 2.75 2.75c1.519 0 2.75-1.231 2.75-2.75v0c-0.002-1.518-1.232-2.748-2.75-2.75h-0zM4 9.25c-0.69 0-1.25-0.56-1.25-1.25s0.56-1.25 1.25-1.25c0.69 0 1.25 0.56 1.25 1.25v0c-0.001 0.69-0.56 1.249-1.25 1.25h-0zM20 5.25c-1.519 0-2.75 1.231-2.75 2.75s1.231 2.75 2.75 2.75c1.519 0 2.75-1.231 2.75-2.75v0c-0.002-1.518-1.232-2.748-2.75-2.75h-0zM20 9.25c-0.69 0-1.25-0.56-1.25-1.25s0.56-1.25 1.25-1.25c0.69 0 1.25 0.56 1.25 1.25v0c-0.001 0.69-0.56 1.249-1.25 1.25h-0z"></path>
+</svg>

ng-app/src/lib/icons/ChemistryIcon.svelte

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 360.99 360.99" xml:space="preserve" fill="currentColor" width="24" height="24" tabindex="-1" class={$$props.class || ''} style={$$props.style || ''} xmlns="http://www.w3.org/2000/svg">
+	<path d="M360.99,189.609l-9.322-11.75l-43.003,34.118l-56.418-32.573v-64.916l45.639-36.209l-9.322-11.75l-44.455,35.27
+	l-57.419-33.151V22.754h-15v48.673l-52.578,30.356L74.676,66.529l-9.322,11.75l45.592,36.171v63.564l-65.558,37.851v73.894
+	L0,325.768l9.322,11.75l44.426-35.246l62.29,35.964l64.355-37.156l64.354,37.156l70.651-40.791v-71.664L360.99,189.609z
+	 M125.945,115.158l55.651-32.13l55.65,32.13v64.246l-55.662,32.137l-55.639-32.123V115.158z M171.689,288.785l-55.651,32.131
+	l-55.65-32.131v-64.26l55.65-32.131l55.651,32.131V288.785z M300.398,288.785l-55.651,32.131l-55.65-32.131v-64.246l55.663-32.137
+	l55.639,32.124V288.785z"/>
+</svg>

ng-app/src/lib/icons/DataClassIcon.svelte

@@ -20,7 +20,7 @@
     ViewfinderCircle,
     ArrowsPointingOut,
     Cube,
-    Briefcase,
+    ClipboardDocumentCheck,
     MagnifyingGlass,
     RocketLaunch,
     Sun,
@@ -38,7 +38,7 @@
     Photo,
     Film,
     RectangleStack,
-    Microphone,
+    SpeakerWave,
     MusicalNote,
     Ticket,
     CursorArrowRays,
@@ -67,20 +67,41 @@
     Cog,
     Square3Stack3d,
     ChatBubbleLeftRight,
+    Fire,
+    ReceiptPercent,
+    ArrowTrendingUp,
+    CursorArrowRipple,
+    VideoCamera,
+    Variable,
+    Language,
+    QueueList,
   } from "svelte-heros-v2";
 
+  import PdfIcon from "./PdfIcon.svelte";
+  import BrailleIcon from "./BrailleIcon.svelte";
+  import ChemistryIcon from "./ChemistryIcon.svelte";
+  import GuitarIcon from "./GuitarIcon.svelte";
+  import JsonIcon from "./JsonIcon.svelte";
+  import JsIcon from "./JsIcon.svelte";
+  import TsIcon from "./TsIcon.svelte";
+  import RustIcon from "./RustIcon.svelte";
+  import SvelteIcon from "./SvelteIcon.svelte";
+  import ReactIcon from "./ReactIcon.svelte";
+
   export let config = {};
   export let dataClass: string;
+  export let color = "currentColor";
 
   const exact_mapping = {
     page: Window,
     "app": Cog,
     "app:z": SquaresPlus,
     class: ViewfinderCircle,
-    contract: Briefcase,
+    contract: ClipboardDocumentCheck,
     "query:text": MagnifyingGlass,
     "query:web": MagnifyingGlass,
     "data:graph": Sun,
+    "data:json": JsonIcon,
     "data:table": TableCells,
     "data:collection": ListBullet,
     "data:container": Square3Stack3d,
@@ -93,10 +114,10 @@
     "plato/card": Clipboard,
     "plato/pad": Square2Stack,
     "media:image": Photo,
-    "media:reel": Film,
+    "media:reel": VideoCamera,
     "media:video": Film,
     "media:album": RectangleStack,
-    "media:audio": Microphone,
+    "media:audio": SpeakerWave,
     "media:song": MusicalNote,
     "media:subtitle": Ticket,
     "media:overlay": CursorArrowRays,
@@ -108,6 +129,7 @@
     "social:scheduler": Calendar,
     "social:reaction": Heart,
     "social:chatroom": ChatBubbleLeftRight,
+    "social:live": Fire,
     "prod:task": Stop,
     "prod:project": Flag,
     "prod:issue": HandRaised,
@@ -117,8 +139,22 @@
     "prod:slides": PresentationChartBar,
     "prod:question": QuestionMarkCircle,
     "prod:answer": CheckCircle,
-    "prod:poll": QuestionMarkCircle,
+    "prod:poll": CursorArrowRipple,
     "prod:vote": CheckCircle,
+    "prod:spreadsheet": ReceiptPercent,
+    "doc:compose": QueueList,
+    "doc:maths": Variable,
+    "doc:music:abc": MusicalNote,
+    "doc:pdf": PdfIcon,
+    "doc:braille": BrailleIcon,
+    "doc:ancientscript": Language,
+    "doc:chemistry": ChemistryIcon,
+    "doc:music:guitar": GuitarIcon,
+    "code:js": JsIcon,
+    "code:ts": TsIcon,
+    "code:rust": RustIcon,
+    "code:svelte": SvelteIcon,
+    "code:react": ReactIcon,
   };
 
   const prefix_mapping = {
@@ -132,7 +168,7 @@
     "data:": CircleStack,
     "doc:diagram": DocumentChartBar,
     "doc:chart": ChartPie,
-    "doc:viz": ChartPie,
+    "doc:viz": ArrowTrendingUp,
     "doc:": ClipboardDocumentList,
     file: Document,
   };
@@ -147,47 +183,4 @@
   };
 </script>
 
-<!--
+<Icon {...config} variation="outline" {color} icon={find(dataClass)} />
-did:ng:n:g:z:[official apps]
-did:ng:n:g:x:ng
-did:ng:n:g:x list of context used by nextgraph
-  rdf: http://www.w3.org/1999/02/22-rdf-syntax-ns#
-  rdfs: http://www.w3.org/2000/01/rdf-schema#
-  schema: https://schema.org/
-  skos: http://www.w3.org/2004/02/skos/core#
-  owl: http://www.w3.org/2002/07/owl#
-  foaf: http://xmlns.com/foaf/0.1/
-  relationship: http://purl.org/vocab/relationship/
-  dcterms: http://purl.org/dc/terms/
-  dcmitype: http://purl.org/dc/dcmitype/
-  sh: http://www.w3.org/ns/shacl#
-  shex: http://www.w3.org/ns/shex#
-  xsd: http://www.w3.org/2001/XMLSchema#
-  as: https://www.w3.org/ns/activitystreams#
-  ldp: http://www.w3.org/ns/ldp#
-  vcard: http://www.w3.org/2006/vcard/ns#
-  sec: https://w3id.org/security#
-  wgs: http://www.w3.org/2003/01/geo/wgs84_pos#
-  cc: http://creativecommons.org/ns#
-  gn: https://www.geonames.org/ontology#
-  geo: http://www.opengis.net/ont/geosparql#
-  time: http://www.w3.org/2006/time#
-
-  ng: did:ng:n:g:x:ng# or http://nextgraph.org/x:ng#
-
-did:ng:n:g:x:ng#post:rich
-ng:class => shortcut for did:ng:n:g:x:ng#class
-a rdfs:Class
-a ng:class
-did:ng:o:xxxx:yy:yy
-did:ng:n:xx.xx#name
-did:ng:x: curated list of ontologies
-did:ng:k common list of things (keyword)
-did:ng:n:g:a common data
-did:ng:z: curated list of external apps and services (app store)
-http://nextgraph.org/x:ng# => the ng: ontology (did:ng:n:g:x:ng#)
-
-ng:compat -> owl:unionOf rdf:List (alphabetical order, including itself as first element)
-
--->
-<Icon {...config} variation="outline" color="black" icon={find(dataClass)} />

ng-app/src/lib/icons/GuitarIcon.svelte

@@ -0,0 +1,4 @@
+<svg  viewBox="0 0 32 32" fill="currentColor" width="24" height="24" tabindex="-1" class={$$props.class || ''} style={$$props.style || ''} xmlns="http://www.w3.org/2000/svg">
+    <path d="M18.448,26.655c0.001,-0.001 0.001,-0.001 0.001,-0.002c2.407,-3.406 6.792,-9.888 8.717,-14.401c0.535,-1.252 0.882,-2.367 0.983,-3.246c0.088,-0.778 -0.016,-1.414 -0.263,-1.881c-0.359,-0.676 -1.158,-1.309 -2.339,-1.783c-2.201,-0.881 -5.872,-1.342 -9.545,-1.342c-3.673,-0 -7.344,0.461 -9.545,1.342c-1.181,0.474 -1.98,1.107 -2.338,1.783c-0.248,0.467 -0.352,1.103 -0.263,1.881c0.1,0.879 0.447,1.994 0.982,3.246c1.925,4.513 6.31,10.995 8.716,14.402c0.001,0 0.001,0.001 0.001,0.002c0.563,0.792 1.475,1.263 2.447,1.263c0.972,-0 1.884,-0.471 2.446,-1.264Zm-1.631,-1.157c-0.188,0.264 -0.491,0.421 -0.815,0.421c-0.324,0 -0.628,-0.157 -0.815,-0.421c-2.346,-3.321 -6.633,-9.632 -8.51,-14.03c-0.375,-0.88 -0.652,-1.675 -0.781,-2.345c-0.086,-0.449 -0.142,-0.813 -0.01,-1.061c0.109,-0.207 0.339,-0.37 0.627,-0.536c0.422,-0.242 0.961,-0.45 1.585,-0.632c2.061,-0.601 4.983,-0.894 7.904,-0.894c2.921,-0 5.843,0.293 7.904,0.894c0.624,0.182 1.163,0.39 1.585,0.632c0.288,0.166 0.518,0.329 0.628,0.536c0.131,0.248 0.075,0.612 -0.011,1.061c-0.129,0.67 -0.406,1.465 -0.781,2.345c-1.877,4.398 -6.164,10.709 -8.51,14.03l-0,-0Z"/>
+    <path d="M15.993,8.956l0,0.001c-0.001,0.018 -0.001,0.036 -0.001,0.054l-0,4.601c-0.236,-0.066 -0.485,-0.101 -0.742,-0.101c-1.518,-0 -2.75,1.232 -2.75,2.75c0,1.517 1.232,2.75 2.75,2.75c1.518,-0 2.75,-1.233 2.75,-2.75c0,-0.073 -0.008,-4.835 -0.008,-4.835l1.301,1.301c0.39,0.39 1.024,0.39 1.414,-0c0.39,-0.391 0.39,-1.024 0,-1.414l-3.008,-3.009c-0.39,-0.39 -1.024,-0.39 -1.414,0c-0.182,0.181 -0.279,0.415 -0.292,0.652Zm-0.743,6.555c0.414,-0 0.75,0.336 0.75,0.75c0,0.414 -0.336,0.75 -0.75,0.75c-0.414,-0 -0.75,-0.336 -0.75,-0.75c0,-0.414 0.336,-0.75 0.75,-0.75Z"/>
+</svg>

ng-app/src/lib/icons/JsIcon.svelte

@@ -0,0 +1,3 @@
+<svg  viewBox="0 0 16 16" fill="none" width="24" height="24" tabindex="-1" class={$$props.class || ''} style={$$props.style || ''} xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="nonzero" clip-rule="nonzero" d="M0 1.75C0 0.783501 0.783502 0 1.75 0H14.25C15.2165 0 16 0.783502 16 1.75V3.75C16 4.16421 15.6642 4.5 15.25 4.5C14.8358 4.5 14.5 4.16421 14.5 3.75V1.75C14.5 1.61193 14.3881 1.5 14.25 1.5H1.75C1.61193 1.5 1.5 1.61193 1.5 1.75V14.25C1.5 14.3881 1.61193 14.5 1.75 14.5H15.25C15.6642 14.5 16 14.8358 16 15.25C16 15.6642 15.6642 16 15.25 16H1.75C0.783501 16 0 15.2165 0 14.25V1.75ZM8.25 5.75C8.66421 5.75 9 6.08579 9 6.5V10.5C9 11.5048 8.72399 12.2584 8.15514 12.7324C7.61223 13.1848 6.95384 13.25 6.5 13.25C6.08579 13.25 5.75 12.9142 5.75 12.5C5.75 12.0858 6.08579 11.75 6.5 11.75C6.84617 11.75 7.06277 11.6902 7.19486 11.5801C7.301 11.4916 7.5 11.2452 7.5 10.5V6.5C7.5 6.08579 7.83578 5.75 8.25 5.75ZM11.2757 6.58011C11.6944 6.08164 12.3507 5.75 13.25 5.75C14.0849 5.75 14.7148 6.03567 15.1394 6.48481C15.4239 6.78583 15.4105 7.26052 15.1095 7.54505C14.8085 7.82958 14.3338 7.81621 14.0493 7.51519C13.9394 7.39898 13.7204 7.25 13.25 7.25C12.7493 7.25 12.5306 7.41836 12.4243 7.54489C12.2934 7.70065 12.25 7.896 12.25 8C12.25 8.104 12.2934 8.29935 12.4243 8.45511C12.5306 8.58164 12.7493 8.75 13.25 8.75C13.3257 8.75 13.3988 8.76121 13.4676 8.78207C14.1307 8.87646 14.6319 9.17251 14.9743 9.58011C15.3684 10.0493 15.5 10.604 15.5 11C15.5 11.396 15.3684 11.9507 14.9743 12.4199C14.5556 12.9184 13.8993 13.25 13 13.25C12.1651 13.25 11.5352 12.9643 11.1106 12.5152C10.8261 12.2142 10.8395 11.7395 11.1405 11.4549C11.4415 11.1704 11.9162 11.1838 12.2007 11.4848C12.3106 11.601 12.5296 11.75 13 11.75C13.5007 11.75 13.7194 11.5816 13.8257 11.4551C13.9566 11.2993 14 11.104 14 11C14 10.896 13.9566 10.7007 13.8257 10.5449C13.7194 10.4184 13.5007 10.25 13 10.25C12.9243 10.25 12.8512 10.2388 12.7824 10.2179C12.1193 10.1235 11.6181 9.82749 11.2757 9.41989C10.8816 8.95065 10.75 8.396 10.75 8C10.75 7.604 10.8816 7.04935 11.2757 6.58011Z" fill="currentColor" fill-opacity="0.80"/>    
+</svg>

ng-app/src/lib/icons/JsonIcon.svelte

@@ -0,0 +1,4 @@
+<svg  viewBox="0 0 24 24" fill="none" width="24" height="24" tabindex="-1" class={$$props.class || ''} style={$$props.style || ''} xmlns="http://www.w3.org/2000/svg">
+    <path d="M14 19H16C17.1046 19 18 18.1046 18 17V14.5616C18 13.6438 18.6246 12.8439 19.5149 12.6213L21.0299 12.2425C21.2823 12.1794 21.2823 11.8206 21.0299 11.7575L19.5149 11.3787C18.6246 11.1561 18 10.3562 18 9.43845V5H14" stroke="currentColor"/>
+    <path d="M10 5H8C6.89543 5 6 5.89543 6 7V9.43845C6 10.3562 5.37541 11.1561 4.48507 11.3787L2.97014 11.7575C2.71765 11.8206 2.71765 12.1794 2.97014 12.2425L4.48507 12.6213C5.37541 12.8439 6 13.6438 6 14.5616V19H10" stroke="currentColor"/>
+</svg>

ng-app/src/lib/icons/JsonLdIcon.svelte

@@ -0,0 +1,10 @@
+<svg  fill="none" width="24" height="24" tabindex="-1" class={$$props.class || ''} style={$$props.style || ''} viewBox="-10 255 1034 734" xmlns="http://www.w3.org/2000/svg">
+    <path fill="currentColor"
+d="M278 256q-95 0 -127.5 28t-32.5 113v92q0 57 -20 79t-74 22h-24v55h24q53 0 73.5 22t20.5 80v92q0 84 32.5 112.5t127.5 28.5h25v-55h-27q-54 0 -70 -16.5t-16 -71.5v-95q0 -59 -17.5 -86.5t-59.5 -37.5q42 -10 59.5 -37t17.5 -87v-95q0 -55 16 -71.5t70 -16.5h27v-55
+h-25zM697 256v55h27q53 0 69.5 16.5t16.5 71.5v95q0 60 17 87t60 37q-42 10 -59.5 37t-17.5 87v95q0 55 -16.5 71.5t-69.5 16.5h-27v55h24q95 0 127 -28.5t32 -112.5l1 -92q-1 -58 20 -80t75 -22h24v-55h-24q-54 0 -75 -22t-20 -79v-92q-1 -85 -33 -113t-127 -28h-24z
+M617 341q-27 0 -51 14t-37 39q-16 31 -11 64l-1 -2v5q-1 6 -5 13q-5 10 -16 21q-13 13 -35 26q-38 24 -68 24q-14 0 -21 -5v0l2 3l-6 -3q-37 -20 -77 -7.5t-60 49.5t-7.5 77t49.5 60q27 14 57.5 11t53.5 -22l-1 2l5 -3q6 -2 15 -2q12 0 27 4q18 5 41 17q33 18 48 39
+q10 13 11 26q-1 28 13.5 53.5t40.5 39.5q37 19 77 7t60 -49t7.5 -77.5t-49.5 -59.5q-5 -3 -10 -5h2l-3 -3q-5 -4 -8 -11q-6 -11 -9 -25q-4 -19 -4.5 -44t2.5 -44q3 -15 8 -26q3 -7 8 -12l3 -3h-3q28 -14 43 -43q20 -37 7.5 -77t-49.5 -60q-23 -12 -49 -11zM619 357
+q27 0 46 17v0q-10 -9 -31 -7t-41 15q6 6 6 14.5t-5.5 15t-14.5 6.5q-3 0 -6 -1h-1q-9 -3 -15 6q-10 19 -11 37t8 29q-19 -21 -18 -51t22 -53q13 -14 29 -21t32 -7zM550 524q7 0 11 2l10 6q9 4 19 7q21 20 23 81q0 36 -8 59q-6 15 -15 23q-14 6 -25 16q-10 3 -25 1
+q-24 -4 -56 -21q-34 -19 -51 -38q-10 -12 -11 -22q1 -13 -2 -26l1 1v-5q1 -5 5 -12q6 -9 17 -19q13 -13 34 -26q42 -26 70 -27h3zM323 548q27 0 46 17h-1q-10 -9 -30.5 -7t-40.5 15q5 6 5.5 14t-5.5 14.5t-15 7.5q-2 0 -5 -1h-2q-8 -3 -15 6q-9 18 -10 36.5t8 28.5
+q-20 -20 -19 -50t23 -53q12 -14 28 -21t33 -7zM637 709q27 0 46 17h-1q-10 -9 -30.5 -6.5t-40.5 15.5q5 5 5.5 13.5t-5.5 15t-15 6.5h-5l-2 -1q-8 -2 -15 6q-10 19 -10.5 37t8.5 29q-20 -21 -19 -50.5t23 -53.5q12 -13 28 -20.5t33 -7.5z" />
+</svg>

ng-app/src/lib/icons/MarkdownIcon.svelte

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24" tabindex="-1" class={$$props.class || ''} style={$$props.style || ''}>
+    <path d="M14 3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h12zM2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2z"/>
+    <path fill-rule="evenodd" d="M9.146 8.146a.5.5 0 0 1 .708 0L11.5 9.793l1.646-1.647a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 0-.708z"/>
+    <path fill-rule="evenodd" d="M11.5 5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 1 .5-.5z"/>
+    <path d="M3.56 11V7.01h.056l1.428 3.239h.774l1.42-3.24h.056V11h1.073V5.001h-1.2l-1.71 3.894h-.039l-1.71-3.894H2.5V11h1.06z"/>
+  </svg>

ng-app/src/lib/icons/NavIcon.svelte

@@ -29,7 +29,7 @@
       PaperAirplane,
     } from "svelte-heros-v2";
   
-    import DataClassIcon from "../DataClassIcon.svelte";
+    import DataClassIcon from "./DataClassIcon.svelte";
 
     export let config = {};
     export let img: string;

ng-app/src/lib/icons/PdfIcon.svelte

@@ -0,0 +1,3 @@
+<svg  viewBox="-4 0 40 40" fill="currentColor" width="24" height="24" tabindex="-1" class={$$props.class || ''} style={$$props.style || ''} xmlns="http://www.w3.org/2000/svg">
+    <path d="M25.6686 26.0962C25.1812 26.2401 24.4656 26.2563 23.6984 26.145C22.875 26.0256 22.0351 25.7739 21.2096 25.403C22.6817 25.1888 23.8237 25.2548 24.8005 25.6009C25.0319 25.6829 25.412 25.9021 25.6686 26.0962ZM17.4552 24.7459C17.3953 24.7622 17.3363 24.7776 17.2776 24.7939C16.8815 24.9017 16.4961 25.0069 16.1247 25.1005L15.6239 25.2275C14.6165 25.4824 13.5865 25.7428 12.5692 26.0529C12.9558 25.1206 13.315 24.178 13.6667 23.2564C13.9271 22.5742 14.193 21.8773 14.468 21.1894C14.6075 21.4198 14.7531 21.6503 14.9046 21.8814C15.5948 22.9326 16.4624 23.9045 17.4552 24.7459ZM14.8927 14.2326C14.958 15.383 14.7098 16.4897 14.3457 17.5514C13.8972 16.2386 13.6882 14.7889 14.2489 13.6185C14.3927 13.3185 14.5105 13.1581 14.5869 13.0744C14.7049 13.2566 14.8601 13.6642 14.8927 14.2326ZM9.63347 28.8054C9.38148 29.2562 9.12426 29.6782 8.86063 30.0767C8.22442 31.0355 7.18393 32.0621 6.64941 32.0621C6.59681 32.0621 6.53316 32.0536 6.44015 31.9554C6.38028 31.8926 6.37069 31.8476 6.37359 31.7862C6.39161 31.4337 6.85867 30.8059 7.53527 30.2238C8.14939 29.6957 8.84352 29.2262 9.63347 28.8054ZM27.3706 26.1461C27.2889 24.9719 25.3123 24.2186 25.2928 24.2116C24.5287 23.9407 23.6986 23.8091 22.7552 23.8091C21.7453 23.8091 20.6565 23.9552 19.2582 24.2819C18.014 23.3999 16.9392 22.2957 16.1362 21.0733C15.7816 20.5332 15.4628 19.9941 15.1849 19.4675C15.8633 17.8454 16.4742 16.1013 16.3632 14.1479C16.2737 12.5816 15.5674 11.5295 14.6069 11.5295C13.948 11.5295 13.3807 12.0175 12.9194 12.9813C12.0965 14.6987 12.3128 16.8962 13.562 19.5184C13.1121 20.5751 12.6941 21.6706 12.2895 22.7311C11.7861 24.0498 11.2674 25.4103 10.6828 26.7045C9.04334 27.3532 7.69648 28.1399 6.57402 29.1057C5.8387 29.7373 4.95223 30.7028 4.90163 31.7107C4.87693 32.1854 5.03969 32.6207 5.37044 32.9695C5.72183 33.3398 6.16329 33.5348 6.6487 33.5354C8.25189 33.5354 9.79489 31.3327 10.0876 30.8909C10.6767 30.0029 11.2281 29.0124 11.7684 27.8699C13.1292 27.3781 14.5794 27.011 15.985 26.6562L16.4884 26.5283C16.8668 26.4321 17.2601 26.3257 17.6635 26.2153C18.0904 26.0999 18.5296 25.9802 18.976 25.8665C20.4193 26.7844 21.9714 27.3831 23.4851 27.6028C24.7601 27.7883 25.8924 27.6807 26.6589 27.2811C27.3486 26.9219 27.3866 26.3676 27.3706 26.1461ZM30.4755 36.2428C30.4755 38.3932 28.5802 38.5258 28.1978 38.5301H3.74486C1.60224 38.5301 1.47322 36.6218 1.46913 36.2428L1.46884 3.75642C1.46884 1.6039 3.36763 1.4734 3.74457 1.46908H20.263L20.2718 1.4778V7.92396C20.2718 9.21763 21.0539 11.6669 24.0158 11.6669H30.4203L30.4753 11.7218L30.4755 36.2428ZM28.9572 10.1976H24.0169C21.8749 10.1976 21.7453 8.29969 21.7424 7.92417V2.95307L28.9572 10.1976ZM31.9447 36.2428V11.1157L21.7424 0.871022V0.823357H21.6936L20.8742 0H3.74491C2.44954 0 0 0.785336 0 3.75711V36.2435C0 37.5427 0.782956 40 3.74491 40H28.2001C29.4952 39.9997 31.9447 39.2143 31.9447 36.2428Z" />
+</svg>

ng-app/src/lib/icons/RdfIcon.svelte

@@ -0,0 +1,9 @@
+<svg  fill="none" width="24" height="24" tabindex="-1" class={$$props.class || ''} style={$$props.style || ''} viewBox="-10 255 1034 734" xmlns="http://www.w3.org/2000/svg">
+    <path fill="currentColor"
+    d="M704 227q-40 0 -74.5 20.5t-53.5 56.5q-23 43 -15 92l-2 -2v6q-1 9 -7 19q-7 15 -23 30q-20 19 -50.5 38t-57.5 28q-22 7 -40 7q-14 0 -24 -4l-8 -3l3 3l-8 -4q-35 -19 -73.5 -17.5t-72 22t-52 55.5t-17 74t22 72t55.5 52q40 21 83.5 16.5t76.5 -31.5l-1 2l7 -4
+    q9 -3 21 -3q17 -1 39 5q27 8 59 25q48 26 70 56q15 19 16 37q-1 42 19.5 78.5t58.5 56.5q35 18 73.5 16.5t72 -22t52 -55.5t17 -74t-22 -72t-55.5 -51q-7 -4 -15 -7l3 -1l-5 -4q-6 -5 -11 -16q-8 -15 -12 -36q-6 -27 -7 -63t3 -63q4 -22 11 -37q5 -11 12 -18l5 -4h-5
+    q41 -21 62 -62q19 -35 17.5 -73.5t-22 -71.5t-55.5 -52q-33 -18 -70 -17zM706 250q39 0 66 25v0q-15 -13 -44.5 -10t-58.5 22q8 8 8.5 20t-8 21.5t-21.5 9.5h-8l-2 -1q-12 -4 -21 8q-16 29 -16 56.5t15 42.5q-20 -19 -27 -46.5t0.5 -56t28.5 -51.5q18 -19 41 -29.5t47 -10.5
+    zM605 491q11 0 18 3.5t14 7.5q13 7 27 11q11 11 20 33q11 33 12.5 84t-10.5 84q-9 22 -22 34q-20 9 -36 23q-14 5 -36 1q-34 -6 -81 -31q-49 -26 -73 -54q-14 -17 -17 -32q2 -18 -1 -37v1l1 -6q1 -8 7 -18q8 -13 24 -28q20 -18 50 -37q62 -38 103 -39zM279 525q39 0 66 25
+    h-1q-14 -13 -44 -10t-58 22q7 8 7.5 20t-8 21.5t-20.5 9.5q-4 1 -8 0l-2 -1q-13 -4 -22 8q-15 29 -15.5 56.5t14.5 42.5q-20 -19 -26.5 -46.5t1 -56t28.5 -51.5q18 -19 41 -29.5t47 -10.5zM731 758q39 0 66 25v0q-14 -13 -44 -10t-59 22q8 8 8.5 20t-8 21.5t-21.5 9.5
+    q-4 0 -8 -1h-2q-12 -4 -21 8q-16 29 -16 56.5t15 42.5q-20 -19 -27 -46.5t0.5 -56t28.5 -51.5q18 -19 41 -29.5t47 -10.5z" />
+</svg>

ng-app/src/lib/icons/ReactIcon.svelte

@@ -0,0 +1,3 @@
+<svg  fill="currentColor" width="24" height="24" tabindex="-1" class={$$props.class || ''} style={$$props.style || ''} viewBox="0 -1.5 27 27" xmlns="http://www.w3.org/2000/svg">
+    <path d="m15.902 11.974c0 1.331-1.079 2.41-2.41 2.41s-2.41-1.079-2.41-2.41 1.079-2.41 2.41-2.41 2.41 1.079 2.41 2.41z"/><path d="m13.491 17.494c-.201.005-.438.008-.676.008-2.811 0-5.522-.425-8.073-1.214l.193.051c-1.351-.436-2.522-1.079-3.541-1.903l.021.016c-.789-.571-1.32-1.455-1.41-2.467l-.001-.013c0-1.594 1.747-3.154 4.681-4.172 2.512-.827 5.403-1.304 8.405-1.304.139 0 .278.001.417.003h-.021c.116-.002.252-.003.389-.003 2.965 0 5.82.469 8.496 1.337l-.195-.055c1.305.424 2.438 1.036 3.433 1.814l-.024-.018c.775.546 1.298 1.404 1.386 2.387l.001.013c0 1.656-1.954 3.332-5.103 4.374-2.363.729-5.08 1.149-7.895 1.149-.17 0-.339-.002-.508-.005h.025zm0-9.84c-.106-.002-.232-.002-.358-.002-2.881 0-5.656.452-8.259 1.289l.191-.053c-2.698.941-3.908 2.228-3.908 3.087 0 .893 1.301 2.3 4.153 3.274 2.249.697 4.834 1.099 7.513 1.099.235 0 .469-.003.702-.009l-.034.001c.146.003.318.005.49.005 2.684 0 5.274-.4 7.715-1.143l-.187.049c2.96-.984 4.32-2.391 4.32-3.28-.102-.638-.462-1.176-.966-1.515l-.008-.005c-.866-.674-1.876-1.217-2.97-1.574l-.07-.02c-2.368-.766-5.093-1.208-7.92-1.208-.142 0-.283.001-.424.003h.021z"/><path d="m8.023 23.986c-.016 0-.035.001-.053.001-.453 0-.878-.119-1.245-.327l.013.007c-1.378-.8-1.858-3.092-1.28-6.141.697-3.128 1.827-5.894 3.344-8.4l-.069.124c1.499-2.655 3.31-4.926 5.425-6.872l.02-.018c.923-.844 2.003-1.537 3.187-2.028l.073-.027c.407-.196.885-.31 1.39-.31.501 0 .976.113 1.4.314l-.02-.008c1.435.826 1.911 3.36 1.238 6.606-.72 2.967-1.818 5.58-3.262 7.959l.07-.123c-1.452 2.63-3.209 4.882-5.266 6.819l-.014.013c-.958.877-2.083 1.59-3.321 2.082l-.074.026c-.46.181-.992.292-1.549.305h-.006zm1.205-14.447.499.288c-1.381 2.28-2.465 4.926-3.106 7.74l-.034.18c-.533 2.809-.019 4.498.72 4.926.191.102.417.161.657.161.02 0 .041 0 .061-.001h-.003c.955 0 2.458-.605 4.196-2.122 1.976-1.867 3.654-4.023 4.972-6.404l.068-.135c1.318-2.156 2.371-4.653 3.025-7.307l.038-.182c.629-3.058.086-4.93-.686-5.378-.238-.094-.514-.148-.802-.148-.364 0-.708.087-1.012.24l.013-.006c-1.118.465-2.078 1.086-2.907 1.846l.007-.006c-2.041 1.881-3.772 4.057-5.136 6.468l-.069.132z"/><path d="m18.96 24c-1.306 0-2.96-.787-4.69-2.276-2.175-1.983-4.017-4.282-5.464-6.834l-.072-.137c-1.43-2.349-2.551-5.075-3.215-7.975l-.036-.185c-.162-.709-.255-1.522-.255-2.357 0-.527.037-1.044.108-1.551l-.007.058c.085-.998.608-1.858 1.372-2.399l.01-.007c1.43-.83 3.865.024 6.342 2.228 2.022 1.914 3.748 4.113 5.118 6.54l.072.138c1.428 2.297 2.557 4.961 3.242 7.798l.038.186c.163.709.257 1.524.257 2.36 0 .577-.044 1.143-.13 1.696l.008-.062c-.103 1.022-.644 1.901-1.429 2.456l-.011.007c-.348.199-.764.316-1.207.316-.018 0-.036 0-.054-.001h.003zm-9.228-9.823c1.458 2.571 3.217 4.771 5.271 6.656l.02.018c2.166 1.863 3.884 2.266 4.628 1.834.773-.446 1.339-2.276.754-5.233-.702-2.89-1.787-5.434-3.219-7.741l.065.112c-1.379-2.456-3.027-4.562-4.948-6.384l-.012-.011c-2.334-2.074-4.225-2.54-4.998-2.094-.473.385-.784.952-.825 1.593v.007c-.055.39-.086.84-.086 1.298 0 .757.086 1.493.248 2.201l-.013-.066c.673 2.952 1.747 5.559 3.182 7.924l-.066-.117z"/>
+</svg>

ng-app/src/lib/icons/RustIcon.svelte

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none" width="24" height="24" tabindex="-1" class={$$props.class || ''} style={$$props.style || ''}>
+  <path d="M8 .1c.422 0 .765.342.765.765v.916c.296.035.587.091.87.166l.283-.683a.764.764 0 111.413.585l-.276.665c.287.157.56.335.817.533l.633-.633a.765.765 0 011.081 1.081l-.62.62c.24.298.453.618.637.956l.631-.261a.765.765 0 11.585 1.413l-.654.27c.072.277.126.56.16.849h.81a.765.765 0 010 1.529h-.81a6.334 6.334 0 01-.21 1.027l.664.275a.765.765 0 11-.585 1.413l-.672-.278c-.13.24-.278.471-.44.693l.504.504a.765.765 0 01-1.081 1.081l-.465-.465c-.3.253-.627.48-.978.677l.269.65a.765.765 0 11-1.413.586l-.27-.65a6.332 6.332 0 01-.883.181v.57a.765.765 0 01-1.53 0v-.555a6.386 6.386 0 01-1.087-.218l-.278.672a.765.765 0 11-1.413-.585l.285-.688a6.38 6.38 0 01-.84-.581l-.407.406a.765.765 0 01-1.081-1.081l.428-.428a6.348 6.348 0 01-.459-.703l-.748.31a.765.765 0 01-.585-1.413l.748-.31a6.339 6.339 0 01-.205-1.09H.865a.765.765 0 010-1.53h.762c.044-.298.108-.593.192-.88l-.81-.336a.765.765 0 01.585-1.413l.815.337c.181-.33.39-.643.625-.934l-.62-.62a.765.765 0 011.081-1.081l.633.633c.205-.158.42-.303.645-.435l-.316-.763a.765.765 0 011.413-.585L6.175 2a6.34 6.34 0 011.06-.22V.865C7.235.442 7.578.1 8 .1zm-.765 3.354a4.854 4.854 0 00-3.487 2.36l.61.199a.765.765 0 11-.472 1.454l-.653-.212a4.823 4.823 0 001.294 4.225l.458-.63a.764.764 0 011.237.898l-.47.648A4.818 4.818 0 008 12.948c.812 0 1.577-.2 2.249-.552l-.352-.484a.765.765 0 011.237-.899l.34.467c.349-.36.642-.773.867-1.227a4.843 4.843 0 00.34-2.97l-.567.184a.764.764 0 11-.472-1.454l.5-.163a4.827 4.827 0 00-3.377-2.374v.447a.765.765 0 11-1.53 0v-.469z" fill="currentColor" fill-opacity="0.80"/>
+  </svg>

ng-app/src/lib/icons/SvelteIcon.svelte

@@ -0,0 +1,3 @@
+<svg  viewBox="0 0 15 15" fill="none" width="24" height="24" tabindex="-1" class={$$props.class || ''} style={$$props.style || ''} xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.2829 1.94409C14.2083 3.42511 14.046 5.27647 13.0128 6.56576C13.8628 8.37306 13.2462 10.5713 11.5104 11.656L7.27012 14.3056C5.39667 15.4763 2.92892 14.9066 1.75825 13.0331C0.832798 11.5521 0.99519 9.70071 2.02833 8.41145C1.17829 6.60415 1.79488 4.40587 3.53076 3.32117L7.771 0.671576C9.64446 -0.499089 12.1122 0.070635 13.2829 1.94409ZM8.30092 1.51962C9.70601 0.641625 11.5568 1.06892 12.4348 2.47401C13.0645 3.48168 13.023 4.71945 12.4301 5.66263C11.8046 4.92992 10.9523 4.46839 10.0447 4.31762L10.7691 3.86494L10.2392 3.0169L5.15088 6.19641L5.6808 7.04446L7.80091 5.71967C9.206 4.84167 11.0568 5.26899 11.9348 6.67408C12.8128 8.07918 12.3855 9.92999 10.9804 10.808L6.7402 13.4576C5.33511 14.3356 3.4843 13.9083 2.6063 12.5032C1.97665 11.4955 2.01814 10.2578 2.61103 9.31458C3.23653 10.0473 4.08885 10.5088 4.99651 10.6596L4.27222 11.1122L4.80214 11.9602L9.89043 8.78071L9.36051 7.93267L7.24023 9.25756C5.83514 10.1356 3.98429 9.70821 3.10629 8.30312C2.2283 6.89803 2.65559 5.04722 4.06068 4.16922L8.30092 1.51962Z" fill="currentColor"/>
+</svg>

ng-app/src/lib/icons/TsIcon.svelte

@@ -0,0 +1,3 @@
+<svg  viewBox="0 0 16 16" fill="none" width="24" height="24" tabindex="-1" class={$$props.class || ''} style={$$props.style || ''} xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="nonzero" clip-rule="nonzero" d="M0 1.75C0 0.783501 0.783502 0 1.75 0H14.25C15.2165 0 16 0.783502 16 1.75V3.75C16 4.16421 15.6642 4.5 15.25 4.5C14.8358 4.5 14.5 4.16421 14.5 3.75V1.75C14.5 1.61193 14.3881 1.5 14.25 1.5H1.75C1.61193 1.5 1.5 1.61193 1.5 1.75V14.25C1.5 14.3881 1.61193 14.5 1.75 14.5H15.25C15.6642 14.5 16 14.8358 16 15.25C16 15.6642 15.6642 16 15.25 16H1.75C0.783501 16 0 15.2165 0 14.25V1.75ZM4.75 6.5C4.75 6.08579 5.08579 5.75 5.5 5.75H9.25C9.66421 5.75 10 6.08579 10 6.5C10 6.91421 9.66421 7.25 9.25 7.25H8.25V12.5C8.25 12.9142 7.91421 13.25 7.5 13.25C7.08579 13.25 6.75 12.9142 6.75 12.5V7.25H5.5C5.08579 7.25 4.75 6.91421 4.75 6.5ZM11.2757 6.58011C11.6944 6.08164 12.3507 5.75 13.25 5.75C14.0849 5.75 14.7148 6.03567 15.1394 6.48481C15.4239 6.78583 15.4105 7.26052 15.1095 7.54505C14.8085 7.82958 14.3338 7.81621 14.0493 7.51519C13.9394 7.39898 13.7204 7.25 13.25 7.25C12.7493 7.25 12.5306 7.41836 12.4243 7.54489C12.2934 7.70065 12.25 7.896 12.25 8C12.25 8.104 12.2934 8.29935 12.4243 8.45511C12.5306 8.58164 12.7493 8.75 13.25 8.75C13.3257 8.75 13.3988 8.76121 13.4676 8.78207C14.1307 8.87646 14.6319 9.17251 14.9743 9.58011C15.3684 10.0493 15.5 10.604 15.5 11C15.5 11.396 15.3684 11.9507 14.9743 12.4199C14.5556 12.9184 13.8993 13.25 13 13.25C12.1651 13.25 11.5352 12.9643 11.1106 12.5152C10.8261 12.2142 10.8395 11.7395 11.1405 11.4549C11.4415 11.1704 11.9162 11.1838 12.2007 11.4848C12.3106 11.601 12.5296 11.75 13 11.75C13.5007 11.75 13.7194 11.5816 13.8257 11.4551C13.9566 11.2993 14 11.104 14 11C14 10.896 13.9566 10.7007 13.8257 10.5449C13.7194 10.4184 13.5007 10.25 13 10.25C12.9243 10.25 12.8512 10.2388 12.7824 10.2179C12.1193 10.1235 11.6181 9.82749 11.2757 9.41989C10.8816 8.95065 10.75 8.396 10.75 8C10.75 7.604 10.8816 7.04935 11.2757 6.58011Z" fill="currentColor" fill-opacity="0.80"/>
+</svg>

ng-app/src/lib/icons/TurtleIcon.svelte

@@ -0,0 +1,35 @@
+<svg  fill="currentColor" width="24" height="24" tabindex="-1" class={$$props.class || ''} style={$$props.style || ''} viewBox="0 0 493.249 493.249" xmlns="http://www.w3.org/2000/svg">
+    <path d="M463.007,168.49c0-28.703-33.46-51.188-76.174-51.188c-18.346,0-35.576,4.216-49.249,11.953
+	c-13.401-9.919-28.469-17.705-44.7-22.856c6.058-13.7,9.44-29.27,9.44-44.106C302.323,19.261,274.349,0,246.625,0
+	s-55.699,19.261-55.699,62.292c0,14.836,3.383,30.406,9.44,44.106c-16.231,5.152-31.299,12.938-44.7,22.857
+	c-13.674-7.737-30.904-11.954-49.249-11.954c-42.715,0-76.175,22.484-76.175,51.188c0,13.253,10.782,22.164,32.047,26.485
+	c12.216,2.482,27.183,3.384,40.87,3.714c-6.298,16.744-9.754,34.868-9.754,53.787c0,24.754,5.938,52.82,16.436,80.015
+	c-8.104,2.426-16.193,5.903-23.818,10.306c-17.027,9.83-30.687,23.381-38.463,38.157c-8.446,16.049-9.126,31.767-1.913,44.26
+	c2.842,4.922,7.37,8.331,13.094,9.856c2.395,0.638,4.977,0.941,7.73,0.941c19.806,0,48.526-15.642,80.912-34.457
+	c0.346-0.201,0.679-0.394,1.021-0.593c26.628,33.774,57.808,53.408,89.722,56.382v27.408c0,4.694,3.806,8.5,8.5,8.5
+	c4.694,0,8.5-3.806,8.5-8.5v-27.408c31.914-2.974,63.094-22.607,89.721-56.382c0.343,0.199,0.677,0.393,1.023,0.594
+	c32.387,18.815,61.104,34.456,80.91,34.456c2.752,0,5.336-0.302,7.73-0.94c5.724-1.525,10.252-4.934,13.094-9.856
+	c14.351-24.858-3.385-61.06-40.376-82.416c-7.626-4.403-15.715-7.88-23.818-10.307c10.497-27.194,16.435-55.26,16.435-80.015
+	c0-18.919-3.456-37.042-9.754-53.787c13.688-0.331,28.653-1.232,40.87-3.714C452.225,190.654,463.007,181.743,463.007,168.49z
+	 M382.844,252.476c0,3.003-0.11,6.077-0.306,9.2h-63.661l-29.605-51.278l53.91-53.91
+	C367.681,181.13,382.844,215.064,382.844,252.476z M341.784,376.22l-50.758-50.758l27.012-46.786h62.58
+	C375.449,310.854,361.534,346.538,341.784,376.22z M112.518,277.981h62.293l27.413,47.479l-50.759,50.759
+	C131.574,346.325,117.597,310.34,112.518,277.981z M110.405,252.476c0-36.355,14.316-69.428,37.606-93.881l54.442,54.442
+	l-27.681,47.944h-64.103C110.501,258.098,110.405,255.256,110.405,252.476z M246.625,116.256c31.587,0,60.696,10.81,83.827,28.92
+	l-57.812,57.813h-56.193l-55.958-55.959C183.976,127.807,213.976,116.256,246.625,116.256z M218.07,318.907l-28.556-49.459
+	l28.556-49.459h57.11l28.555,49.459l-28.555,49.459H218.07z M207.926,62.292c0-27.938,14.829-45.292,38.699-45.292
+	s38.698,17.355,38.698,45.292c0,13.275-3.384,27.74-9.191,39.826c-9.552-1.871-19.415-2.862-29.507-2.862
+	c-10.092,0-19.955,0.991-29.507,2.862C211.31,90.031,207.926,75.567,207.926,62.292z M65.674,178.315
+	c-11.542-2.345-18.432-6.018-18.432-9.825c0-18.532,27.099-34.188,59.175-34.188c12.666,0,24.903,2.444,35.035,6.858
+	c-12.375,11.699-22.804,25.432-30.752,40.66C96.007,181.647,78.785,180.979,65.674,178.315z M66.876,419.08
+	c-1.383,0-2.644-0.141-3.758-0.438c-1.699-0.453-2.325-1.195-2.749-1.929c-4.19-7.256-3.397-17.145,2.234-27.842
+	c6.301-11.972,17.636-23.105,31.92-31.352c7.061-4.077,14.547-7.218,21.969-9.265c5.949,12.995,12.908,25.592,20.732,37.305
+	c0.361,0.541,0.729,1.065,1.092,1.6C117.117,399.474,83.236,419.082,66.876,419.08z M246.625,440.753
+	c-32.18,0-61.76-20.875-85.077-50.575l54.271-54.271h61.611l54.272,54.271C308.385,419.878,278.805,440.753,246.625,440.753z
+	 M398.727,357.519c27.779,16.038,43.419,43.145,34.154,59.194c-0.424,0.734-1.051,1.477-2.749,1.929
+	c-14.29,3.806-52.207-18.127-75.199-31.483c0.363-0.536,0.731-1.059,1.092-1.6c7.824-11.712,14.783-24.31,20.732-37.305
+	C384.179,350.3,391.666,353.442,398.727,357.519z M382.549,181.82c-7.948-15.228-18.376-28.962-30.752-40.66
+	c10.132-4.414,22.37-6.858,35.036-6.858c32.076,0,59.174,15.656,59.174,34.188c0,3.808-6.89,7.48-18.432,9.825
+	C414.464,180.979,397.242,181.647,382.549,181.82z"/>
+
+</svg>

ng-app/src/lib/icons/TxtIcon.svelte

@@ -0,0 +1,5 @@
+<svg  fill="currentColor" width="24" height="24" tabindex="-1" class={$$props.class || ''} style={$$props.style || ''} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <polygon points="21 11 24 11 24 23 26 23 26 11 29 11 29 9 21 9 21 11"/>
+    <polygon points="20 9 18 9 16 15 14 9 12 9 14.75 16 12 23 14 23 16 17 18 23 20 23 17.25 16 20 9"/>
+    <polygon points="3 11 6 11 6 23 8 23 8 11 11 11 11 9 3 9 3 11"/>
+</svg>

ng-app/src/lib/icons/ZeraIcon.svelte

@@ -70,17 +70,25 @@
     CloudArrowDown,
     Beaker,
     Eye,
+    Square3Stack3d,
+    QueueList,
   } from "svelte-heros-v2";
+  import JsonIcon from "./JsonIcon.svelte";
+  import JsonLdIcon from "./JsonLdIcon.svelte";
+  import RdfIcon from "./RdfIcon.svelte";
+  import TurtleIcon from "./TurtleIcon.svelte";
 
   export let config = {};
   export let zera: string;
 
   const exact_mapping = {
-    json_ld_editor: TableCells,
+    json_ld_editor: JsonLdIcon,
-    json_editor: TableCells,
+    json_editor: JsonIcon,
-    triple_editor: Share,
+    triple_editor: RdfIcon,
+    turtle_viewer: TurtleIcon,
     rdf_viewer: CircleStack,
     graph_viewer: Sun,
+    compose: QueueList,
     sparql_query: RocketLaunch,
     sparnatural: CursorArrowRays,
     graphql: Cube,
@@ -92,6 +100,7 @@
     source: CodeBracket,
     post: DocumentText,
     pad: Square2Stack,
+    container: Square3Stack3d,
     card: Clipboard,
     gallery: RectangleStack,
     load_graph: CloudArrowUp,

ng-app/src/lib/panes/History.svelte

@@ -29,7 +29,7 @@
       Icon,
       ShieldCheck,
     } from "svelte-heros-v2";
-    import BranchIcon from "../components/BranchIcon.svelte";
+    import BranchIcon from "../icons/BranchIcon.svelte";
 
     import { t } from "svelte-i18n";
     import { Button, Progressbar, Spinner, Alert } from "flowbite-svelte";

ng-app/src/locales/de.json

@@ -25,7 +25,6 @@
       "create_text_code": "Export: TextCode erstellen",
       "scan_qr.title": "Export: QR-Code scannen",
       "scan_qr.notes": "Scanne einen QR-Code vom Gerät, auf das du dich anmelden möchtest.",
-      "scan_qr.scan_btn": "QR-Code scannen",
       "scan_qr.scanner.title": "QR-Code Scannen für Wallet-Export",
       "scan_qr.scanner.loading": "QR-Scanner wird geladen",
       "scan_qr.syncing": "Wallet wird übertragen",
@@ -246,7 +245,6 @@
     "wallet_login_qr": {
       "title": "Wallet mit QR-Code importieren",
       "scan.description": "Um dein Wallet von einem anderen Gerät zu importieren, erzeuge dort einen Export-QR-Code. Gehe zum Erstellen zu<br /><span class=\"path\">Nutzerbereich > Wallet > Export: QR-Code erstellen</span>.",
-      "scan.button": "QR-Code scannen",
       "scan.modal.title": "Export-QR-Code scannen",
       "gen.description": "Um dein Wallet von einem anderen Gerät zu importieren, kannst du hier auf diesem Gerät einen Import-QR-Code generieren und ihn dann mit deinem anderen Gerät scannen. Gehe auf dem anderen Gerät zu<br /><span class=\"path\">Nutzerbereich > Wallet > Export: QR scannen</span>, um zu exportieren.",
       "gen.generated": "Scanne diesen QR-Code vom anderen Gerät aus.",
@@ -274,7 +272,8 @@
     "logout": "Abmelden",
     "login": "Anmelden",
     "start_over": "Neu beginnen",
-    "generate": "Generieren"
+    "generate": "Generieren",
+    "scan_qr": "QR-Code scannen"
   },
   "errors": {
     "an_error_occurred": "Ein Fehler ist aufgetreten",

ng-app/src/locales/en.json

@@ -11,6 +11,31 @@
     "private_store": "Private Store",
     "group_store": "Group Store",
     "dialog_store": "Dialog Store",
+    "rich": "Post or Article",
+    "markdown": "Markdown",
+    "text": "Plain Text",
+    "social": "Social",
+    "group": "Group",
+    "pro": "Pro",
+    "media": "Media",
+    "chart": "Chart",
+    "viz": "Vizualitation",
+    "diagram": "Diagram",
+    "other": "Other file formats",
+    "data": "Data",
+    "code": "Code",
+    "apps": "Apps",
+    "new_app": "Create a new App",
+    "record_reel": "Record Reel",
+    "record_voice": "Record Audio",
+    "take_picture": "Take a picture",
+    "select_class": "Select a type of document to create",
+    "destination": {
+      "mc": "Keep in Magic Carpet",
+      "stream": "Send in current Stream",
+      "dialog": "Send in Dialog",
+      "store": "Save in current Store"
+    },
     "not_found" : "Document not found",
     "not_found_details_online" : "The document could not be found locally on this device, nor on the broker.",
     "not_found_details_offline" : "The document could not be found locally on this device, and it seems like you are offline, so it could not be retrieved from any broker neither.<br/><br/>If you are opening this document for the first time on this device, you have to be online now so the document can be fetched.<br/><br/> We will try connecting and fetching it every 20 seconds.",
@@ -165,6 +190,10 @@
           "label": "Signature",
           "desc": "Obtain and verify the Signature of the Document to prove its authenticity. Or request a signature if there isn't any."
         },
+        "translations": {
+          "label": "Translations",
+          "desc": "Manage the translations of your document in order to offer it in multiple languages"
+        },
         "services": {
           "label": "Services",
           "desc": "See and invoke services available for this Document. Services can be read-only, or read-write"
@@ -230,7 +259,6 @@
       "scan_qr.no_camera": "If to the contrary, the other device does not have a camera, ",
       "scan_qr.other_has_camera": "If the other device where you want to import the Wallet, has a camera, then you can just click on the Back button and select <span class=\"path\">Generate QR to export</span>",
       "scan_qr.notes": "You will now scan the QR-Code that appears on the screen of the other device (the one you want to transfer your wallet to). You will be asked to allow the app to use your camera.",
-      "scan_qr.scan_btn": "Scan QR-Code ",
       "scan_qr.scanner.title": "Scan your QR-Code",
       "scan_qr.scanner.loading": "Loading scanner",
       "scan_qr.syncing": "Synchronizing wallet",
@@ -450,7 +478,6 @@
     "wallet_login_qr": {
       "title": "Import Wallet with QR-Code",
       "scan.description": "To import your wallet from another device, generate an export QR-Code there. On the other device, go to<br /><span class=\"path\">User Panel > Wallet > Generate QR</span> to export.",
-      "scan.button": "Scan QR-Code",
       "scan.modal.title": "Scan Wallet QR-Code",
       "gen.button": "Generate QR-Code",
       "gen.description": "To import your wallet from another device, you have to generate a QR-Code here on this device, and then scan it with your other device (the one where your wallet is located for now).<br/>If your other device does not have a camera, then you have to use another method for importing your wallet here.",
@@ -481,7 +508,8 @@
     "back_to_homepage": "Go back to Homepage",
     "logout": "Logout",
     "login": "Login",
-    "start_over": "Start over"
+    "start_over": "Start over",
+    "scan_qr": "Scan QR-Code"
   },
   "errors": {
     "an_error_occurred": "An error occurred",

ng-app/src/routes/AccountInfo.svelte

@@ -25,7 +25,7 @@
   import { active_session, active_wallet, connections, display_error } from "../store";
 
   import { default as ng } from "../api";
-  import DeviceIcon from "../lib/components/DeviceIcon.svelte";
+  import DeviceIcon from "../lib/icons/DeviceIcon.svelte";
 
   let error;
   let nonActiveClass =

ng-app/src/routes/WalletInfo.svelte

@@ -458,7 +458,7 @@
                       disabled={false || !$online}
                       class="w-full text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
                     >
-                      {$t("pages.wallet_info.scan_qr.scan_btn")}
+                      {$t("buttons.scan_qr")}
                     </Button>
                   </li>
                 {:else if scanner_state === "scanned"}

ng-app/src/routes/WalletLoginQr.svelte

@@ -199,7 +199,7 @@
                   tabindex="-1"
                   class="w-8 h-8 mr-2 -ml-1 transition duration-75 focus:outline-none  group-hover:text-gray-900 dark:group-hover:text-white"
                 />
-                {$t("pages.wallet_login_qr.scan.button")}
+                {$t("buttons.scan_qr")}
               </button>
             {:else if login_method === "gen" && gen_state === "before_start"}
               <!-- Generate QR Button -->

ng-app/src/store.ts

@@ -173,7 +173,6 @@ export const check_has_camera = async () => {
         has_camera = false;
       }
       else {
-        // If there is a camera, go to scan mode, else gen mode.
         try {
             const devices = await navigator.mediaDevices.enumerateDevices();
             has_camera =

ng-app/src/styles.css

@@ -35,22 +35,22 @@ td.hljs {
     width: 320px !important;
     height: 100%;
 }
-#menu-modal {
+.menu-modal {
     border-radius: 0;
 }
-#menu-modal div {
+.menu-modal div {
     padding: 0;
 }
-#menu-modal div.commit {
+.menu-modal div.commit {
     padding: 8px;
 }
-#menu-modal > button {
+.menu-modal > button {
     display: none;
 }
-#menu-modal li {
+.menu-modal li {
     margin: 5px;
 }
-#menu-modal li.submenu {
+.menu-modal li.submenu {
     padding-left: 30px;
 }
 .toggle * {
@@ -149,7 +149,7 @@ div[role="alert"] div {
     min-width: 320px;
 }
 
-li.clickable {
+.clickable {
     cursor: pointer;
 }
 

ng-app/src/tab.ts

@@ -195,6 +195,12 @@ export const update_branch_display = (cur_tab) => {
 
 export const show_modal_menu = writable(false);
 
+export const show_modal_create = writable(false);
+
+export const openModalCreate = () => {
+    show_modal_create.set(true);
+  }
+
 export const in_memory_graph = writable("");
 export const in_memory_discrete = writable("");
 
@@ -215,8 +221,15 @@ export const all_tabs = writable({
             store_type: "", //"public" "protected", "private", "group", "dialog",
             readcap: "", // "r:" readcap of main
             is_member: "", // "r:" readcap of store root branch
+            can_edit: true,
             inner: "", // "w:l:"
             
+            stream: { // only if not a Dialog
+                notif: 0,
+                last: "",
+                nuri: "",
+            },
+
             // comes from main branch of store
             title: "",
             icon: "",
@@ -272,11 +285,6 @@ export const all_tabs = writable({
             icon: "",
             description: "",
     
-            stream: { // only if is_store
-                notif: 0,
-                last: "",
-                nuri: "",
-            },
             live_editors: {
     
             },

ng-app/src/zeras.ts

@@ -129,7 +129,7 @@ export const official_apps = {
         "ng:n": "Turtle",
         "ng:a": "View the RDF Graph in Turtle format",
         "ng:c": "app", 
-        "ng:u": "rdf_viewer",//favicon. can be a did:ng:j 
+        "ng:u": "turtle_viewer",//favicon. can be a did:ng:j 
         "ng:g": "n:g:z:rdf_viewer:turtle",
         "ng:b": "TurtleViewer",
         "ng:o": ["data:graph"],
@@ -147,11 +147,11 @@ export const official_apps = {
     },
     "n:g:z:rdf_viewer:json_ld": { // highlight.js JSON
         "ng:n": "JSON-LD Source",
-        "ng:a": "View the RDF Graph in N3 format",
+        "ng:a": "View the RDF Graph in JSON-LD format",
         "ng:c": "app", 
-        "ng:u": "rdf_viewer",//favicon. can be a did:ng:j 
+        "ng:u": "source",//favicon. can be a did:ng:j 
         "ng:g": "n:g:z:rdf_viewer:json_ld",
-        "ng:b": "JsonLdViewer",
+        "ng:b": "JsonLdSourceViewer",
         "ng:o": ["data:graph"],
         "ng:w": [],
     },
@@ -326,6 +326,24 @@ export const official_apps = {
         "ng:o": ["post:md"],
         "ng:w": [],
     },
+    "n:g:z:compose:editor": {
+        "ng:n": "Composition Editor",
+        "ng:a": "Compose several blocks into a single document",
+        "ng:c": "app", 
+        "ng:u": "compose",//favicon. can be a did:ng:j 
+        "ng:g": "n:g:z:compose:editor",
+        "ng:b": "ComposeEditor",
+        "ng:w": ["doc:compose"],
+    },
+    "n:g:z:compose:viewer": {
+        "ng:n": "Composition",
+        "ng:a": "Composition of several blocks",
+        "ng:c": "app", 
+        "ng:u": "compose",//favicon. can be a did:ng:j 
+        "ng:g": "n:g:z:compose:viewer",
+        "ng:b": "ComposeViewer",
+        "ng:o": ["doc:compose"],
+    },
     "n:g:z:post:text": {
         "ng:n": "Text",
         "ng:a": "View a Text Post",
@@ -396,13 +414,13 @@ export const official_apps = {
         "ng:o": ["app:z"],
         "ng:w": ["app:z"],
     },
-    "n:g:z:list": {
+    "n:g:z:container": {
-        "ng:n": "List",
+        "ng:n": "Container",
-        "ng:a": "See the content of document as a list",
+        "ng:a": "See the content of document as a Container",
         "ng:c": "app", 
-        "ng:u": "list",//favicon. can be a did:ng:j 
+        "ng:u": "container",//favicon. can be a did:ng:j 
-        "ng:g": "n:g:z:list", 
+        "ng:g": "n:g:z:container", 
-        "ng:b": "ListView",
+        "ng:b": "ContainerView",
         "ng:o": ["data:collection","data:container"],
         "ng:w": ["data:collection","data:container"],
     },