@luna-park/design 1.0.0

package/eslint.config.js

@@ -0,0 +1,9 @@
+import lpConfigVue from "@luna-park/eslint-config/vue";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+    {
+        ignores: ["**/dist/*"]
+    },
+    ...lpConfigVue
+);

package/histoire.config.ts

@@ -0,0 +1,60 @@
+import { defineConfig } from "histoire";
+import { HstVue } from "@histoire/plugin-vue";
+
+export default defineConfig({
+    plugins: [
+        HstVue()
+    ],
+    setupFile: `/src/histoire.setup.ts`,
+    theme: {
+        title: "Rollercoaster",
+        colors: {
+            gray: {
+                100: "#ffffff",
+                200: "#e3e7f5",
+                300: "#b3bcd7",
+                400: "#7e8cb6",
+                50: "#ffffff",
+                500: "#54618a",
+                600: "#2b375a",
+                700: "#293451",
+                750: "#262e45",
+                800: "#232b41",
+                850: "#1e2533",
+                900: "#1e2533",
+                950: "#1e2533"
+            },
+            primary: {
+                100: "#b9dfff",
+                200: "#8dc9ff",
+                300: "#6dbcff",
+                400: "#47aaff",
+                50: "#ddefff",
+                500: "#2d9eff",
+                600: "#008cff",
+                700: "#008cff",
+                800: "#0072c9",
+                900: "#00529a"
+            }
+        },
+        favicon: "favicon_rc.png",
+        logo: {
+            dark: "/src/assets/logo_rc_color.svg",
+            square: "/src/assets/logo_rc_square_blue.svg"
+        }
+    },
+    tree: {
+        file: ({ path }) => {
+            const splitPath = path.split("/");
+            splitPath.shift();
+            splitPath.shift();
+            splitPath[splitPath.length - 1] = splitPath.at(-1).split(".")[0];
+            return splitPath;
+        }
+    },
+    vite: {
+        server: {
+            port: 1980
+        }
+    }
+});

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@luna-park/design",
+  "version": "1.0.0",
+  "private": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.umd.cjs",
+      "import": "./dist/index.js"
+    },
+    "./index.css": "./dist/index.css"
+  },
+  "main": "./dist/index.umd.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "dependencies": {
+    "@material/web": "^2.4.1",
+    "symbol-db": "^1.0.2"
+  },
+  "devDependencies": {
+    "@floating-ui/vue": "^1.1.9",
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/free-brands-svg-icons": "^7.1.0",
+    "@fortawesome/pro-regular-svg-icons": "^6.7.2",
+    "@fortawesome/pro-solid-svg-icons": "^6.7.2",
+    "@fortawesome/vue-fontawesome": "^3.1.3",
+    "@histoire/plugin-vue": "1.0.0-beta.1",
+    "@laynezh/vite-plugin-lib-assets": "^2.1.3",
+    "@luna-park/eslint-config": "^1.0.2",
+    "@types/node": "^25.0.10",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@vueuse/core": "^14.1.0",
+    "eslint": "^9.39.2",
+    "globals": "^17.1.0",
+    "histoire": "1.0.0-beta.1",
+    "pinia": "^3.0.4",
+    "rollup-plugin-visualizer": "^6.0.5",
+    "synth-color": "^1.1.5",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.54.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "4.5.4",
+    "vite-plugin-static-copy": "^3.1.6",
+    "vue": "^3.5.27",
+    "@luna-park/utils": "^2.0.0"
+  },
+  "peerDependencies": {
+    "@floating-ui/vue": "^0.2.0",
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/free-brands-svg-icons": "^6.2.0",
+    "@fortawesome/pro-regular-svg-icons": "^6.2.0",
+    "@fortawesome/pro-solid-svg-icons": "^6.2.0",
+    "@fortawesome/vue-fontawesome": "^3.0.2",
+    "@material/web": "^1.1.1",
+    "@vueuse/core": "^10.11.0",
+    "pinia": "^3.0.2",
+    "symbol-db": "^1.0.1",
+    "synth-color": "^1.1.2",
+    "uuid": "^9.0.0",
+    "vue": "^3.5.13",
+    "@luna-park/search": "^1.0.0",
+    "@luna-park/utils": "^2.0.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build:story": "histoire build",
+    "dev": "vite build --watch",
+    "dev:story": "histoire dev"
+  }
+}

package/src/app.ts

@@ -0,0 +1,9 @@
+import { App } from "vue";
+import { createPinia } from "pinia";
+
+export function initApp(app: App) {
+    const pinia = createPinia();
+    app.use(pinia);
+
+    return { pinia };
+}

