From 85ee1dd9360770223100dc4453365ab54c7a1735 Mon Sep 17 00:00:00 2001
From: robalb <11277482+robalb@users.noreply.github.com>
Date: Sat, 26 Oct 2024 15:43:15 +0200
Subject: [PATCH 01/25] working on design system. included melt ui
---
emscripten_blink/field_notes/roadmap.md | 12 +-
svelte_blinkenweb/package-lock.json | 100 +++++++++++
svelte_blinkenweb/package.json | 1 +
.../src/components/Controls.svelte | 156 ++++++++++--------
.../src/components/ControlsDebugger.svelte | 0
.../src/components/ControlsEditor.svelte | 154 +++++++++++++++++
.../src/components/icons/ArrowBack.svelte | 29 ++++
.../src/components/icons/ArrowForward.svelte | 30 ++++
.../src/components/icons/WizardHat.svelte | 30 ++++
svelte_blinkenweb/src/styles/style.css | 72 ++++++++
10 files changed, 516 insertions(+), 68 deletions(-)
create mode 100644 svelte_blinkenweb/src/components/ControlsDebugger.svelte
create mode 100644 svelte_blinkenweb/src/components/ControlsEditor.svelte
create mode 100644 svelte_blinkenweb/src/components/icons/ArrowBack.svelte
create mode 100644 svelte_blinkenweb/src/components/icons/ArrowForward.svelte
create mode 100644 svelte_blinkenweb/src/components/icons/WizardHat.svelte
diff --git a/emscripten_blink/field_notes/roadmap.md b/emscripten_blink/field_notes/roadmap.md
index 9f586d9..1ef71a6 100644
--- a/emscripten_blink/field_notes/roadmap.md
+++ b/emscripten_blink/field_notes/roadmap.md
@@ -29,7 +29,17 @@
-[x] first release with github pages
-[x] CI/CD pipeline. pushes to master should trigger a merge and then a checkout into github_pages. then trigger a build. the contents of /build should be copied into /docs, and pushed.
- test CI/CD pipeline that directly publishes to github pages without storing the artifacts in a branch. -> https://github.com/actions/upload-pages-artifact
-- mobile layout
+-[x] mobile layout
+
+
+
+https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
+
+TODO: figure out design system.
+- what about MELT ui, styling every melt ui element via the data-attributes the library sets?
+ overrides should be easy via custom styles.
+
+- what about elements that are not controlled by melt ui? such as basic buttons?
diff --git a/svelte_blinkenweb/package-lock.json b/svelte_blinkenweb/package-lock.json
index 44775e7..860bf63 100644
--- a/svelte_blinkenweb/package-lock.json
+++ b/svelte_blinkenweb/package-lock.json
@@ -12,6 +12,7 @@
"prism-code-editor": "^3.4.0"
},
"devDependencies": {
+ "@melt-ui/svelte": "^0.84.0",
"@sveltejs/vite-plugin-svelte": "^3.1.1",
"svelte": "^4.2.18",
"vite": "^5.3.4"
@@ -397,6 +398,40 @@
"node": ">=12"
}
},
+ "node_modules/@floating-ui/core": {
+ "version": "1.6.8",
+ "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
+ "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+ "dev": true,
+ "dependencies": {
+ "@floating-ui/utils": "^0.2.8"
+ }
+ },
+ "node_modules/@floating-ui/dom": {
+ "version": "1.6.11",
+ "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.11.tgz",
+ "integrity": "sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==",
+ "dev": true,
+ "dependencies": {
+ "@floating-ui/core": "^1.6.0",
+ "@floating-ui/utils": "^0.2.8"
+ }
+ },
+ "node_modules/@floating-ui/utils": {
+ "version": "0.2.8",
+ "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
+ "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
+ "dev": true
+ },
+ "node_modules/@internationalized/date": {
+ "version": "3.5.6",
+ "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.6.tgz",
+ "integrity": "sha512-jLxQjefH9VI5P9UQuqB6qNKnvFt1Ky1TPIzHGsIlCi7sZZoMR8SdYbBGRvM0y+Jtb+ez4ieBzmiAUcpmPYpyOw==",
+ "dev": true,
+ "dependencies": {
+ "@swc/helpers": "^0.5.0"
+ }
+ },
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.5",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
@@ -440,6 +475,41 @@
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
+ "node_modules/@melt-ui/svelte": {
+ "version": "0.84.0",
+ "resolved": "https://registry.npmjs.org/@melt-ui/svelte/-/svelte-0.84.0.tgz",
+ "integrity": "sha512-KZHu/I2MRmvRE5fIHSbGTZRlbfcu2uV6cit+1kTYKr4isuDy/T2+e4OngKYxNTvyB+zA5tp7BXUOMkoKrpqkCw==",
+ "dev": true,
+ "dependencies": {
+ "@floating-ui/core": "^1.3.1",
+ "@floating-ui/dom": "^1.4.5",
+ "@internationalized/date": "^3.5.0",
+ "dequal": "^2.0.3",
+ "focus-trap": "^7.5.2",
+ "nanoid": "^5.0.4"
+ },
+ "peerDependencies": {
+ "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0-next.118"
+ }
+ },
+ "node_modules/@melt-ui/svelte/node_modules/nanoid": {
+ "version": "5.0.7",
+ "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.7.tgz",
+ "integrity": "sha512-oLxFY2gd2IqnjcYyOXD8XGCftpGtZP2AbHbOkthDkvRywH5ayNtPVy9YlOPcHckXzbLTCHpkb7FB+yuxKV13pQ==",
+ "dev": true,
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/ai"
+ }
+ ],
+ "bin": {
+ "nanoid": "bin/nanoid.js"
+ },
+ "engines": {
+ "node": "^18 || >=20"
+ }
+ },
"node_modules/@rollup/rollup-android-arm-eabi": {
"version": "4.19.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.19.1.tgz",
@@ -687,6 +757,15 @@
"vite": "^5.0.0"
}
},
+ "node_modules/@swc/helpers": {
+ "version": "0.5.13",
+ "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.13.tgz",
+ "integrity": "sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==",
+ "dev": true,
+ "dependencies": {
+ "tslib": "^2.4.0"
+ }
+ },
"node_modules/@types/estree": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -823,6 +902,15 @@
"@types/estree": "^1.0.0"
}
},
+ "node_modules/focus-trap": {
+ "version": "7.6.0",
+ "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.0.tgz",
+ "integrity": "sha512-1td0l3pMkWJLFipobUcGaf+5DTY4PLDDrcqoSaKP8ediO/CoWCCYk/fT/Y2A4e6TNB+Sh6clRJCjOPPnKoNHnQ==",
+ "dev": true,
+ "dependencies": {
+ "tabbable": "^6.2.0"
+ }
+ },
"node_modules/fsevents": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -1052,6 +1140,18 @@
"svelte": "^3.19.0 || ^4.0.0"
}
},
+ "node_modules/tabbable": {
+ "version": "6.2.0",
+ "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+ "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+ "dev": true
+ },
+ "node_modules/tslib": {
+ "version": "2.8.0",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.0.tgz",
+ "integrity": "sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==",
+ "dev": true
+ },
"node_modules/vite": {
"version": "5.3.5",
"resolved": "https://registry.npmjs.org/vite/-/vite-5.3.5.tgz",
diff --git a/svelte_blinkenweb/package.json b/svelte_blinkenweb/package.json
index 75848e1..3a39392 100644
--- a/svelte_blinkenweb/package.json
+++ b/svelte_blinkenweb/package.json
@@ -9,6 +9,7 @@
"preview": "vite preview"
},
"devDependencies": {
+ "@melt-ui/svelte": "^0.84.0",
"@sveltejs/vite-plugin-svelte": "^3.1.1",
"svelte": "^4.2.18",
"vite": "^5.3.4"
diff --git a/svelte_blinkenweb/src/components/Controls.svelte b/svelte_blinkenweb/src/components/Controls.svelte
index 857ace7..1bf3ab4 100644
--- a/svelte_blinkenweb/src/components/Controls.svelte
+++ b/svelte_blinkenweb/src/components/Controls.svelte
@@ -6,6 +6,9 @@
import { onMount } from 'svelte';
import {blinkStore, state} from '../core/blinkSvelte'
import {fetchBinaryFile} from '../core/utils'
+ import ControlsEditor from './ControlsEditor.svelte';
+ import WizardHat from './icons/WizardHat.svelte';
+ import ArrowBack from './icons/ArrowBack.svelte';
// import demo1_url from '../assets/example.elf?url'
// import demo1_url from '../assets/ld-new.elf?url'
// import demo1_url from '../assets/demo_programs/argv.elf?url'
@@ -90,6 +93,26 @@
+
{#if (showEditor || !mobile) && !$blinkStore.uploadedElf}
@@ -102,10 +125,12 @@
{/each}
+
+
{:else}
-