package/src/assets/controls/mouse.svg

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 15 19"
+     style="enable-background:new 0 0 15 19;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:currentColor;}
+</style>
+    <path id="mouse" class="st0" d="M7.5,3C3,3,3,5.5,3,8.5c0,1.8,0.3,3.5,0.9,4.8C4.7,15.1,6,16,7.5,16c3.1,0,4.5-3.8,4.5-7.5C12,5.5,12,3,7.5,3z
+	 M8,4.3C8,4.1,8.1,4,8.3,4c2.2,0.2,2.6,1.2,2.7,3H9.2C9.1,7,9,6.9,9,6.8V6.5c0-0.6-0.3-1.1-0.9-1.4C8.1,5.1,8,5,8,4.9V4.3z M7.5,6
+	C7.8,6,8,6.2,8,6.5v2C8,8.8,7.8,9,7.5,9S7,8.8,7,8.5v-2C7,6.2,7.2,6,7.5,6z M6.7,4C6.9,4,7,4.1,7,4.3v0.6C7,5,6.9,5.1,6.9,5.1
+	C6.3,5.4,6,5.9,6,6.5v0.2C6,6.9,5.9,7,5.8,7H4.3C4.1,7,4,6.9,4,6.7C4.2,5.1,4.7,4.2,6.7,4z M11,8.5c0,1.6-0.3,3.3-0.8,4.4
+	C9.5,14.3,8.6,15,7.5,15C4.7,15,4,10.9,4,8.5V8.2C4,8.1,4.1,8,4.2,8h1.5C5.9,8,6,8.1,6,8.2v0.2C6,9.2,6.6,9.9,7.4,10
+	C8.2,10.1,9,9.4,9,8.5V8.2C9,8.1,9.1,8,9.2,8h1.5C10.9,8,11,8.1,11,8.2V8.5z"/>
+    <g id="right">
+        <path class="st1" d="M11,7H9.2C9.1,7,9,6.9,9,6.8V6.5c0-0.6-0.3-1.1-0.9-1.4C8.1,5.1,8,5,8,4.9V4.3C8,4.1,8.1,4,8.3,4
+	C10.5,4.2,10.9,5.2,11,7z"/>
+        <path class="st1" d="M10.5,1.5C10.2,1.5,10,1.7,10,2c0,0.2,0.1,0.4,0.3,0.5c0.9,0.4,1.6,0.9,2,1.7c0.1,0.2,0.2,0.3,0.2,0.5
+		C12.6,4.9,12.8,5,13,5h0c0.3,0,0.6-0.4,0.5-0.7c-0.1-0.2-0.2-0.4-0.3-0.7c-0.6-1-1.4-1.7-2.5-2.1C10.6,1.5,10.6,1.5,10.5,1.5
+		L10.5,1.5z"/>
+    </g>
+    <path id="double-right" class="st1" d="M12,0.8L12,0.8c0,0.2,0.1,0.3,0.2,0.4c0.6,0.4,1.2,0.9,1.6,1.6C13.9,2.9,14.1,3,14.2,3h0c0.4,0,0.6-0.4,0.4-0.8
+	c-0.5-0.8-1.2-1.4-1.9-1.9C12.4,0.1,12,0.4,12,0.8z"/>
+    <g id="left">
+        <path class="st1" d="M7,4.3v0.6C7,5,6.9,5.1,6.9,5.1C6.3,5.4,6,5.9,6,6.5v0.2C6,6.9,5.9,7,5.8,7H4.3C4.1,7,4,6.9,4,6.7
+	C4.2,5.1,4.7,4.2,6.7,4C6.9,4,7,4.1,7,4.3z"/>
+        <path class="st1" d="M4.5,1.5c-0.1,0-0.1,0-0.2,0C3.2,2,2.4,2.7,1.8,3.7C1.7,3.9,1.6,4.1,1.5,4.3C1.4,4.6,1.6,5,2,5h0
+		c0.2,0,0.4-0.1,0.5-0.3c0.1-0.2,0.2-0.4,0.2-0.5c0.4-0.8,1.1-1.3,2-1.7C4.9,2.4,5,2.2,5,2C5,1.7,4.8,1.5,4.5,1.5L4.5,1.5z"/>
+    </g>
+    <path id="double-left" class="st1" d="M3,0.8L3,0.8C3,1,2.9,1.1,2.8,1.2C2.1,1.6,1.6,2.2,1.2,2.8C1.1,2.9,0.9,3,0.8,3h0C0.4,3,0.1,2.6,0.4,2.2
+	c0.5-0.8,1.2-1.4,1.9-1.9C2.6,0.1,3,0.4,3,0.8z"/>
+    <g id="move">
+    <path class="st1" d="M13.3,8.2c-0.1,0-0.3,0.1-0.3,0.3v2c0,0.1,0.1,0.3,0.3,0.3c0.1,0,0.1,0,0.1-0.1l1.3-1c0.1-0.1,0.1-0.3,0-0.4
+        l-1.3-1C13.4,8.3,13.3,8.2,13.3,8.2L13.3,8.2z"/>
+        <path class="st1" d="M7.5,0.2c-0.1,0-0.2,0-0.2,0.1l-1,1.3C6.2,1.8,6.3,2,6.5,2h2c0.2,0,0.3-0.2,0.2-0.4l-1-1.3
+        C7.6,0.2,7.6,0.2,7.5,0.2L7.5,0.2z"/>
+        <path class="st1" d="M1.7,8.2c-0.1,0-0.1,0-0.1,0.1l-1.3,1c-0.1,0.1-0.1,0.3,0,0.4l1.3,1c0,0,0.1,0.1,0.1,0.1
+        c0.1,0,0.3-0.1,0.3-0.3v-2C2,8.4,1.9,8.2,1.7,8.2L1.7,8.2z"/>
+        <path class="st1" d="M8.5,17h-2c-0.2,0-0.3,0.2-0.2,0.4l1,1.3c0,0.1,0.1,0.1,0.2,0.1s0.2,0,0.2-0.1l1-1.3C8.8,17.2,8.7,17,8.5,17
+        L8.5,17z"/>
+    </g>
+    <path id="mouse-scroll" class="st0" d="M9.7,3.3c0.1,0.3,0.1,0.7,0,1c0,0,0,0,0,0c1,0.4,1.3,1.3,1.4,2.7H9.2C9.1,7,9,6.9,9,6.8V6.5
+c0-0.6-0.3-1.1-0.9-1.4C8.1,5.1,8,5.1,8,5H7c0,0.1-0.1,0.1-0.1,0.1C6.3,5.4,6,5.9,6,6.5v0.2C6,6.9,5.9,7,5.8,7H4.3
+C4.1,7,4,6.9,4,6.7c0.1-1.2,0.4-2,1.3-2.4c0,0,0,0,0,0c-0.2-0.3-0.2-0.7,0-1C3,4,3,6.1,3,8.5c0,1.8,0.3,3.5,0.9,4.8
+C4.7,15.1,6,16,7.5,16c3.1,0,4.5-3.8,4.5-7.5C12,6.1,12,4,9.7,3.3z M7,6.5C7,6.2,7.2,6,7.5,6S8,6.2,8,6.5v2C8,8.8,7.8,9,7.5,9
+S7,8.8,7,8.5V6.5z M11,8.5c0,1.6-0.3,3.3-0.8,4.4C9.5,14.3,8.6,15,7.5,15C4.7,15,4,10.9,4,8.5V8.2C4,8.1,4.1,8,4.2,8h1.5
+C5.9,8,6,8.1,6,8.2v0.2C6,9.2,6.6,9.9,7.4,10C8.2,10.1,9,9.4,9,8.5V8.2C9,8.1,9.1,8,9.2,8h1.5C10.9,8,11,8.1,11,8.2V8.5z"/>
+    <path id="scroll" class="st1" d="M8,6.5v2C8,8.8,7.8,9,7.5,9S7,8.8,7,8.5v-2C7,6.2,7.2,6,7.5,6S8,6.2,8,6.5z"/>
+    <g id="scroll-arrow">
+    <path class="st1" d="M8.5,11h-2c-0.2,0-0.3,0.2-0.2,0.4l1,1.3c0,0.1,0.1,0.1,0.2,0.1s0.2,0,0.2-0.1l1-1.3C8.8,11.2,8.7,11,8.5,11
+    L8.5,11z"/>
+        <path class="st1" d="M7.5,2.2c-0.1,0-0.2,0-0.2,0.1l-1,1.3C6.2,3.8,6.3,4,6.5,4h2c0.2,0,0.3-0.2,0.2-0.4l-1-1.3
+    C7.6,2.2,7.6,2.2,7.5,2.2L7.5,2.2z"/>
+</g>
+</svg>

package/src/assets/logo_neon.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 320 320" style="enable-background:new 0 0 320 320;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FFFFFF;stroke-width:8;stroke-miterlimit:10;}
+</style>
+<g>
+	<path class="st0" d="M300.9,150c0.4,6.7-7.4,10.2-12,5.7l-62.2-62.5c-36.7-36.7-96.4-36.7-133.1,0l-62.5,62.5
+		c-4.6,4.6-12.4,1.1-12-5.7c2.5-35.7,18.4-70.6,48-96.4c53-46.3,133.1-46.3,186.1,0C282.5,79.3,298.4,114.3,300.9,150z"/>
+	<path class="st0" d="M89.4,181.1v88.3c0,5.7-6.4,9.2-11.3,5.7c-6.4-4.6-12.4-9.5-18-15.2c-10.2-10.2-18.7-21.9-25.4-34.3
+		c-1.4-2.8-0.7-6,1.4-8.1l41.3-41.3C81.6,171.5,89.4,174.7,89.4,181.1z"/>
+	<path class="st0" d="M183.7,123.5V293c0,3.5-2.8,6.7-6.4,7.1c-11.3,1.4-23,1.4-34.3,0c-3.5-0.4-6.4-3.5-6.4-7.1V123.5
+		c0-2.8,1.8-5.3,4.2-6.4c12.4-5.7,26.5-5.7,38.5,0C181.9,118.2,183.7,120.7,183.7,123.5z"/>
+	<path class="st0" d="M284,217.1c2.1,2.1,2.8,5.3,1.4,8.1c-6.4,12.4-14.8,24-25.4,34.3c-5.7,5.7-11.7,10.9-18,15.2
+		c-4.6,3.2-11.3,0-11.3-5.7v-87.9c0-6.4,7.8-9.5,12-4.9L284,217.1z"/>
+</g>
+</svg>

package/src/assets/logo_rc_color.svg

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1000 200" style="enable-background:new 0 0 1000 200;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#008CFF;}
+</style>
+<path class="st0" d="M382.1,126.5v12c0,1.1-0.9,2-2,2h-22c-13.3,0-24-10.7-24-24v-54c0-1.1,0.9-2,2-2h12c1.1,0,2,0.9,2,2v54
+	c0,4.4,3.6,8,8,8h22C381.3,124.5,382.1,125.4,382.1,126.5z"/>
+<path class="st0" d="M322.1,126.5v12c0,1.1-0.9,2-2,2h-22c-13.3,0-24-10.7-24-24v-54c0-1.1,0.9-2,2-2h12c1.1,0,2,0.9,2,2v54
+	c0,4.4,3.6,8,8,8h22C321.3,124.5,322.1,125.4,322.1,126.5z"/>
+<path class="st0" d="M410.1,78.5v12c0,1.1,0.9,2,2,2h28c1.1,0,2,0.9,2,2v12c0,1.1-0.9,2-2,2h-28c-1.1,0-2,0.9-2,2v6c0,4.4,3.6,8,8,8
+	h22c1.1,0,2,0.9,2,2v12c0,1.1-0.9,2-2,2h-22c-13.3,0-24-10.7-24-24v-54c0-1.1,0.9-2,2-2h44c1.1,0,2,0.9,2,2v12c0,1.1-0.9,2-2,2h-28
+	C411,76.5,410.1,77.4,410.1,78.5z"/>
+<path class="st0" d="M234.1,60.5c-13.2,0-24,10.7-24,24v32c0,13.2,10.8,24,24,24s24-10.8,24-24v-32
+	C258.1,71.2,247.4,60.5,234.1,60.5z M234.1,124.5c-4.4,0-8-3.6-8-8v-32c0-4.4,3.6-8,8-8s8,3.6,8,8v32
+	C242.1,120.9,238.6,124.5,234.1,124.5z"/>
+<path class="st0" d="M498.7,103.2l7,35c0.2,1.2-0.7,2.4-2,2.4h-11.9c-1,0-1.8-0.7-2-1.6l-5.8-28.9c-0.2-0.9-1-1.5-1.9-1.5
+	c0,0,0,0,0,0h-6c-1.1,0-2,0.9-2,2v28c0,1.1-0.9,2-2,2h-12c-1.1,0-2-0.9-2-2v-44c0-1.1,0.9-2,2-2l21.7,0c4.3,0,8-3.2,8.3-7.5
+	c0.3-4.7-3.4-8.5-8-8.5h-22c-1.1,0-2-0.9-2-2v-12c0-1.1,0.9-2,2-2l21.4,0c13.4,0,24.6,10.7,24.6,24.1c0,6.5-2.7,12.4-6.9,16.8
+	C498.8,101.8,498.5,102.5,498.7,103.2z"/>
+<path class="st0" d="M186.7,103.2l7,35c0.2,1.2-0.7,2.4-2,2.4h-11.9c-1,0-1.8-0.7-2-1.6l-5.8-28.9c-0.2-0.9-1-1.5-1.9-1.5
+	c0,0,0,0,0,0h-6c-1.1,0-2,0.9-2,2v28c0,1.1-0.9,2-2,2h-12c-1.1,0-2-0.9-2-2v-44c0-1.1,0.9-2,2-2l21.7,0c4.3,0,8-3.2,8.3-7.5
+	c0.3-4.7-3.4-8.5-8-8.5h-22c-1.1,0-2-0.9-2-2v-12c0-1.1,0.9-2,2-2l21.4,0c13.4,0,24.6,10.7,24.6,24.1c0,6.5-2.7,12.4-6.9,16.8
+	C186.8,101.8,186.5,102.5,186.7,103.2z"/>
+<path class="st0" d="M546.1,116.5c0,8.8,7.2,16,16,16h22c1.1,0,2,0.9,2,2v4c0,1.1-0.9,2-2,2h-22c-13.3,0-24-10.7-24-24v-32
+	c0-13.3,10.7-24,24-24h22c1.1,0,2,0.9,2,2v4c0,1.1-0.9,2-2,2h-22c-8.8,0-16,7.2-16,16V116.5z"/>
+<path class="st0" d="M626.1,60.5c-13.2,0-24,10.7-24,24v32c0,13.2,10.8,24,24,24s24-10.8,24-24v-32
+	C650.1,71.2,639.4,60.5,626.1,60.5z M642.1,116.5c0,8.8-7.2,16-16,16s-16-7.2-16-16v-32c0-8.8,7.2-16,16-16s16,7.2,16,16V116.5z"/>
+<path class="st0" d="M838.1,62.5v4c0,1.1-0.9,2-2,2h-16c-1.1,0-2,0.9-2,2v68c0,1.1-0.9,2-2,2h-4c-1.1,0-2-0.9-2-2v-68
+	c0-1.1-0.9-2-2-2h-16c-1.1,0-2-0.9-2-2v-4c0-1.1,0.9-2,2-2h44C837.3,60.5,838.1,61.4,838.1,62.5z"/>
+<path class="st0" d="M958.7,103.2l7,35c0.2,1.2-0.7,2.4-2,2.4h-3.9c-1,0-1.8-0.7-2-1.6l-6-30c-0.2-1.2-1.4-1.9-2.6-1.5
+	c-2.2,0.7-4.6,1.1-7.1,1.1h-14c-1.1,0-2,0.9-2,2v28c0,1.1-0.9,2-2,2h-4c-1.1,0-2-0.9-2-2v-36c0-1.1,0.9-2,2-2h21.6
+	c8.6,0,16-6.6,16.4-15.2c0.4-9.2-6.9-16.8-16-16.8h-22c-1.1,0-2-0.9-2-2v-4c0-1.1,0.9-2,2-2l21.4,0c13.2,0,24.6,10.8,24.6,24.1
+	c0,6.5-2.7,12.4-6.9,16.8C958.8,101.8,958.5,102.5,958.7,103.2z"/>
+<path class="st0" d="M707.3,140.5h-3.9c-1,0-1.8-0.7-2-1.6l-11.7-58.6c-0.4-2.1-3.5-2.1-3.9,0L674,138.9c-0.2,0.9-1,1.6-2,1.6h-3.9
+	c-1.3,0-2.2-1.2-2-2.4l15.2-76c0.2-0.9,1-1.6,2-1.6h8.7c1,0,1.8,0.7,2,1.6l15.2,76C709.5,139.3,708.5,140.5,707.3,140.5z"/>
+<path class="st0" d="M734.2,83.2c0.4,7.5,6.8,13.3,14.4,13.3h3.6c3.8,0,7.3,0.9,10.4,2.6c7,3.8,11.7,11.2,11.6,19.7
+	c-0.2,12.1-10.4,21.6-22.5,21.6h-23.5c-1.1,0-2-0.9-2-2v-4c0-1.1,0.9-2,2-2h23.6c7.5,0,14-5.8,14.4-13.3c0.4-8-6-14.7-14-14.7h-4
+	c-3.8,0-7.3-0.9-10.4-2.6c-7-3.8-11.7-11.2-11.6-19.7c0.2-12.1,10.4-21.6,22.5-21.6l23.5,0c1.1,0,2,0.9,2,2v4c0,1.1-0.9,2-2,2h-24
+	C740.2,68.5,733.8,75.1,734.2,83.2z"/>
+<path class="st0" d="M862.1,70.5v24c0,1.1,0.9,2,2,2h36c1.1,0,2,0.9,2,2v4c0,1.1-0.9,2-2,2h-36c-1.1,0-2,0.9-2,2v10
+	c0,8.8,7.2,16,16,16h22c1.1,0,2,0.9,2,2v4c0,1.1-0.9,2-2,2h-22c-13.3,0-24-10.7-24-24v-54c0-1.1,0.9-2,2-2h44c1.1,0,2,0.9,2,2v4
+	c0,1.1-0.9,2-2,2h-36C863,68.5,862.1,69.4,862.1,70.5z"/>
+<g>
+	<circle class="st1" cx="74.8" cy="100.5" r="13.3"/>
+	<path class="st1" d="M104.6,127.2c-7.3,8.2-18,13.3-29.8,13.3s-22.5-5.1-29.8-13.3H104.6z"/>
+	<path class="st1" d="M114.8,100.5c0,4.7-0.8,9.2-2.3,13.3H97.9c2.3-3.9,3.6-8.5,3.6-13.3c0-14.7-11.9-26.7-26.7-26.7
+		s-26.7,11.9-26.7,26.7c0,4.9,1.3,9.4,3.6,13.3H37.1c-1.5-4.2-2.3-8.7-2.3-13.3c0-22.1,17.9-40,40-40S114.8,78.4,114.8,100.5z"/>
+	<circle class="st1" cx="74.8" cy="100.5" r="13.3"/>
+	<circle class="st1" cx="74.8" cy="100.5" r="13.3"/>
+</g>
+</svg>

package/src/assets/logo_rc_square_blue.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#008CFF;}
+</style>
+<g>
+	<circle class="st0" cx="50.5" cy="50.5" r="13.3"/>
+	<path class="st0" d="M80.3,77.2c-7.3,8.2-18,13.3-29.8,13.3S28,85.4,20.7,77.2H80.3z"/>
+	<path class="st0" d="M90.5,50.5c0,4.7-0.8,9.2-2.3,13.3H73.6c2.3-3.9,3.6-8.5,3.6-13.3c0-14.7-11.9-26.7-26.7-26.7
+		S23.8,35.8,23.8,50.5c0,4.9,1.3,9.4,3.6,13.3H12.8c-1.5-4.2-2.3-8.7-2.3-13.3c0-22.1,17.9-40,40-40S90.5,28.4,90.5,50.5z"/>
+	<circle class="st0" cx="50.5" cy="50.5" r="13.3"/>
+	<circle class="st0" cx="50.5" cy="50.5" r="13.3"/>
+</g>
+</svg>

package/src/assets/logo_square_blue.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#2E79F5;}
+</style>
+	<g>
+	<path class="st0" d="M89.9,47.2c0.1,1.9-2.1,2.9-3.4,1.6L68.9,31.1c-10.4-10.4-27.3-10.4-37.7,0L13.5,48.8
+		c-1.3,1.3-3.5,0.3-3.4-1.6c0.7-10.1,5.2-20,13.6-27.3c15-13.1,37.7-13.1,52.7,0C84.7,27.2,89.2,37.1,89.9,47.2z"/>
+		<path class="st0" d="M30,56v25c0,1.6-1.8,2.6-3.2,1.6c-1.8-1.3-3.5-2.7-5.1-4.3c-2.9-2.9-5.3-6.2-7.2-9.7c-0.4-0.8-0.2-1.7,0.4-2.3
+		l11.7-11.7C27.8,53.3,30,54.2,30,56z"/>
+		<path class="st0" d="M56.7,39.7v48c0,1-0.8,1.9-1.8,2c-3.2,0.4-6.5,0.4-9.7,0c-1-0.1-1.8-1-1.8-2v-48c0-0.8,0.5-1.5,1.2-1.8
+		c3.5-1.6,7.5-1.6,10.9,0C56.2,38.2,56.7,38.9,56.7,39.7z"/>
+		<path class="st0" d="M85.1,66.2c0.6,0.6,0.8,1.5,0.4,2.3c-1.8,3.5-4.2,6.8-7.2,9.7c-1.6,1.6-3.3,3.1-5.1,4.3
+		c-1.3,0.9-3.2,0-3.2-1.6V56c0-1.8,2.2-2.7,3.4-1.4L85.1,66.2z"/>
+</g>
+</svg>

package/src/assets/logo_square_white.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+	<g>
+	<path class="st0" d="M89.9,47.2c0.1,1.9-2.1,2.9-3.4,1.6L68.9,31.1c-10.4-10.4-27.3-10.4-37.7,0L13.5,48.8
+		c-1.3,1.3-3.5,0.3-3.4-1.6c0.7-10.1,5.2-20,13.6-27.3c15-13.1,37.7-13.1,52.7,0C84.7,27.2,89.2,37.1,89.9,47.2z"/>
+		<path class="st0" d="M30,56v25c0,1.6-1.8,2.6-3.2,1.6c-1.8-1.3-3.5-2.7-5.1-4.3c-2.9-2.9-5.3-6.2-7.2-9.7c-0.4-0.8-0.2-1.7,0.4-2.3
+		l11.7-11.7C27.8,53.3,30,54.2,30,56z"/>
+		<path class="st0" d="M56.7,39.7v48c0,1-0.8,1.9-1.8,2c-3.2,0.4-6.5,0.4-9.7,0c-1-0.1-1.8-1-1.8-2v-48c0-0.8,0.5-1.5,1.2-1.8
+		c3.5-1.6,7.5-1.6,10.9,0C56.2,38.2,56.7,38.9,56.7,39.7z"/>
+		<path class="st0" d="M85.1,66.2c0.6,0.6,0.8,1.5,0.4,2.3c-1.8,3.5-4.2,6.8-7.2,9.7c-1.6,1.6-3.3,3.1-5.1,4.3
+		c-1.3,0.9-3.2,0-3.2-1.6V56c0-1.8,2.2-2.7,3.4-1.4L85.1,66.2z"/>
+</g>
+</svg>

package/src/assets/logo_text_white.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 483.2 79.9" style="enable-background:new 0 0 483.2 79.9;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M316,23.5c0.2,13.4-11.1,24.5-24.5,24.5H278c-1.1,0-2,0.9-2,2v28c0,1.1-0.9,2-2,2h-4c-1.1,0-2-0.9-2-2V42
+			c0-1.1,0.9-2,2-2h21.6c8.6,0,16-6.6,16.4-15.2c0.4-9.2-6.9-16.8-16-16.8h-22c-1.1,0-2-0.9-2-2V2c0-1.1,0.9-2,2-2h22
+			C305.1-0.1,315.7,10.4,316,23.5z"/>
+		<path class="st0" d="M420.5,42.6l7,35c0.2,1.2-0.7,2.4-2,2.4h-3.9c-1,0-1.8-0.7-2-1.6l-6-30c-0.2-1.2-1.4-1.9-2.6-1.5
+			c-2.2,0.7-4.6,1.1-7.1,1.1h-14c-1.1,0-2,0.9-2,2v28c0,1.1-0.9,2-2,2h-4c-1.1,0-2-0.9-2-2V42c0-1.1,0.9-2,2-2h21.6
+			c8.6,0,16-6.6,16.4-15.2c0.4-9.2-6.9-16.8-16-16.8h-22c-1.1,0-2-0.9-2-2V2c0-1.1,0.9-2,2-2h21.4c13.2,0,24.6,10.8,24.6,24.1
+			c0,6.5-2.7,12.4-6.9,16.8C420.6,41.2,420.4,41.9,420.5,42.6z"/>
+		<path class="st0" d="M361.5,79.9h-3.9c-1,0-1.8-0.7-2-1.6l-11.7-58.6c-0.4-2.1-3.5-2.1-3.9,0l-11.7,58.6c-0.2,0.9-1,1.6-2,1.6
+			h-3.9c-1.3,0-2.2-1.2-2-2.4l15.2-76c0.2-0.9,1-1.6,2-1.6h8.7c1,0,1.8,0.7,2,1.6l15.2,76C363.7,78.8,362.8,79.9,361.5,79.9z"/>
+		<path class="st0" d="M465.5,33.6l17.6,44c0.4,1.1-0.4,2.3-1.6,2.3h-6.3c-0.7,0-1.3-0.4-1.6-1.1l-13-32.4c-0.5-1.3-2.4-1.4-3.1-0.2
+			l-5.3,9.3c-0.1,0.3-0.2,0.5-0.2,0.8v21.8c0,0.9-0.8,1.7-1.7,1.7h-4.6c-0.9,0-1.7-0.8-1.7-1.7V1.6c0-0.9,0.8-1.7,1.7-1.7h4.6
+			c0.9,0,1.7,0.8,1.7,1.7V32c0,1.7,2.3,2.4,3.2,0.8l0,0l5.9-10.3l12.4-21.7c0.3-0.5,0.9-0.9,1.5-0.9h6.1c1.3,0,2.1,1.4,1.5,2.5
+			l-17,29.7C465.3,32.6,465.3,33.2,465.5,33.6z"/>
+		<path class="st0" d="M48,65.9v12c0,1.1-0.9,2-2,2H24c-13.3,0-24-10.7-24-24v-54c0-1.1,0.9-2,2-2h12c1.1,0,2,0.9,2,2v54
+			c0,4.4,3.6,8,8,8h22C47.1,63.9,48,64.8,48,65.9z"/>
+		<path class="st0" d="M108,1.9v53.5c0,13.4-11,24.8-24.5,24.5C70.5,79.7,60,69,60,55.9v-54c0-1.1,0.9-2,2-2h12c1.1,0,2,0.9,2,2
+			v53.7c0,4.3,3.2,8,7.5,8.3c4.7,0.3,8.5-3.4,8.5-8v-54c0-1.1,0.9-2,2-2h12C107.1-0.1,108,0.8,108,1.9z"/>
+		<path class="st0" d="M172,23.9v54c0,1.1-0.9,2-2,2h-12c-1.1,0-2-0.9-2-2v-54c0-4.4-3.6-8-8-8h-6c-1.1,0-2,0.9-2,2v60
+			c0,1.1-0.9,2-2,2h-12c-1.1,0-2-0.9-2-2v-76c0-1.1,0.9-2,2-2h22C161.2-0.1,172,10.7,172,23.9z"/>
+		<path class="st0" d="M233.5,79.9h-11.9c-1,0-1.8-0.7-2-1.6l-5.7-28.6c-0.4-2.1-3.5-2.1-3.9,0l-5.7,28.6c-0.2,0.9-1,1.6-2,1.6
+			h-11.9c-1.3,0-2.2-1.2-2-2.4l15.2-76c0.2-0.9,1-1.6,2-1.6h12.7c1,0,1.8,0.7,2,1.6l15.2,76C235.7,78.8,234.8,79.9,233.5,79.9z"/>
+	</g>
+</g>
+</svg>

package/src/assets/stars.svg

@@ -0,0 +1,66 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="fill: #ffffff;" viewBox="0 0 2000 2000">
+    <circle cx="724" cy="1382" r="2"/>
+    <circle cx="803" cy="1283" r="2"/>
+    <circle cx="66" cy="325" r="2"/>
+    <circle cx="1843" cy="942" r="2"/>
+    <circle cx="200" cy="1732" r="2"/>
+    <circle cx="1067" cy="1133" r="2"/>
+    <circle cx="845" cy="1873" r="2"/>
+    <circle cx="401" cy="1933" r="2"/>
+    <circle cx="97" cy="927" r="2"/>
+    <circle cx="1189" cy="1464" r="2"/>
+    <circle cx="1480" cy="813" r="2"/>
+    <circle cx="1122" cy="881" r="2"/>
+    <circle cx="820" cy="1858" r="2"/>
+    <circle cx="10" cy="615" r="2"/>
+    <circle cx="1754" cy="870" r="2"/>
+    <circle cx="732" cy="1915" r="2"/>
+    <circle cx="1693" cy="179" r="2"/>
+    <circle cx="665" cy="774" r="2"/>
+    <circle cx="1042" cy="194" r="2"/>
+    <circle cx="1898" cy="270" r="2"/>
+    <circle cx="1498" cy="1067" r="2"/>
+    <circle cx="1563" cy="426" r="2"/>
+    <circle cx="230" cy="1990" r="2"/>
+    <circle cx="576" cy="1606" r="2"/>
+    <circle cx="1764" cy="1726" r="2"/>
+    <circle cx="111" cy="549" r="2"/>
+    <circle cx="375" cy="902" r="2"/>
+    <circle cx="117" cy="1078" r="2"/>
+    <circle cx="806" cy="1650" r="2"/>
+    <circle cx="1192" cy="558" r="2"/>
+    <circle cx="121" cy="1147" r="2"/>
+    <circle cx="118" cy="159" r="2"/>
+    <circle cx="513" cy="624" r="2"/>
+    <circle cx="389" cy="2" r="2"/>
+    <circle cx="1863" cy="397" r="2"/>
+    <circle cx="20" cy="1208" r="2"/>
+    <circle cx="1888" cy="489" r="2"/>
+    <circle cx="1966" cy="2" r="2"/>
+    <circle cx="661" cy="1410" r="2"/>
+    <circle cx="1463" cy="1789" r="2"/>
+    <circle cx="1339" cy="643" r="2"/>
+    <circle cx="1590" cy="453" r="2"/>
+    <circle cx="1902" cy="1415" r="2"/>
+    <circle cx="1386" cy="746" r="2"/>
+    <circle cx="1714" cy="1304" r="2"/>
+    <circle cx="1811" cy="981" r="2"/>
+    <circle cx="1719" cy="1247" r="2"/>
+    <circle cx="1882" cy="18" r="2"/>
+    <circle cx="93" cy="516" r="2"/>
+    <circle cx="287" cy="1613" r="2"/>
+    <circle cx="149" cy="222" r="2"/>
+    <circle cx="793" cy="212" r="2"/>
+    <circle cx="326" cy="906" r="2"/>
+    <circle cx="759" cy="1237" r="2"/>
+    <circle cx="1053" cy="780" r="2"/>
+    <circle cx="1067" cy="1925" r="2"/>
+    <circle cx="323" cy="193" r="2"/>
+    <circle cx="781" cy="1799" r="2"/>
+    <circle cx="774" cy="860" r="2"/>
+    <circle cx="857" cy="811" r="2"/>
+    <circle cx="93" cy="1445" r="2"/>
+    <circle cx="195" cy="242" r="2"/>
+    <circle cx="1557" cy="36" r="2"/>
+    <circle cx="374" cy="401" r="2"/>
+</svg>

package/src/components/breadcrumb/LBreadLink.vue

@@ -0,0 +1,40 @@
+<template>
+    <div
+        class="bread-link"
+        :class="{'last':isLast}"
+        @click="navigate"
+    >
+        {{ link.name }}
+    </div>
+</template>
+
+
+<script setup lang="ts">
+import { TBreadLink } from "@/components/breadcrumb/type";
+const props = defineProps<{
+    isLast?: boolean;
+    link: TBreadLink;
+}>();
+function navigate() {
+    if (props.isLast) {
+        return;
+    }
+    props.link.navigate?.();
+}
+</script>
+
+<style scoped>
+.bread-link {
+    font-weight: 600;
+    text-transform: capitalize;
+    color: var(--color-content-lite);
+    &:not(.last) {
+        color: var(--color-primary);
+        cursor: pointer;
+        transition: var(--transition-fast);
+        &:hover {
+            color: var(--color-content);
+        }
+    }
+}
+</style>

package/src/components/breadcrumb/LBreadcrumb.story.vue

@@ -0,0 +1,29 @@
+<template>
+    <Story :layout="{ type: 'single', iframe: false }">
+        <Variant title="standard">
+            <LBreadcrumb :links="links" />
+        </Variant>
+        <Variant title="with slot">
+            <LBreadcrumb :links="links">
+                My custom slot
+            </LBreadcrumb>
+        </Variant>
+    </Story>
+</template>
+
+<script setup lang="ts">
+import LBreadcrumb from "@/components/breadcrumb/LBreadcrumb.vue";
+import { TBreadcrumb } from "@/components/breadcrumb/type";
+
+const links = [
+    {
+        name: "Test A"
+    },
+    {
+        name: "Test B"
+    },
+    {
+        name: "Test C"
+    }
+] satisfies TBreadcrumb;
+</script>

package/src/components/breadcrumb/LBreadcrumb.vue

@@ -0,0 +1,54 @@
+<template>
+    <div class="breadcrumb">
+        <div class="thread">
+            <template
+                v-for="(link,key) of links"
+                :key="key"
+            >
+                <LBreadLink
+                    :is-last="isLast(key)"
+                    :link="link"
+                />
+                <div class="separator">
+                    /
+                </div>
+            </template>
+        </div>
+        <slot />
+    </div>
+</template>
+
+
+<script setup lang="ts">
+import { TBreadcrumb } from "@/components/breadcrumb/type";
+import LBreadLink from "@/components/breadcrumb/LBreadLink.vue";
+
+const props = defineProps<{
+    links: TBreadcrumb;
+}>();
+const isLast = (key: number) => key === (props.links.length - 1);
+</script>
+
+<style scoped>
+.breadcrumb {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: var(--color-background-0);
+    border-radius: var(--length-radius-m);
+    padding: var(--length-s);
+
+    .thread {
+        display: flex;
+        gap: var(--length-xs);
+
+        .separator {
+            color: var(--color-content-liter);
+
+            &:last-of-type {
+                display: none;
+            }
+        }
+    }
+}
+</style>

package/src/components/breadcrumb/type.ts

@@ -0,0 +1,6 @@
+export type TBreadLink = {
+    name: string;
+    navigate?: (() => void);
+};
+
+export type TBreadcrumb = Array<TBreadLink>

package/src/components/context/LContextMenu.story.vue

@@ -0,0 +1,73 @@
+<template>
+    <Story :layout="{ type: 'single', iframe: false }">
+        <LContextMenu :elements="elements" />
+    </Story>
+</template>
+
+<script setup lang="ts">
+import { faBox, faCopy, faCut, faFolder, faPaste, faPen, faPlus, faTrash } from "@fortawesome/pro-solid-svg-icons";
+import { EMenuElementType } from "@/components/context/type";
+import LContextMenu from "@/components/context/LContextMenu.vue";
+
+const elements = [
+    {
+        name: "New",
+        type: EMenuElementType.category,
+        children: [{
+            name: "Folder",
+            type: EMenuElementType.item,
+            disabled: true,
+            icon: faFolder,
+            onClick: () => {
+                console.log("Copy");
+            }
+        },
+        {
+            name: "Script",
+            type: EMenuElementType.item,
+            icon: faBox
+        },
+        {
+            name: "Script",
+            type: EMenuElementType.item,
+            icon: faBox
+        },
+        {
+            name: "Script",
+            type: EMenuElementType.item,
+            icon: faBox
+        }],
+        icon: faPlus
+    }, {
+        name: "Cut",
+        type: EMenuElementType.item,
+        disabled: true,
+        icon: faCut,
+        separator: true,
+        shortcut: "Ctrl + X"
+    }, {
+        name: "Copy",
+        type: EMenuElementType.item,
+        disabled: true,
+        icon: faCopy,
+        shortcut: "Ctrl + C"
+    }, {
+        name: "Paste",
+        type: EMenuElementType.item,
+        disabled: true,
+        icon: faPaste,
+        shortcut: "Ctrl + V"
+    }, {
+        name: "Rename",
+        type: EMenuElementType.item,
+        icon: faPen,
+        separator: true,
+        shortcut: "F2"
+    }, {
+        name: "Delete",
+        type: EMenuElementType.item,
+        icon: faTrash,
+        shortcut: "Del"
+    }
+];
+</script>