From 3aa88e61ef5966fc8d93cc2e844093c38a93a1da Mon Sep 17 00:00:00 2001
From: Cthomp7 <cthomp7@saic.edu>
Date: Tue, 16 Sep 2025 06:34:47 -0500
Subject: [PATCH 01/25] split keyframe & tutorial tools in nav

---
 www/widgets/tutorial-maker/popups/index.html | 16 +++++++++++-----
 www/widgets/tutorial-maker/popups/main.css   |  7 +++++++
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/www/widgets/tutorial-maker/popups/index.html b/www/widgets/tutorial-maker/popups/index.html
index 1d9a3a4e..f35ad677 100644
--- a/www/widgets/tutorial-maker/popups/index.html
+++ b/www/widgets/tutorial-maker/popups/index.html
@@ -123,11 +123,17 @@ <h1>Video Recorder</h1>
 
 
 <nav>
-  <button id="open-metadata" class="pill-btn pill-btn--secondary">settings</button>
-  <button id="create-keyframe" class="pill-btn pill-btn--secondary">create keyframe</button>
-  <button id="update-keyframe" class="pill-btn pill-btn--secondary">update keyframe</button>
-  <button name="nav-infos" class="pill-btn pill-btn--secondary">?</button>
-  <button id="download-tutorial" class="pill-btn pill-btn--secondary">download</button>
+  <div>
+    <div class="keyframe-tools">
+      <button id="create-keyframe" class="pill-btn pill-btn--secondary">create keyframe</button>
+      <button id="update-keyframe" class="pill-btn pill-btn--secondary">update keyframe</button>
+      <button name="nav-infos" class="pill-btn pill-btn--secondary">?</button>
+    </div>
+    <div class="tutorial-tools">
+      <button id="open-metadata" class="pill-btn pill-btn--secondary">settings</button>
+      <button id="download-tutorial" class="pill-btn pill-btn--secondary">download</button>
+    </div>
+  </div>
 </nav>
 
 <div class="labels">
diff --git a/www/widgets/tutorial-maker/popups/main.css b/www/widgets/tutorial-maker/popups/main.css
index 6d2de16d..be322ea8 100644
--- a/www/widgets/tutorial-maker/popups/main.css
+++ b/www/widgets/tutorial-maker/popups/main.css
@@ -55,6 +55,13 @@ nav {
   padding: 10px;
 }
 
+nav > div {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 7px;
+}
+
 /* ~ ~  ~ ~ ~ ~  ~ ~ ~ ~  ~ ~ ~ ~  ~ ~  Overlay Panels ~ ~  ~ ~ ~ ~  ~ ~ */
 
 .overlay {

From 776e92c799206f71cb06095dab4da0ebffc8236f Mon Sep 17 00:00:00 2001
From: Cthomp7 <cthomp7@saic.edu>
Date: Thu, 18 Sep 2025 23:37:20 -0500
Subject: [PATCH 02/25] added keyframe name logic

---
 www/widgets/tutorial-maker/index.js          |  2 +-
 www/widgets/tutorial-maker/popups/index.html |  1 +
 www/widgets/tutorial-maker/popups/main.css   | 37 ++++++++++++++++++++
 www/widgets/tutorial-maker/popups/main.js    | 26 +++++++++-----
 4 files changed, 56 insertions(+), 10 deletions(-)

diff --git a/www/widgets/tutorial-maker/index.js b/www/widgets/tutorial-maker/index.js
index 26805716..fc4510db 100644
--- a/www/widgets/tutorial-maker/index.js
+++ b/www/widgets/tutorial-maker/index.js
@@ -132,7 +132,7 @@ class TutorialMaker extends Widget {
       if (!frame) { // create keyframe
         frame = {
           timecode,
-          name: `keyframe ${(this.hvp.data[type].length + 1).toString()}`,
+          name: `keyframe: ${timecode}`,
           video: this._getSizeAndPosition(this.hvp),
           widgets: this._getCurrentWidgets(),
           netitor: this._getNetitorData(),
diff --git a/www/widgets/tutorial-maker/popups/index.html b/www/widgets/tutorial-maker/popups/index.html
index f35ad677..636f0c15 100644
--- a/www/widgets/tutorial-maker/popups/index.html
+++ b/www/widgets/tutorial-maker/popups/index.html
@@ -126,6 +126,7 @@ <h1>Video Recorder</h1>
   <div>
     <div class="keyframe-tools">
       <button id="create-keyframe" class="pill-btn pill-btn--secondary">create keyframe</button>
+      <div id="kf-name-input" contentEditable="true" data-placeholder="type keyframe name..."></div>
       <button id="update-keyframe" class="pill-btn pill-btn--secondary">update keyframe</button>
       <button name="nav-infos" class="pill-btn pill-btn--secondary">?</button>
     </div>
diff --git a/www/widgets/tutorial-maker/popups/main.css b/www/widgets/tutorial-maker/popups/main.css
index be322ea8..72f2f83b 100644
--- a/www/widgets/tutorial-maker/popups/main.css
+++ b/www/widgets/tutorial-maker/popups/main.css
@@ -62,6 +62,43 @@ nav > div {
   gap: 7px;
 }
 
+nav > div > div {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.keyframe-tools {
+  flex-grow: 1;
+}
+.tutorial-tools {
+  flex: 0;
+}
+
+#kf-name-input {
+  border: 1px solid var(--netizen-meta);
+  background: var(--bg-color);
+  color: var(--netizen-meta);
+  padding: 4px 10px;
+  font-weight: 600;
+  border-radius: 7px;
+  max-width: 320px;
+  width: 100%;
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+#kf-name-input::-webkit-scrollbar {
+  display: none;
+}
+#kf-name-input:empty:before {
+    content: attr(data-placeholder);
+    color: var(--netizen-hint-shadow);
+    pointer-events: none;
+  }
+
 /* ~ ~  ~ ~ ~ ~  ~ ~ ~ ~  ~ ~ ~ ~  ~ ~  Overlay Panels ~ ~  ~ ~ ~ ~  ~ ~ */
 
 .overlay {
diff --git a/www/widgets/tutorial-maker/popups/main.js b/www/widgets/tutorial-maker/popups/main.js
index cd9d36c3..d01c9a2b 100644
--- a/www/widgets/tutorial-maker/popups/main.js
+++ b/www/widgets/tutorial-maker/popups/main.js
@@ -112,18 +112,25 @@ function addMarker (k, type) {
   const x = t / metadata.duration * 100
   timeline.createMarker(x, t, type, (tc) => {
     msg(`tut-mkr-${type}-click`, tc)
+    if (type === 'keyframe') setNameInput(tc)
   })
+  if (type === 'keyframe') nn.get(`[name="keyframe-${k.timecode}"]`).dataset.name = k.name
 }
 
-function updateMarker (k, type) {
-  // TODO needs configured
+function createKeyframe (kf) {
+  addMarker(kf, 'keyframe')
+  timeline.updateMarkers()
 }
 
-function updateKeyframe (data) {
-  const { frame, add } = data
-  if (add) addMarker(frame, 'keyframe')
-  else updateMarker(frame, 'keyframe')
-  timeline.updateMarkers()
+function updateKeframe () {
+  const name = nn.get('#kf-name-input').textContent
+  msg('tut-mkr-get-keyframe', { name, timecode: TIMECODE })
+  nn.get(`[name="keyframe-${TIMECODE}"]`).dataset.name = name
+}
+
+function setNameInput (tc) {
+  const name = nn.get(`[name="keyframe-${tc}"]`).dataset.name
+  nn.get('#kf-name-input').textContent = name
 }
 
 // -------------------------------------------------------- SETUP EVENT LISTENRS
@@ -132,7 +139,7 @@ nn.get('#new').on('click', () => overlay('#metadata'))
 nn.get('#open').on('click', openTutorial)
 // nn.get('#close-recorder').on('click', updateVideo)
 nn.get('#open-metadata').on('click', () => msg('tut-mkr-get-metadata'))
-nn.get('#update-keyframe').on('click', () => msg('tut-mkr-get-keyframe', { timecode: TIMECODE }))
+nn.get('#update-keyframe').on('click', () => updateKeframe())
 nn.get('#download-tutorial').on('click', () => zipper.download())
 
 nn.getAll('button[name]').forEach(btn => {
@@ -141,6 +148,7 @@ nn.getAll('button[name]').forEach(btn => {
   })
 })
 nn.get('#create-keyframe').on('click', () => msg('tut-mkr-get-keyframe', { timecode: TIMECODE }))
+nn.get('#kf-name-input').on('keydown', (e) => { e.stopPropagation() }) // prevents shortcuts when typing
 
 // .................... window events
 
@@ -184,7 +192,7 @@ nn.on('message', (e) => {
   } else if (type === 'tut-mkr-video-duration') {
     metadata.duration = payload
   } else if (type === 'tut-mkr-keyframe') {
-    updateKeyframe(payload)
+    if (payload.add) createKeyframe(payload.frame)
   } else if (type === 'tut-mkr-keylog') {
     // TODO...
   } else if (type === 'tut-mkr-time-update') {

From ef5e504c850cd04df6b2d6b55ee7ab67ba830a6c Mon Sep 17 00:00:00 2001
From: Cthomp7 <cthomp7@saic.edu>
Date: Thu, 18 Sep 2025 23:42:41 -0500
Subject: [PATCH 03/25] removed preset keyframe name

---
 www/widgets/tutorial-maker/index.js       | 2 +-
 www/widgets/tutorial-maker/popups/main.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/www/widgets/tutorial-maker/index.js b/www/widgets/tutorial-maker/index.js
index fc4510db..4b4c35e3 100644
--- a/www/widgets/tutorial-maker/index.js
+++ b/www/widgets/tutorial-maker/index.js
@@ -132,7 +132,7 @@ class TutorialMaker extends Widget {
       if (!frame) { // create keyframe
         frame = {
           timecode,
-          name: `keyframe: ${timecode}`,
+          name: name ?? '',
           video: this._getSizeAndPosition(this.hvp),
           widgets: this._getCurrentWidgets(),
           netitor: this._getNetitorData(),
diff --git a/www/widgets/tutorial-maker/popups/main.js b/www/widgets/tutorial-maker/popups/main.js
index d01c9a2b..03cf88bf 100644
--- a/www/widgets/tutorial-maker/popups/main.js
+++ b/www/widgets/tutorial-maker/popups/main.js
@@ -123,7 +123,7 @@ function createKeyframe (kf) {
 }
 
 function updateKeframe () {
-  const name = nn.get('#kf-name-input').textContent
+  const name = document.querySelector('#kf-name-input')?.textContent
   msg('tut-mkr-get-keyframe', { name, timecode: TIMECODE })
   nn.get(`[name="keyframe-${TIMECODE}"]`).dataset.name = name
 }

From f87324a5fe0897c8d4f0294ce8f34610e3956b06 Mon Sep 17 00:00:00 2001
From: Cthomp7 <cthomp7@saic.edu>
Date: Fri, 19 Sep 2025 00:05:20 -0500
Subject: [PATCH 04/25] only show keyframe editing tools when keyframe is
 selected

---
 www/widgets/tutorial-maker/popups/index.html |  6 +++---
 www/widgets/tutorial-maker/popups/main.css   |  2 +-
 www/widgets/tutorial-maker/popups/main.js    | 11 +++++++++++
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/www/widgets/tutorial-maker/popups/index.html b/www/widgets/tutorial-maker/popups/index.html
index 636f0c15..9294fd07 100644
--- a/www/widgets/tutorial-maker/popups/index.html
+++ b/www/widgets/tutorial-maker/popups/index.html
@@ -126,9 +126,9 @@ <h1>Video Recorder</h1>
   <div>
     <div class="keyframe-tools">
       <button id="create-keyframe" class="pill-btn pill-btn--secondary">create keyframe</button>
-      <div id="kf-name-input" contentEditable="true" data-placeholder="type keyframe name..."></div>
-      <button id="update-keyframe" class="pill-btn pill-btn--secondary">update keyframe</button>
-      <button name="nav-infos" class="pill-btn pill-btn--secondary">?</button>
+      <div id="kf-name-input" contentEditable="true" data-placeholder="type keyframe name..." kf-edit-tool></div>
+      <button id="update-keyframe" class="pill-btn pill-btn--secondary" kf-edit-tool>update</button>
+      <button name="nav-infos" class="pill-btn pill-btn--secondary" kf-edit-tool>?</button>
     </div>
     <div class="tutorial-tools">
       <button id="open-metadata" class="pill-btn pill-btn--secondary">settings</button>
diff --git a/www/widgets/tutorial-maker/popups/main.css b/www/widgets/tutorial-maker/popups/main.css
index 72f2f83b..46815228 100644
--- a/www/widgets/tutorial-maker/popups/main.css
+++ b/www/widgets/tutorial-maker/popups/main.css
@@ -79,7 +79,7 @@ nav > div > div {
   border: 1px solid var(--netizen-meta);
   background: var(--bg-color);
   color: var(--netizen-meta);
-  padding: 4px 10px;
+  padding: 2.5px 10px;
   font-weight: 600;
   border-radius: 7px;
   max-width: 320px;
diff --git a/www/widgets/tutorial-maker/popups/main.js b/www/widgets/tutorial-maker/popups/main.js
index 03cf88bf..fd5f64cc 100644
--- a/www/widgets/tutorial-maker/popups/main.js
+++ b/www/widgets/tutorial-maker/popups/main.js
@@ -89,6 +89,9 @@ function videoTimeUpdated (obj) { // runs as video plays && it's time udpates
   if (obj.keyframe) {
     const marker = nn.get(`[name="keyframe-${obj.keyframe.timecode}"]`)
     timeline.selectMarker(marker)
+    keyframeEditMode(true)
+  } else {
+    keyframeEditMode(false)
   }
   if (obj.keylog) {
     const marker = nn.get(`[name="keylog-${obj.keylog.timecode}"]`)
@@ -128,6 +131,12 @@ function updateKeframe () {
   nn.get(`[name="keyframe-${TIMECODE}"]`).dataset.name = name
 }
 
+function keyframeEditMode (enable) {
+  const tools = nn.getAll('[kf-edit-tool]')
+  if (enable) tools.forEach((t) => { t.style.display = 'block' })
+  else tools.forEach((t) => { t.style.display = 'none' })
+}
+
 function setNameInput (tc) {
   const name = nn.get(`[name="keyframe-${tc}"]`).dataset.name
   nn.get('#kf-name-input').textContent = name
@@ -159,6 +168,8 @@ nn.on('load', () => {
   }
   timeline.init()
 
+  keyframeEditMode(false)
+
   const m = document.createElement('tutorial-modal')
   nn.get('body').appendChild(m)
   modal = m

From 6b83ee2bb75e7132baf640c591cc40791f6e145c Mon Sep 17 00:00:00 2001
From: Cthomp7 <cthomp7@saic.edu>
Date: Mon, 22 Sep 2025 21:34:48 -0500
Subject: [PATCH 05/25] added deleting keyframe logic

---
 www/widgets/tutorial-maker/index.js           | 11 ++++++++++-
 www/widgets/tutorial-maker/popups/index.html  |  3 ++-
 www/widgets/tutorial-maker/popups/main.js     | 12 +++++++++---
 www/widgets/tutorial-maker/popups/timeline.js | 11 +++++++++++
 4 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/www/widgets/tutorial-maker/index.js b/www/widgets/tutorial-maker/index.js
index 4b4c35e3..ed26bf5e 100644
--- a/www/widgets/tutorial-maker/index.js
+++ b/www/widgets/tutorial-maker/index.js
@@ -129,7 +129,16 @@ class TutorialMaker extends Widget {
     const { timecode, name } = data
     let frame = this.hvp.data[type].find(k => k.timecode === timecode)
     if (type === 'keyframes') {
-      if (!frame) { // create keyframe
+      if (data?.remove) { // delete keyframe
+        if (frame) {
+          this.hvp.data[type].splice(this.hvp.data[type].indexOf(frame), 1)
+          return { frame, remove: true }
+        } else {
+          const error = `Failed to remove keyframe. No keyframe found for: ${timecode} seconds`
+          console.error(error)
+          return { error }
+        }
+      } else if (!frame) { // create keyframe
         frame = {
           timecode,
           name: name ?? '',
diff --git a/www/widgets/tutorial-maker/popups/index.html b/www/widgets/tutorial-maker/popups/index.html
index 9294fd07..d057bd08 100644
--- a/www/widgets/tutorial-maker/popups/index.html
+++ b/www/widgets/tutorial-maker/popups/index.html
@@ -128,7 +128,8 @@ <h1>Video Recorder</h1>
       <button id="create-keyframe" class="pill-btn pill-btn--secondary">create keyframe</button>
       <div id="kf-name-input" contentEditable="true" data-placeholder="type keyframe name..." kf-edit-tool></div>
       <button id="update-keyframe" class="pill-btn pill-btn--secondary" kf-edit-tool>update</button>
-      <button name="nav-infos" class="pill-btn pill-btn--secondary" kf-edit-tool>?</button>
+      <button id="delete-keyframe" class="pill-btn pill-btn--secondary" kf-edit-tool>delete</button>
+      <!-- <button name="nav-infos" class="pill-btn pill-btn--secondary" kf-edit-tool>?</button> -->
     </div>
     <div class="tutorial-tools">
       <button id="open-metadata" class="pill-btn pill-btn--secondary">settings</button>
diff --git a/www/widgets/tutorial-maker/popups/main.js b/www/widgets/tutorial-maker/popups/main.js
index fd5f64cc..f76df0d5 100644
--- a/www/widgets/tutorial-maker/popups/main.js
+++ b/www/widgets/tutorial-maker/popups/main.js
@@ -125,12 +125,17 @@ function createKeyframe (kf) {
   timeline.updateMarkers()
 }
 
-function updateKeframe () {
+function updateKeyframe () {
   const name = document.querySelector('#kf-name-input')?.textContent
   msg('tut-mkr-get-keyframe', { name, timecode: TIMECODE })
   nn.get(`[name="keyframe-${TIMECODE}"]`).dataset.name = name
 }
 
+function deleteKeyframe () {
+  timeline.removeMarker(TIMECODE, 'keyframe')
+  msg('tut-mkr-get-keyframe', { timecode: TIMECODE, remove: true })
+}
+
 function keyframeEditMode (enable) {
   const tools = nn.getAll('[kf-edit-tool]')
   if (enable) tools.forEach((t) => { t.style.display = 'block' })
@@ -148,7 +153,9 @@ nn.get('#new').on('click', () => overlay('#metadata'))
 nn.get('#open').on('click', openTutorial)
 // nn.get('#close-recorder').on('click', updateVideo)
 nn.get('#open-metadata').on('click', () => msg('tut-mkr-get-metadata'))
-nn.get('#update-keyframe').on('click', () => updateKeframe())
+nn.get('#create-keyframe').on('click', () => msg('tut-mkr-get-keyframe', { timecode: TIMECODE }))
+nn.get('#update-keyframe').on('click', () => updateKeyframe())
+nn.get('#delete-keyframe').on('click', () => deleteKeyframe())
 nn.get('#download-tutorial').on('click', () => zipper.download())
 
 nn.getAll('button[name]').forEach(btn => {
@@ -156,7 +163,6 @@ nn.getAll('button[name]').forEach(btn => {
     msg('tut-mkr-explain', btn.getAttribute('name'))
   })
 })
-nn.get('#create-keyframe').on('click', () => msg('tut-mkr-get-keyframe', { timecode: TIMECODE }))
 nn.get('#kf-name-input').on('keydown', (e) => { e.stopPropagation() }) // prevents shortcuts when typing
 
 // .................... window events
diff --git a/www/widgets/tutorial-maker/popups/timeline.js b/www/widgets/tutorial-maker/popups/timeline.js
index 62f148bd..950a9fd5 100644
--- a/www/widgets/tutorial-maker/popups/timeline.js
+++ b/www/widgets/tutorial-maker/popups/timeline.js
@@ -165,6 +165,17 @@ const timeline = {
       if (Number(list[i].timecode) < t) return list[i]
     }
     return null
+  },
+
+  removeMarker: (time, type) => {
+    const t = Number(time)
+    const m = nn.get(`[name="${type}-${t}"]`)
+    if (m) {
+      m.remove()
+      timeline.updateMarkers()
+    } else {
+      console.error(`Failed to remove marker. No Marker found for: ${time} seconds`)
+    }
   }
 }
 

From a046d601399aa452f84c8eeeaad1e99b462ca54a Mon Sep 17 00:00:00 2001
From: Cthomp7 <cthomp7@saic.edu>
Date: Mon, 22 Sep 2025 21:51:09 -0500
Subject: [PATCH 06/25] configured keyframes and keylogs in zipper.download

---
 www/widgets/tutorial-maker/index.js            | 10 ++++++++++
 www/widgets/tutorial-maker/popups/main.js      |  4 +++-
 www/widgets/tutorial-maker/popups/recorder.js  |  2 +-
 www/widgets/tutorial-maker/popups/zip-tools.js | 10 +++++-----
 4 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/www/widgets/tutorial-maker/index.js b/www/widgets/tutorial-maker/index.js
index ed26bf5e..dc5d67d7 100644
--- a/www/widgets/tutorial-maker/index.js
+++ b/www/widgets/tutorial-maker/index.js
@@ -28,6 +28,9 @@ class TutorialMaker extends Widget {
       if (e.origin !== window.location.origin) return // for security
       if (type === 'tut-mkr-opened-tutorial') { // opened tutorial from zip
         this._loadTutorial(payload)
+      } else if (type === 'tut-mkr-get-data') { // get tutorial data
+        const data = this._getData()
+        this._messagePopup('tut-mkr-data', data)
       } else if (type === 'tut-mkr-update-metadata') { // new metadata
         this._updateMetadata(payload)
       } else if (type === 'tut-mkr-get-metadata') { // asked for metadata
@@ -163,6 +166,13 @@ class TutorialMaker extends Widget {
     return { frame }
   }
 
+  _getData () {
+    const keyframes = this.hvp.data.keyframes
+    const keylogs = this.hvp.data.keylogs
+    // TODO: fetch widgets
+    return { keyframes, keylogs }
+  }
+
   // ............................ helpers ......................................
 
   _openPopup (type, payload) {
diff --git a/www/widgets/tutorial-maker/popups/main.js b/www/widgets/tutorial-maker/popups/main.js
index f76df0d5..d8b27546 100644
--- a/www/widgets/tutorial-maker/popups/main.js
+++ b/www/widgets/tutorial-maker/popups/main.js
@@ -156,7 +156,7 @@ nn.get('#open-metadata').on('click', () => msg('tut-mkr-get-metadata'))
 nn.get('#create-keyframe').on('click', () => msg('tut-mkr-get-keyframe', { timecode: TIMECODE }))
 nn.get('#update-keyframe').on('click', () => updateKeyframe())
 nn.get('#delete-keyframe').on('click', () => deleteKeyframe())
-nn.get('#download-tutorial').on('click', () => zipper.download())
+nn.get('#download-tutorial').on('click', () => msg('tut-mkr-get-data'))
 
 nn.getAll('button[name]').forEach(btn => {
   btn.on('click', () => {
@@ -214,6 +214,8 @@ nn.on('message', (e) => {
     // TODO...
   } else if (type === 'tut-mkr-time-update') {
     videoTimeUpdated(payload)
+  } else if (type === 'tut-mkr-data') {
+    zipper.download(payload)
   }
 })
 
diff --git a/www/widgets/tutorial-maker/popups/recorder.js b/www/widgets/tutorial-maker/popups/recorder.js
index 98f3a67c..cacd7391 100644
--- a/www/widgets/tutorial-maker/popups/recorder.js
+++ b/www/widgets/tutorial-maker/popups/recorder.js
@@ -243,7 +243,7 @@ const recorder = {
     `
     modal.openWithHTML(innerHTML)
     nn.get('[name="vfn-upload"]').addEventListener('click', () => recorder.onUploadVFN())
-    nn.get('[name="vfn-download"]').addEventListener('click', () => zipper.download(recorder.blob))
+    nn.get('[name="vfn-download"]').addEventListener('click', () => zipper.download({ video: recorder.blob }))
   },
 
   onUploadVFN: () => {
diff --git a/www/widgets/tutorial-maker/popups/zip-tools.js b/www/widgets/tutorial-maker/popups/zip-tools.js
index 73d4ebd8..b2505328 100644
--- a/www/widgets/tutorial-maker/popups/zip-tools.js
+++ b/www/widgets/tutorial-maker/popups/zip-tools.js
@@ -86,16 +86,16 @@ const zipper = {
 
   download: async (data = null) => {
     try {
-      const video = data || FILES.readFile(`${metadata.id}.mp4`)
-      const tutorial = { metadata: {}, widgets: {}, keyframes: {}, keylogs: {} }
+      const video = data?.video || FILES.readFile(`${metadata.id}.mp4`)
+      const tutorial = { metadata: {}, widgets: {}, keyframes: [], keylogs: [] }
       // set metadata
       const keys = ['id', 'title', 'author', 'authorURL', 'duration', 'jsfile', 'description', 'keywords', 'thumbnails']
       keys.forEach(key => {
         tutorial.metadata[key] = metadata[key]
       })
       // TODO: configure widgets
-      // TODO: configure keyframes
-      // TODO: configure keylogs
+      tutorial.keyframes = data?.keyframes ?? []
+      tutorial.keylogs = data?.keylogs ?? []
 
       const json = JSON.stringify(tutorial, null, 2)
 
@@ -108,7 +108,7 @@ const zipper = {
       const zip = new JSZip()
       zip.file('tutorial.json', json)
       zip.file(
-        data
+        data?.video
           ? metadata.id + (recorder.mimeType.includes('mp4') ? '.mp4' : '.webm')
           : `${metadata.id}.mp4`,
         blob,

From bd9f04f7cbe1d68d884a2f4df556f1f67a3826ba Mon Sep 17 00:00:00 2001
From: Cthomp7 <cthomp7@saic.edu>
Date: Mon, 22 Sep 2025 22:38:00 -0500
Subject: [PATCH 07/25] in-progress add menu

---
 www/widgets/tutorial-maker/popups/index.html  | 23 ++++++++++++-
 www/widgets/tutorial-maker/popups/main.css    | 33 ++++++++++++++++++-
 www/widgets/tutorial-maker/popups/main.js     | 19 +++++++++++
 .../tutorial-maker/popups/recorder.css        |  9 +++--
 4 files changed, 79 insertions(+), 5 deletions(-)

diff --git a/www/widgets/tutorial-maker/popups/index.html b/www/widgets/tutorial-maker/popups/index.html
index d057bd08..ba173a04 100644
--- a/www/widgets/tutorial-maker/popups/index.html
+++ b/www/widgets/tutorial-maker/popups/index.html
@@ -125,7 +125,28 @@ <h1>Video Recorder</h1>
 <nav>
   <div>
     <div class="keyframe-tools">
-      <button id="create-keyframe" class="pill-btn pill-btn--secondary">create keyframe</button>
+      <div style="position: relative;">
+        <button id="create-marker" class="pill-btn pill-btn--secondary">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M14 8.13908L1.72182 8.13908" stroke="#C3C3DA" stroke-width="3" stroke-linecap="round"/>
+            <path d="M7.8609 14.2782L7.8609 1.99999" stroke="#C3C3DA" stroke-width="3" stroke-linecap="round"/>
+          </svg>
+        </button>
+        <div id="create-options" style="display: none;">
+          <div id="create-keyframe" class="pill-btn pill-btn--secondary icon-btn">
+            <svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <rect x="1.4393" y="5.97487" width="5.74266" height="5.74266" transform="rotate(-45 1.4393 5.97487)" stroke="#C56DBB" stroke-width="2"/>
+            </svg>
+            <p>new keyframe</p>
+          </div>
+          <div id="create-keylog" class="pill-btn pill-btn--secondary icon-btn">
+            <svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <rect x="1.41421" y="5.47488" width="5.74266" height="5.74266" transform="rotate(-45 1.41421 5.47488)" stroke="#7DCA95" stroke-width="2"/>
+            </svg>
+            <p>new keylog</p>
+          </div>
+        </div>
+      </div>
       <div id="kf-name-input" contentEditable="true" data-placeholder="type keyframe name..." kf-edit-tool></div>
       <button id="update-keyframe" class="pill-btn pill-btn--secondary" kf-edit-tool>update</button>
       <button id="delete-keyframe" class="pill-btn pill-btn--secondary" kf-edit-tool>delete</button>
diff --git a/www/widgets/tutorial-maker/popups/main.css b/www/widgets/tutorial-maker/popups/main.css
index 46815228..b0b32998 100644
--- a/www/widgets/tutorial-maker/popups/main.css
+++ b/www/widgets/tutorial-maker/popups/main.css
@@ -97,7 +97,38 @@ nav > div > div {
     content: attr(data-placeholder);
     color: var(--netizen-hint-shadow);
     pointer-events: none;
-  }
+}
+
+#create-marker {
+  aspect-ratio: 1/1;
+  padding: 5px;
+}
+#create-marker svg {
+  transition: 0.2s ease-in-out transform;
+}
+
+#create-options {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  position: absolute;
+  top: 32;
+  left: 0;
+}
+#create-options button {
+  text-align: left;
+}
+#create-options .icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: fit-content;
+}
+#create-options .icon-btn > svg {
+  width: 18px;
+  height: 18px;
+}
 
 /* ~ ~  ~ ~ ~ ~  ~ ~ ~ ~  ~ ~ ~ ~  ~ ~  Overlay Panels ~ ~  ~ ~ ~ ~  ~ ~ */
 
diff --git a/www/widgets/tutorial-maker/popups/main.js b/www/widgets/tutorial-maker/popups/main.js
index d8b27546..158899c1 100644
--- a/www/widgets/tutorial-maker/popups/main.js
+++ b/www/widgets/tutorial-maker/popups/main.js
@@ -147,17 +147,36 @@ function setNameInput (tc) {
   nn.get('#kf-name-input').textContent = name
 }
 
+function showCreateOptions () {
+  const o = nn.get('#create-options')
+  const s = nn.get('#create-marker svg')
+  const c = o.style.display === 'flex'
+  if (!c) {
+    o.style.display = 'flex'
+    s.style.transform = 'rotate(45deg)'
+  } else {
+    o.style.display = 'none'
+    s.style.removeProperty('transform')
+  }
+  // TODO configure so it only displays options that aren't already created on selected timestamp
+}
+
 // -------------------------------------------------------- SETUP EVENT LISTENRS
 
 nn.get('#new').on('click', () => overlay('#metadata'))
 nn.get('#open').on('click', openTutorial)
 // nn.get('#close-recorder').on('click', updateVideo)
 nn.get('#open-metadata').on('click', () => msg('tut-mkr-get-metadata'))
+nn.get('#create-marker').on('click', () => showCreateOptions())
+
 nn.get('#create-keyframe').on('click', () => msg('tut-mkr-get-keyframe', { timecode: TIMECODE }))
 nn.get('#update-keyframe').on('click', () => updateKeyframe())
 nn.get('#delete-keyframe').on('click', () => deleteKeyframe())
 nn.get('#download-tutorial').on('click', () => msg('tut-mkr-get-data'))
 
+// TODO: configure keylog actions
+// nn.get('#create-keylog').on('click', () => msg('tut-mkr-get-keyframe', { timecode: TIMECODE }))
+
 nn.getAll('button[name]').forEach(btn => {
   btn.on('click', () => {
     msg('tut-mkr-explain', btn.getAttribute('name'))
diff --git a/www/widgets/tutorial-maker/popups/recorder.css b/www/widgets/tutorial-maker/popups/recorder.css
index 3f82c2ad..9f6d0a63 100644
--- a/www/widgets/tutorial-maker/popups/recorder.css
+++ b/www/widgets/tutorial-maker/popups/recorder.css
@@ -69,7 +69,8 @@
   text-wrap: wrap;
 }
 
-.icon-btn {
+#video-recorder .icon-btn,
+#video-menu .icon-btn {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -77,11 +78,13 @@
   padding: 8px 15px;
   width: fit-content;
 }
-.icon-btn svg {
+#video-recorder .icon-btn svg,
+#video-menu .icon-btn svg {
   width: 22px;
   height: 22px;
 }
-.icon-btn p {
+#video-recorder .icon-btn p,
+#video-menu .icon-btn p {
   margin: 0;
 }
 

From 33d4f2aa0e7cc9c3e16ab7b49ad838bb8b3e6048 Mon Sep 17 00:00:00 2001
From: Cthomp7 <cthomp7@saic.edu>
Date: Sat, 27 Sep 2025 20:36:40 -0500
Subject: [PATCH 08/25] added html + css for spotlights editing menu

---
 www/core/netitor                             |  2 +-
 www/core/netnet-standard-library             |  2 +-
 www/widgets/tutorial-maker/popups/index.html | 33 +++++++
 www/widgets/tutorial-maker/popups/main.css   | 94 ++++++++++++++++++++
 www/widgets/tutorial-maker/popups/main.js    |  8 ++
 5 files changed, 137 insertions(+), 2 deletions(-)

diff --git a/www/core/netitor b/www/core/netitor
index 55833d7b..b8d68e3b 160000
--- a/www/core/netitor
+++ b/www/core/netitor
@@ -1 +1 @@
-Subproject commit 55833d7b967db3a129e9d8a00118e97e434577e3
+Subproject commit b8d68e3be06e8ea5d04c8aa50620d3fbd2336a02
diff --git a/www/core/netnet-standard-library b/www/core/netnet-standard-library
index 3e4e13e4..9709473e 160000
--- a/www/core/netnet-standard-library
+++ b/www/core/netnet-standard-library
@@ -1 +1 @@
-Subproject commit 3e4e13e4d4baa3de5c531409a7ec08c523b8028e
+Subproject commit 9709473ebdfb74c957333943a165bdc25ee58a7b
diff --git a/www/widgets/tutorial-maker/popups/index.html b/www/widgets/tutorial-maker/popups/index.html
index ba173a04..29df32d1 100644
--- a/www/widgets/tutorial-maker/popups/index.html
+++ b/www/widgets/tutorial-maker/popups/index.html
@@ -150,6 +150,39 @@ <h1>Video Recorder</h1>
       <div id="kf-name-input" contentEditable="true" data-placeholder="type keyframe name..." kf-edit-tool></div>
       <button id="update-keyframe" class="pill-btn pill-btn--secondary" kf-edit-tool>update</button>
       <button id="delete-keyframe" class="pill-btn pill-btn--secondary" kf-edit-tool>delete</button>
+      <!-- spotlight edit menu -->
+      <div id="spotlight-dd" class="dd-edit dd-styles">
+        <div class="dd-title">
+          <p>spotlights</p>
+          <svg width="18" height="9" viewBox="0 0 21 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M1.5 1.5L10.5 10.5L19.5 1.5" stroke="#C3C3DB" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <div class="sptlght-edit-menu dd-styles" style="display: none;">
+          <div>
+            <div id="sptlght-line-input" contenteditable="true" data-placeholder="enter line numbers..."></div>
+            <button class="pill-btn pill-btn--secondary">enter</button>
+          </div>
+          <div class="hrztl-line"></div>
+          <div id="spot-tags">
+            <div class="spot-tag">
+              <p>12</p>
+              <div class="vrtl-line"></div>
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M14 2L2 14" stroke="#23223D" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M2 2L14 14" stroke="#23223D" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </div>
+          </div>
+          <div class="sptlght-footer">
+            <div></div>
+            <div>
+              <button class="pill-btn pill-btn--secondary red">clear all</button>
+              <button class="pill-btn pill-btn--secondary">?</button>
+            </div>
+          </div>
+        </div>
+      </div>
       <!-- <button name="nav-infos" class="pill-btn pill-btn--secondary" kf-edit-tool>?</button> -->
     </div>
     <div class="tutorial-tools">
diff --git a/www/widgets/tutorial-maker/popups/main.css b/www/widgets/tutorial-maker/popups/main.css
index b0b32998..002db89c 100644
--- a/www/widgets/tutorial-maker/popups/main.css
+++ b/www/widgets/tutorial-maker/popups/main.css
@@ -200,3 +200,97 @@ nav > div > div {
   color: var(--error-red);
   font-size: 0.8rem;
 }
+
+/* styles for spotlight dropdown menu */
+.dd-styles {
+  background: var(--bg-color);
+  border: 1px solid var(--netizen-meta);
+  border-radius: 9px;
+  padding: 10px;
+  width: 100%;
+}
+.dd-edit {
+  padding-top: 4px;
+  cursor: pointer;
+  height: 32px;
+  position: relative;
+}
+.dd-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+}
+.dd-title > p {
+  color: var(--netizen-meta);
+  font-weight: 700;
+  margin: auto 0;
+}
+.sptlght-edit-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  position: absolute;
+  top: 36;
+  left: 0;
+}
+.sptlght-edit-menu > div,
+.sptlght-footer {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  gap: 6px;
+}
+..sptlght-edit-menu > div > div,
+.sptlght-footer > div {
+  display: flex;
+  gap: 6px;
+}
+.hrztl-line {
+  height: 3px;
+  border-radius: 15px;
+  background: var(--netizen-comment);
+}
+
+#sptlght-line-input {
+  background: var(--netizen-meta);
+  border: 2px solid #9999BE;
+  border-radius: 7px;
+  font-weight: 700;
+  margin: auto 0;
+  padding: 4px 10px;
+  flex-grow: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+#sptlght-line-input:empty:before {
+    content: attr(data-placeholder);
+    color: var(--netizen-hint-shadow);
+    pointer-events: none;
+}
+.spot-tag {
+  background: var(--netizen-tag);
+  color: var(--bg-color);
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 7px;
+  border-radius: 7px;
+  width: fit-content;
+}
+.spot-tag p {
+  font-size: 1.188rem;
+  line-height: 1.188rem;
+  font-weight: 700;
+  margin: 0;
+}
+.spot-tag .vrtl-line {
+  height: 19px;
+  background-color: #AA4C9F;
+  width: 3px;
+}
+.spot-tag svg {
+  padding-bottom: 1px;
+  cursor: pointer;
+}
diff --git a/www/widgets/tutorial-maker/popups/main.js b/www/widgets/tutorial-maker/popups/main.js
index 158899c1..f14456e5 100644
--- a/www/widgets/tutorial-maker/popups/main.js
+++ b/www/widgets/tutorial-maker/popups/main.js
@@ -184,6 +184,14 @@ nn.getAll('button[name]').forEach(btn => {
 })
 nn.get('#kf-name-input').on('keydown', (e) => { e.stopPropagation() }) // prevents shortcuts when typing
 
+// opening and closing spotlight dropdown
+nn.get('#spotlight-dd').addEventListener('click', (e) => {
+  const em = nn.get('.sptlght-edit-menu')
+  if (!em.contains(e.target)) {
+    em.style.display = em.style.display === 'none' ? 'flex' : 'none'
+  }
+})
+
 // .................... window events
 
 nn.on('load', () => {

From 8bb2c6291a37f26b9ae3c89798ff3d12bc8d6b18 Mon Sep 17 00:00:00 2001
From: Cthomp7 <cthomp7@saic.edu>
Date: Sun, 28 Sep 2025 12:46:18 -0500
Subject: [PATCH 09/25] fixed minor typo in demo maker

---
 www/widgets/demo-maker/popups/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/widgets/demo-maker/popups/index.html b/www/widgets/demo-maker/popups/index.html
index dd115f56..62db2ae4 100644
--- a/www/widgets/demo-maker/popups/index.html
+++ b/www/widgets/demo-maker/popups/index.html
@@ -33,7 +33,7 @@ <h2>Demo Maker</h2>
 <div id="demo-settings" class="menu" style="opacity: 0.1">
   <div style="align-items: flex-start;">
     <button id="new" class="pill-btn pill-btn--secondary" title="create a new annotation">+ New Note</button>
-    <button id="preview" class="pill-btn pill-btn--secondary" title="preview this annotation">💬 prevew Note</button>
+    <button id="preview" class="pill-btn pill-btn--secondary" title="preview this annotation">💬 Preview Note</button>
     <reorderable-list id="note-list"></reorderable-list>
     <button id="delete" class="pill-btn pill-btn--secondary" title="delete selected annotation(s)">
       <img style="width: 14px;" src="/images/widgets/trash-meta-color.svg"> Delete Note

From 37f8ff25a782b4900fa2c9576329cba818f0e80f Mon Sep 17 00:00:00 2001
From: Cthomp7 <cthomp7@saic.edu>
Date: Sun, 28 Sep 2025 14:14:24 -0500
Subject: [PATCH 10/25] added spotlight functionality

---
 www/widgets/tutorial-maker/index.js          | 27 +++++++--
 www/widgets/tutorial-maker/popups/index.html | 18 ++----
 www/widgets/tutorial-maker/popups/main.css   |  4 +-
 www/widgets/tutorial-maker/popups/main.js    | 63 +++++++++++++++++++-
 4 files changed, 90 insertions(+), 22 deletions(-)

diff --git a/www/widgets/tutorial-maker/index.js b/www/widgets/tutorial-maker/index.js
index dc5d67d7..61ec26d6 100644
--- a/www/widgets/tutorial-maker/index.js
+++ b/www/widgets/tutorial-maker/index.js
@@ -61,6 +61,8 @@ class TutorialMaker extends Widget {
         this.hvp.toggle()
       } else if (type === 'tut-mkr-explain') { // clicked on (?) explainer button
         this._openConvo(payload)
+      } else if (type === 'tut-mkr-sptlght') {
+        this._addSpotlight(payload.spotlight)
       }
     })
 
@@ -129,7 +131,7 @@ class TutorialMaker extends Widget {
   }
 
   _updateFrame (type, data) {
-    const { timecode, name } = data
+    const { timecode, name, spotlight } = data
     let frame = this.hvp.data[type].find(k => k.timecode === timecode)
     if (type === 'keyframes') {
       if (data?.remove) { // delete keyframe
@@ -157,7 +159,7 @@ class TutorialMaker extends Widget {
         frame.name = name ?? ''
         frame.video = this._getSizeAndPosition(this.hvp)
         frame.widgets = this._getCurrentWidgets()
-        frame.netitor = this._getNetitorData()
+        frame.netitor = this._getNetitorData(spotlight)
         frame.netnet = this._getNetNetPos()
       }
     } else if (type === 'keylogs') {
@@ -173,6 +175,23 @@ class TutorialMaker extends Widget {
     return { keyframes, keylogs }
   }
 
+  _addSpotlight (ls) {
+    if ((Array.isArray(ls) && ls.length <= 0) || !ls) {
+      NNE.spotlight(null)
+    } else {
+      const lines = []
+      ls.forEach(l => {
+        if (l.includes('-')) {
+          const [start, end] = l.split('-').map(Number)
+          for (let i = start; i <= end; i++) {
+            lines.push(i)
+          }
+        } else lines.push(Number(l))
+      })
+      NNE.spotlight(lines)
+    }
+  }
+
   // ............................ helpers ......................................
 
   _openPopup (type, payload) {
@@ -269,12 +288,12 @@ class TutorialMaker extends Widget {
       .map(w => this._getSizeAndPosition(w))
   }
 
-  _getNetitorData () {
+  _getNetitorData (ls) {
     const s = NNE.cm.getScrollInfo()
     return {
       code: NNE.code,
       scrollTo: { x: s.left, y: s.top },
-      spotlight: null, // TODO: need to send data from popup
+      spotlight: ls ?? [],
       layout: NNW.layout
     }
   }
diff --git a/www/widgets/tutorial-maker/popups/index.html b/www/widgets/tutorial-maker/popups/index.html
index 29df32d1..b33e2532 100644
--- a/www/widgets/tutorial-maker/popups/index.html
+++ b/www/widgets/tutorial-maker/popups/index.html
@@ -151,7 +151,7 @@ <h1>Video Recorder</h1>
       <button id="update-keyframe" class="pill-btn pill-btn--secondary" kf-edit-tool>update</button>
       <button id="delete-keyframe" class="pill-btn pill-btn--secondary" kf-edit-tool>delete</button>
       <!-- spotlight edit menu -->
-      <div id="spotlight-dd" class="dd-edit dd-styles">
+      <div id="spotlight-dd" class="dd-edit dd-styles" kf-edit-tool>
         <div class="dd-title">
           <p>spotlights</p>
           <svg width="18" height="9" viewBox="0 0 21 12" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -161,23 +161,15 @@ <h1>Video Recorder</h1>
         <div class="sptlght-edit-menu dd-styles" style="display: none;">
           <div>
             <div id="sptlght-line-input" contenteditable="true" data-placeholder="enter line numbers..."></div>
-            <button class="pill-btn pill-btn--secondary">enter</button>
+            <button name="sptlght-enter" class="pill-btn pill-btn--secondary">enter</button>
           </div>
           <div class="hrztl-line"></div>
-          <div id="spot-tags">
-            <div class="spot-tag">
-              <p>12</p>
-              <div class="vrtl-line"></div>
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M14 2L2 14" stroke="#23223D" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-                <path d="M2 2L14 14" stroke="#23223D" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-              </svg>
-            </div>
-          </div>
+          <div id="spot-tags"></div>
           <div class="sptlght-footer">
             <div></div>
             <div>
-              <button class="pill-btn pill-btn--secondary red">clear all</button>
+              <button name="sptlght-show" class="pill-btn pill-btn--secondary red">preview</button>
+              <button name="sptlght-clear" class="pill-btn pill-btn--secondary red">clear all</button>
               <button class="pill-btn pill-btn--secondary">?</button>
             </div>
           </div>
diff --git a/www/widgets/tutorial-maker/popups/main.css b/www/widgets/tutorial-maker/popups/main.css
index 002db89c..de97cab7 100644
--- a/www/widgets/tutorial-maker/popups/main.css
+++ b/www/widgets/tutorial-maker/popups/main.css
@@ -234,14 +234,14 @@ nav > div > div {
   top: 36;
   left: 0;
 }
-.sptlght-edit-menu > div,
 .sptlght-footer {
   display: flex;
   justify-content: space-between;
   width: 100%;
   gap: 6px;
 }
-..sptlght-edit-menu > div > div,
+.sptlght-edit-menu > div > div,
+.sptlght-edit-menu > div,
 .sptlght-footer > div {
   display: flex;
   gap: 6px;
diff --git a/www/widgets/tutorial-maker/popups/main.js b/www/widgets/tutorial-maker/popups/main.js
index f14456e5..c6256f2d 100644
--- a/www/widgets/tutorial-maker/popups/main.js
+++ b/www/widgets/tutorial-maker/popups/main.js
@@ -2,6 +2,7 @@
 
 const SWP = 'TUTORIAL_MAKER' // MUST MATCH PATH IN: files-db-service-worker.js
 let TIMECODE = 0 // timeline's current timecode (ie. playhead location)
+let SPOTLIGHT = []
 let modal
 
 const msg = (type, payload) => {
@@ -127,7 +128,7 @@ function createKeyframe (kf) {
 
 function updateKeyframe () {
   const name = document.querySelector('#kf-name-input')?.textContent
-  msg('tut-mkr-get-keyframe', { name, timecode: TIMECODE })
+  msg('tut-mkr-get-keyframe', { name, timecode: TIMECODE, spotlight: SPOTLIGHT })
   nn.get(`[name="keyframe-${TIMECODE}"]`).dataset.name = name
 }
 
@@ -161,6 +162,55 @@ function showCreateOptions () {
   // TODO configure so it only displays options that aren't already created on selected timestamp
 }
 
+function addSpotlights (ls) {
+  const ts = nn.get('#spot-tags')
+  ls.forEach((l) => {
+    const t = document.createElement('div')
+    t.className = 'spot-tag'
+    t.dataset.lines = l
+    t.innerHTML = `
+      <p>${l}</p>
+      <div class="vrtl-line"></div>
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M14 2L2 14" stroke="#23223D" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M2 2L14 14" stroke="#23223D" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    `
+    t.querySelector('svg').addEventListener('click', () => removeSpotlight(l))
+    ts.appendChild(t)
+  })
+}
+
+function removeSpotlight (l) {
+  const t = nn.get(`[data-lines="${l}"]`)
+  t.remove()
+  SPOTLIGHT = SPOTLIGHT.filter(line => line !== l)
+  updateKeyframe()
+}
+
+function clearAllSpotlights () {
+  SPOTLIGHT.forEach((s) => {
+    const t = nn.get(`[data-lines="${s}"]`)
+    t.remove()
+  })
+  SPOTLIGHT = []
+  msg('tut-mkr-sptlght', { spotlight: SPOTLIGHT })
+  updateKeyframe()
+}
+
+function handleSpotlightEnter () {
+  const i = nn.get('#sptlght-line-input')
+  let ls = i.textContent
+    .split(',')
+    .map(s => s.trim())
+  i.textContent = ''
+  ls = ls.filter(l => !SPOTLIGHT.includes(l))
+  SPOTLIGHT = [...SPOTLIGHT, ...ls]
+  addSpotlights(ls)
+  msg('tut-mkr-sptlght', { spotlight: SPOTLIGHT })
+  updateKeyframe()
+}
+
 // -------------------------------------------------------- SETUP EVENT LISTENRS
 
 nn.get('#new').on('click', () => overlay('#metadata'))
@@ -182,15 +232,22 @@ nn.getAll('button[name]').forEach(btn => {
     msg('tut-mkr-explain', btn.getAttribute('name'))
   })
 })
-nn.get('#kf-name-input').on('keydown', (e) => { e.stopPropagation() }) // prevents shortcuts when typing
+
+// prevents shortcuts when typing in custom inputs
+nn.get('#kf-name-input').on('keydown', (e) => { e.stopPropagation() })
+nn.get('#sptlght-line-input').on('keydown', (e) => { e.stopPropagation() })
 
 // opening and closing spotlight dropdown
-nn.get('#spotlight-dd').addEventListener('click', (e) => {
+nn.get('#spotlight-dd').on('click', (e) => {
   const em = nn.get('.sptlght-edit-menu')
   if (!em.contains(e.target)) {
     em.style.display = em.style.display === 'none' ? 'flex' : 'none'
   }
 })
+nn.get('[name="sptlght-enter"]').on('click', () => handleSpotlightEnter())
+nn.get('[name="sptlght-show"]').on('click', () => msg('tut-mkr-sptlght', { spotlight: SPOTLIGHT }))
+nn.get('[name="sptlght-clear"]').on('click', () => clearAllSpotlights())
+// TODO add handling for pressing enter/return
 
 // .................... window events
 

From c4e0510c00a75ffe6a0de1c48917da0b9d3bedb4 Mon Sep 17 00:00:00 2001
From: Cthomp7 <cthomp7@saic.edu>
Date: Sun, 28 Sep 2025 14:43:30 -0500
Subject: [PATCH 11/25] adding handling for updating spotlights when changing
 keyframe

---
 www/widgets/tutorial-maker/popups/main.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/www/widgets/tutorial-maker/popups/main.js b/www/widgets/tutorial-maker/popups/main.js
index c6256f2d..eb4d35b6 100644
--- a/www/widgets/tutorial-maker/popups/main.js
+++ b/www/widgets/tutorial-maker/popups/main.js
@@ -88,8 +88,14 @@ function videoTimeUpdated (obj) { // runs as video plays && it's time udpates
   timeline.updatePlayhead(x)
   timeline.clearSelections()
   if (obj.keyframe) {
-    const marker = nn.get(`[name="keyframe-${obj.keyframe.timecode}"]`)
+    const { timecode, netitor } = obj.keyframe
+    const marker = nn.get(`[name="keyframe-${timecode}"]`)
     timeline.selectMarker(marker)
+    if (SPOTLIGHT) clearAllSpotlights('reset')
+    if (netitor.spotlight) {
+      SPOTLIGHT = netitor.spotlight
+      addSpotlights(netitor.spotlight)
+    }
     keyframeEditMode(true)
   } else {
     keyframeEditMode(false)
@@ -188,14 +194,14 @@ function removeSpotlight (l) {
   updateKeyframe()
 }
 
-function clearAllSpotlights () {
+function clearAllSpotlights (reset = false) {
   SPOTLIGHT.forEach((s) => {
     const t = nn.get(`[data-lines="${s}"]`)
     t.remove()
   })
   SPOTLIGHT = []
   msg('tut-mkr-sptlght', { spotlight: SPOTLIGHT })
-  updateKeyframe()
+  if (!reset) updateKeyframe()
 }
 
 function handleSpotlightEnter () {

From 6f40d665e32d2460c9ac767037840e39341af58f Mon Sep 17 00:00:00 2001
From: Cthomp7 <cthomp7@saic.edu>
Date: Sun, 28 Sep 2025 21:00:16 -0500
Subject: [PATCH 12/25] in-progress widget dropdown & widget maker UI

---
 www/widgets/tutorial-maker/popups/index.html |  65 +++++++++++-
 www/widgets/tutorial-maker/popups/main.css   | 102 +++++++++++++++++--
 www/widgets/tutorial-maker/popups/main.js    |  26 ++++-
 3 files changed, 179 insertions(+), 14 deletions(-)

diff --git a/www/widgets/tutorial-maker/popups/index.html b/www/widgets/tutorial-maker/popups/index.html
index b33e2532..33eb2445 100644
--- a/www/widgets/tutorial-maker/popups/index.html
+++ b/www/widgets/tutorial-maker/popups/index.html
@@ -122,6 +122,27 @@ <h1>Video Recorder</h1>
 </section>
 
 
+<section id="widget-maker" class="overlay" style="display: none;">
+  <div>
+    <div class="widget-maker-inputs">
+      <div>
+        <p>key:</p>
+        <div id="widget-key-input" class="tut-mkr-input-dark" contentEditable="true" data-placeholder="type widget key..." kf-edit-tool></div>
+      </div>
+      <div>
+        <p>title:</p>
+        <div id="widget-title-input" class="tut-mkr-input-dark" contentEditable="true" data-placeholder="type widget title..." kf-edit-tool></div>
+      </div>
+    </div>
+    <div id="widget-maker-html"></div>
+    <div class="widget-maker-bottom">
+      <div name="widget-maker-goback" class="pill-btn pill-btn--secondary">go back</div>
+      <div name="widget-maker-create" class="pill-btn pill-btn--secondary">create</div>
+    </div>
+  </div>
+</section>
+
+
 <nav>
   <div>
     <div class="keyframe-tools">
@@ -147,7 +168,7 @@ <h1>Video Recorder</h1>
           </div>
         </div>
       </div>
-      <div id="kf-name-input" contentEditable="true" data-placeholder="type keyframe name..." kf-edit-tool></div>
+      <div id="kf-name-input" class="tut-mkr-input-dark" contentEditable="true" data-placeholder="type keyframe name..." kf-edit-tool></div>
       <button id="update-keyframe" class="pill-btn pill-btn--secondary" kf-edit-tool>update</button>
       <button id="delete-keyframe" class="pill-btn pill-btn--secondary" kf-edit-tool>delete</button>
       <!-- spotlight edit menu -->
@@ -158,9 +179,9 @@ <h1>Video Recorder</h1>
             <path d="M1.5 1.5L10.5 10.5L19.5 1.5" stroke="#C3C3DB" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
         </div>
-        <div class="sptlght-edit-menu dd-styles" style="display: none;">
+        <div id="sptlght-edit" class="dd-edit-menu dd-styles" style="display: none;">
           <div>
-            <div id="sptlght-line-input" contenteditable="true" data-placeholder="enter line numbers..."></div>
+            <div id="sptlght-line-input" class="tut-mkr-input-light" contenteditable="true" data-placeholder="enter line numbers..."></div>
             <button name="sptlght-enter" class="pill-btn pill-btn--secondary">enter</button>
           </div>
           <div class="hrztl-line"></div>
@@ -206,7 +227,45 @@ <h1>Video Recorder</h1>
   </defs>
 </svg>
 
+<footer>
+  <div id="widget-dd" class="dd-edit dd-styles" kf-edit-tool>
+    <div class="dd-title">
+      <p>widgets</p>
+      <svg width="18" height="9" viewBox="0 0 21 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M1.5 1.5L10.5 10.5L19.5 1.5" stroke="#C3C3DB" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+      <div id="widget-options" class="dd-edit-menu-flip dd-styles" style="display: none;">
+        <button name="widget-create" class="pill-btn pill-btn--secondary">create new widget</button>
+        <div class="widget">
+          <div>
+            <!-- TODO add custom netnet purple checkbox -->
+            <input type="checkbox" name="" value="">
+            <p>widget-title</p>
+          </div>
+          <div>
+            <button type="widget-mkr-open" name="button" class="pill-btn pill-btn--secondary">edit</button>
+            <button type="widget-mkr-open" name="button" class="pill-btn pill-btn--secondary">delete</button>
+          </div>
+        </div>
+        <hr>
+        <div class="widget">
+          <div>
+            <input type="checkbox" name="" value="">
+            <p>widget-title</p>
+          </div>
+          <div>
+            <button type="widget-mkr-open" name="button" class="pill-btn pill-btn--secondary">edit</button>
+            <button type="widget-mkr-open" name="button" class="pill-btn pill-btn--secondary">delete</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <button type="widget-mkr-open" name="button" class="pill-btn pill-btn--secondary">upload assets</button>
+</footer>
+
 <script src="/nn.min.js"></script>
+<script src="/netitor.min.js"></script>
 <script src="/custom-elements/misc/reorderable-list/index.js"></script>
 <script src="/custom-elements/misc/file-drop/index.js"></script>
 <script src="jszip.min.js"></script>
diff --git a/www/widgets/tutorial-maker/popups/main.css b/www/widgets/tutorial-maker/popups/main.css
index de97cab7..d9dc7233 100644
--- a/www/widgets/tutorial-maker/popups/main.css
+++ b/www/widgets/tutorial-maker/popups/main.css
@@ -75,7 +75,7 @@ nav > div > div {
   flex: 0;
 }
 
-#kf-name-input {
+.tut-mkr-input-dark {
   border: 1px solid var(--netizen-meta);
   background: var(--bg-color);
   color: var(--netizen-meta);
@@ -90,10 +90,10 @@ nav > div > div {
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
-#kf-name-input::-webkit-scrollbar {
+.tut-mkr-input-dark::-webkit-scrollbar {
   display: none;
 }
-#kf-name-input:empty:before {
+.tut-mkr-input-dark:empty:before {
     content: attr(data-placeholder);
     color: var(--netizen-hint-shadow);
     pointer-events: none;
@@ -226,7 +226,8 @@ nav > div > div {
   font-weight: 700;
   margin: auto 0;
 }
-.sptlght-edit-menu {
+.dd-edit-menu {
+  cursor: default;
   display: flex;
   flex-direction: column;
   gap: 10px;
@@ -240,8 +241,8 @@ nav > div > div {
   width: 100%;
   gap: 6px;
 }
-.sptlght-edit-menu > div > div,
-.sptlght-edit-menu > div,
+.dd-edit-menu > div > div,
+.dd-edit-menu > div,
 .sptlght-footer > div {
   display: flex;
   gap: 6px;
@@ -252,7 +253,7 @@ nav > div > div {
   background: var(--netizen-comment);
 }
 
-#sptlght-line-input {
+.tut-mkr-input-light {
   background: var(--netizen-meta);
   border: 2px solid #9999BE;
   border-radius: 7px;
@@ -264,7 +265,7 @@ nav > div > div {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-#sptlght-line-input:empty:before {
+.tut-mkr-input-light:empty:before {
     content: attr(data-placeholder);
     color: var(--netizen-hint-shadow);
     pointer-events: none;
@@ -294,3 +295,88 @@ nav > div > div {
   padding-bottom: 1px;
   cursor: pointer;
 }
+
+/* footer css */
+footer {
+  position: absolute;
+  z-index: 2;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: var(--bg-color);
+  padding: 10px;
+  display: flex;
+  gap: 7px;
+}
+#widget-dd {
+  max-width: 330px;
+}
+#widget-dd .dd-edit-menu-flip {
+  cursor: default;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  position: absolute;
+  left: 0;
+  bottom: 36;
+  max-height: 155px;
+  overflow-y: scroll;
+}
+.widget {
+  display: flex;
+  justify-content: space-between;
+}
+.widget > div {
+  display: flex;
+  gap: 7px;
+  align-items: center;
+}
+.widget p {
+  color: var(--netizen-meta);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-left: 3px;
+  font-size: 1.1rem;
+}
+.widget-options hr {
+  border: solid 1px var(--netizen-comment);
+}
+
+/* widget maker css */
+#widget-maker > div {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  height: 100%;
+}
+#widget-maker p {
+  color: var(--netizen-meta);
+  font-size: 1.1rem;
+  font-weight: 700;
+}
+.widget-maker-inputs,
+.widget-maker-inputs > div {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  width: 100%;
+}
+.widget-maker-inputs .tut-mkr-input-dark {
+  flex-grow: 1;
+  max-width: none;
+}
+#widget-maker-html {
+  border-radius: 15px;
+  border: 2px solid var(--fg-color);
+  padding: 10px;
+  flex-grow: 1;
+}
+#widget-maker-html > * {
+  border-radius: 12px;
+}
+.widget-maker-bottom {
+  display: flex;
+  justify-content: space-between;
+  flex: 0;
+}
diff --git a/www/widgets/tutorial-maker/popups/main.js b/www/widgets/tutorial-maker/popups/main.js
index eb4d35b6..5b1989f0 100644
--- a/www/widgets/tutorial-maker/popups/main.js
+++ b/www/widgets/tutorial-maker/popups/main.js
@@ -1,4 +1,4 @@
-/* global nn timeline zipper recorder FILES metadata HTMLElement customElements */
+/* global nn timeline zipper recorder FILES metadata HTMLElement customElements Netitor */
 
 const SWP = 'TUTORIAL_MAKER' // MUST MATCH PATH IN: files-db-service-worker.js
 let TIMECODE = 0 // timeline's current timecode (ie. playhead location)
@@ -21,7 +21,7 @@ function overlay (ele) {
   } else if (ele === '#video-menu') {
     window.resizeTo(420, 850)
     recorder.initMenu()
-  }
+  } else if (ele === '#widget-maker') window.resizeTo(610, 380)
 }
 
 function openTutorial () {
@@ -245,7 +245,7 @@ nn.get('#sptlght-line-input').on('keydown', (e) => { e.stopPropagation() })
 
 // opening and closing spotlight dropdown
 nn.get('#spotlight-dd').on('click', (e) => {
-  const em = nn.get('.sptlght-edit-menu')
+  const em = nn.get('#sptlght-edit')
   if (!em.contains(e.target)) {
     em.style.display = em.style.display === 'none' ? 'flex' : 'none'
   }
@@ -255,6 +255,15 @@ nn.get('[name="sptlght-show"]').on('click', () => msg('tut-mkr-sptlght', { spotl
 nn.get('[name="sptlght-clear"]').on('click', () => clearAllSpotlights())
 // TODO add handling for pressing enter/return
 
+nn.get('#widget-dd').on('click', (e) => {
+  const em = nn.get('#widget-options')
+  if (!em.contains(e.target) || e.target?.name === 'widget-create') {
+    em.style.display = em.style.display === 'none' ? 'flex' : 'none'
+  }
+})
+nn.get('[name="widget-create"]').on('click', () => overlay('#widget-maker'))
+nn.get('[name="widget-maker-goback"]').on('click', () => overlay(null))
+
 // .................... window events
 
 nn.on('load', () => {
@@ -269,6 +278,17 @@ nn.on('load', () => {
   const m = document.createElement('tutorial-modal')
   nn.get('body').appendChild(m)
   modal = m
+
+  // init netitor for widget maker
+  const ne = new Netitor({
+    ele: '#widget-maker-html',
+    code: '...',
+    wrap: true,
+    hint: false,
+    lint: false,
+    language: 'html'
+  })
+  ne.cm.setOption('lineNumbers', false)
 })
 
 nn.on('resize', () => {

From 38ee38c48ac5f73a97a0f0855d435c59510da76e Mon Sep 17 00:00:00 2001
From: Cthomp7 <cthomp7@saic.edu>
Date: Sun, 19 Oct 2025 14:12:55 -0500
Subject: [PATCH 13/25] in-progress widget maker functionality

---
 www/widgets/tutorial-maker/index.js          |  50 +++++
 www/widgets/tutorial-maker/popups/index.html |  24 +--
 www/widgets/tutorial-maker/popups/main.js    | 204 +++++++++++++++++--
 3 files changed, 237 insertions(+), 41 deletions(-)

diff --git a/www/widgets/tutorial-maker/index.js b/www/widgets/tutorial-maker/index.js
index 61ec26d6..54d6403a 100644
--- a/www/widgets/tutorial-maker/index.js
+++ b/www/widgets/tutorial-maker/index.js
@@ -63,6 +63,12 @@ class TutorialMaker extends Widget {
         this._openConvo(payload)
       } else if (type === 'tut-mkr-sptlght') {
         this._addSpotlight(payload.spotlight)
+      } else if (type === 'tut-mkr-update-widget') {
+        this._updateWidget(payload.widget, payload.remove)
+      } else if (type === 'tut-mkr-update-widget-state') {
+        this._updateWidgetState(payload.widget)
+      } else if (type === 'tut-mkr-open-widget') {
+        this._openWidget(payload.widget, payload.open)
       }
     })
 
@@ -192,6 +198,50 @@ class TutorialMaker extends Widget {
     }
   }
 
+  _openWidget (widget, open) {
+    const { key, title, innerHTML } = widget
+    if (WIDGETS[key] && open) WIDGETS[key].open()
+    else if (WIDGETS[key] && !open) WIDGETS[key].close()
+    else if (open) {
+      WIDGETS.create({ key, title, innerHTML })
+      WIDGETS[key].open()
+    }
+  }
+
+  // update widget in HVP
+  _updateWidget (widget, remove) {
+    const { key, title, innerHTML, type } = widget
+    if (remove) { // remove widget
+      delete this.hvp.data.widgets[key]
+    } else if (widget.oldKey) { // save over existent widget
+      this.hvp.data.widgets[widget.oldKey] = { key, title, innerHTML, type }
+      WIDGETS[widget.oldKey] = { key, title, innerHTML, type }
+    } else { // create new widget
+      this.hvp.data.widgets[key] = { key, title, innerHTML, type }
+      WIDGETS[key] = { key, title, innerHTML, type }
+    }
+  }
+
+  // updates widgets state in netnet (WIDGETS)
+  _updateWidgetState (widget) {
+    const { key, title, innerHTML } = widget
+    const k = widget.oldKey || key
+    if (widget.oldKey && widget.oldKey !== key && WIDGETS[k]) {
+      // remove old widget and open new widget if key changed
+      WIDGETS[k].close()
+      delete WIDGETS[k]
+      WIDGETS.create({ key, title, innerHTML })
+      WIDGETS.open(key)
+    } else if (WIDGETS[k]) {
+      WIDGETS[k].key = key
+      WIDGETS[k].title = title
+      WIDGETS[k].innerHTML = innerHTML
+    } else {
+      WIDGETS.create({ key, title, innerHTML })
+      WIDGETS.open(key)
+    }
+  }
+
   // ............................ helpers ......................................
 
   _openPopup (type, payload) {
diff --git a/www/widgets/tutorial-maker/popups/index.html b/www/widgets/tutorial-maker/popups/index.html
index 33eb2445..416d9d9a 100644
--- a/www/widgets/tutorial-maker/popups/index.html
+++ b/www/widgets/tutorial-maker/popups/index.html
@@ -137,7 +137,7 @@ <h1>Video Recorder</h1>
     <div id="widget-maker-html"></div>
     <div class="widget-maker-bottom">
       <div name="widget-maker-goback" class="pill-btn pill-btn--secondary">go back</div>
-      <div name="widget-maker-create" class="pill-btn pill-btn--secondary">create</div>
+      <div name="widget-maker-update" class="pill-btn pill-btn--secondary">create</div>
     </div>
   </div>
 </section>
@@ -236,28 +236,6 @@ <h1>Video Recorder</h1>
       </svg>
       <div id="widget-options" class="dd-edit-menu-flip dd-styles" style="display: none;">
         <button name="widget-create" class="pill-btn pill-btn--secondary">create new widget</button>
-        <div class="widget">
-          <div>
-            <!-- TODO add custom netnet purple checkbox -->
-            <input type="checkbox" name="" value="">
-            <p>widget-title</p>
-          </div>
-          <div>
-            <button type="widget-mkr-open" name="button" class="pill-btn pill-btn--secondary">edit</button>
-            <button type="widget-mkr-open" name="button" class="pill-btn pill-btn--secondary">delete</button>
-          </div>
-        </div>
-        <hr>
-        <div class="widget">
-          <div>
-            <input type="checkbox" name="" value="">
-            <p>widget-title</p>
-          </div>
-          <div>
-            <button type="widget-mkr-open" name="button" class="pill-btn pill-btn--secondary">edit</button>
-            <button type="widget-mkr-open" name="button" class="pill-btn pill-btn--secondary">delete</button>
-          </div>
-        </div>
       </div>
     </div>
   </div>
diff --git a/www/widgets/tutorial-maker/popups/main.js b/www/widgets/tutorial-maker/popups/main.js
index 5b1989f0..cab2003f 100644
--- a/www/widgets/tutorial-maker/popups/main.js
+++ b/www/widgets/tutorial-maker/popups/main.js
@@ -4,6 +4,7 @@ const SWP = 'TUTORIAL_MAKER' // MUST MATCH PATH IN: files-db-service-worker.js
 let TIMECODE = 0 // timeline's current timecode (ie. playhead location)
 let SPOTLIGHT = []
 let modal
+let WN // neitior instance for widget maker
 
 const msg = (type, payload) => {
   window.opener.postMessage({ type, payload }, window.origin)
@@ -21,7 +22,7 @@ function overlay (ele) {
   } else if (ele === '#video-menu') {
     window.resizeTo(420, 850)
     recorder.initMenu()
-  } else if (ele === '#widget-maker') window.resizeTo(610, 380)
+  } else if (ele === '#widget-maker') window.resizeTo(610, 400)
 }
 
 function openTutorial () {
@@ -49,6 +50,10 @@ function openTutorial () {
 
     tut.videoBlob = FILES.readFile(metadata.id + '.mp4')
     msg('tut-mkr-opened-tutorial', tut) // let main tutorial-maker widget know
+
+    // TODO: load widgets into widget editor
+    loadWidgets(tut.widgets)
+
     overlay(null) // remove overlay
   })
 }
@@ -117,6 +122,22 @@ function openMetadata (metadata) {
   overlay('#metadata')
 }
 
+function showCreateOptions () {
+  const o = nn.get('#create-options')
+  const s = nn.get('#create-marker svg')
+  const c = o.style.display === 'flex'
+  if (!c) {
+    o.style.display = 'flex'
+    s.style.transform = 'rotate(45deg)'
+  } else {
+    o.style.display = 'none'
+    s.style.removeProperty('transform')
+  }
+  // TODO configure so it only displays options that aren't already created on selected timestamp
+}
+
+// ---------------------------------------------------------- KEYFRAME FUNCTIONS
+
 function addMarker (k, type) {
   const t = k.timecode
   const x = t / metadata.duration * 100
@@ -130,6 +151,7 @@ function addMarker (k, type) {
 function createKeyframe (kf) {
   addMarker(kf, 'keyframe')
   timeline.updateMarkers()
+  // TODO: show keyframe edit menu
 }
 
 function updateKeyframe () {
@@ -154,19 +176,7 @@ function setNameInput (tc) {
   nn.get('#kf-name-input').textContent = name
 }
 
-function showCreateOptions () {
-  const o = nn.get('#create-options')
-  const s = nn.get('#create-marker svg')
-  const c = o.style.display === 'flex'
-  if (!c) {
-    o.style.display = 'flex'
-    s.style.transform = 'rotate(45deg)'
-  } else {
-    o.style.display = 'none'
-    s.style.removeProperty('transform')
-  }
-  // TODO configure so it only displays options that aren't already created on selected timestamp
-}
+// --------------------------------------------------------- SPOTLIGHT FUNCTIONS
 
 function addSpotlights (ls) {
   const ts = nn.get('#spot-tags')
@@ -217,6 +227,156 @@ function handleSpotlightEnter () {
   updateKeyframe()
 }
 
+// ------------------------------------------------------------ WIDGET FUNCTIONS
+
+// create widget option in widget dropdown menu
+function addWidgetOption (w) {
+  const d = document.createElement('div')
+  d.className = 'widget'
+
+  // create checkbox and title
+  const d1 = document.createElement('div')
+  const box = document.createElement('input')
+  box.type = 'checkbox'
+  box.name = `${w.key}-checkbox`
+  box.value = false
+  const p = document.createElement('p')
+  p.textContent = w.key
+  d1.appendChild(box)
+  d1.appendChild(p)
+
+  // create edit and delete buttons
+  const d2 = document.createElement('div')
+  const ebtn = document.createElement('button')
+  ebtn.textContent = 'edit'
+  ebtn.name = `${w.key}-edit`
+  ebtn.className = 'pill-btn pill-btn--secondary'
+  const dbtn = document.createElement('button')
+  dbtn.textContent = 'delete'
+  dbtn.name = `${w.key}-delete`
+  dbtn.className = 'pill-btn pill-btn--secondary'
+  d2.appendChild(ebtn)
+  d2.appendChild(dbtn)
+
+  function checkboxSelected (e, key) {
+    if (e.target.checked) msg('tut-mkr-open-widget', { widget: w, open: true })
+    else msg('tut-mkr-open-widget', { widget: w, open: false })
+  }
+
+  box.addEventListener('change', (e) => checkboxSelected(e, w.key))
+  ebtn.addEventListener('click', () => editWidget(w))
+  dbtn.addEventListener('click', () => deleteWidget(w, d))
+
+  d.appendChild(d1)
+  d.appendChild(d2)
+  nn.get('#widget-options').appendChild(d)
+}
+
+function createWidget () {
+  nn.get('[name="widget-maker-update"]').textContent = 'create'
+  overlay('#widget-maker')
+  nn.get('#widget-maker').dataset.widget = 'new-widget'
+  // open new widget in netnet
+  msg('tut-mkr-open-widget', {
+    widget: {
+      key: 'new-widget',
+      title: 'new widget',
+      innerHTML: '...'
+    },
+    open: true
+  })
+}
+
+function updateWidget () {
+  const key = nn.get('#widget-key-input').textContent
+  // TODO: make sure it is a astring with no spaces
+  // TODO: check if that widget key is already in the netnet system
+  const title = nn.get('#widget-title-input').textContent
+  const innerHTML = WN.code
+  const widget = { key, title, innerHTML, type: 'Widget' }
+
+  // if editing an existent widget, send old widget key
+  if (nn.get('[name="widget-maker-update"]').textContent === 'update') {
+    const maker = nn.get('#widget-maker')
+    widget.oldKey = maker.dataset.widget
+    maker.dataset.widget = key // set to new key
+  }
+  msg('tut-mkr-update-widget', { widget })
+  closeWidgetMaker()
+}
+
+function editWidget (w) {
+  // set widget to active and open in netnet
+  nn.get(`[name="${w.key}-checkbox"]`).checked = true
+  msg('tut-mkr-open-widget', { widget: w, open: true })
+  // load widget data into widget maker
+  nn.get('#widget-maker').dataset.widget = w.key
+  nn.get('#widget-key-input').textContent = w.key
+  nn.get('#widget-title-input').textContent = w.title
+  WN.code = w.innerHTML
+  nn.get('[name="widget-maker-update"]').textContent = 'update'
+  overlay('#widget-maker')
+}
+
+function deleteWidget (w, ele) {
+  // TODO: do we want to confirm with users if they want to remove a widget?
+  msg('tut-mkr-update-widget', { widget: w, remove: true })
+  ele.remove()
+}
+
+function updateWidgetState (code) {
+  const key = nn.get('#widget-key-input').textContent
+  const title = nn.get('#widget-title-input').textContent
+  const innerHTML = code || WN.code
+  if (key && title && innerHTML) {
+    // fetch old key incase it changed
+    const maker = nn.get('#widget-maker')
+    const oldKey = maker.dataset.widget
+    if (oldKey !== key) {
+      msg('tut-mkr-update-widget-state', { widget: { key, title, innerHTML, oldKey } })
+      maker.dataset.widget = key // set to new key
+    }
+    msg('tut-mkr-update-widget-state', { widget: { key, title, innerHTML } })
+  }
+}
+
+function loadWidgets (widgets) {
+  Object.keys(widgets).forEach(key => addWidgetOption(widgets[key]))
+}
+
+function closeWidgetMaker () {
+  overlay(null)
+  // clear widget maker inputs
+  nn.get('#widget-key-input').textContent = ''
+  nn.get('#widget-title-input').textContent = ''
+  WN.code = '...'
+}
+
+function debounce (fn, wait, { leading = false, trailing = true } = {}) {
+  let timer = null
+  let lastArgs
+  let lastThis
+  let invoked = false
+  const invoke = () => {
+    timer = null
+    if (trailing && (!leading || invoked)) {
+      fn.apply(lastThis, lastArgs)
+    }
+    invoked = false
+  }
+  return function debounced (...args) {
+    lastArgs = args
+    lastThis = this
+    if (timer) clearTimeout(timer)
+    else if (leading && !invoked) {
+      fn.apply(lastThis, lastArgs) // call immediately once
+      invoked = true
+    }
+    timer = setTimeout(invoke, wait)
+  }
+}
+
+
 // -------------------------------------------------------- SETUP EVENT LISTENRS
 
 nn.get('#new').on('click', () => overlay('#metadata'))
@@ -242,6 +402,8 @@ nn.getAll('button[name]').forEach(btn => {
 // prevents shortcuts when typing in custom inputs
 nn.get('#kf-name-input').on('keydown', (e) => { e.stopPropagation() })
 nn.get('#sptlght-line-input').on('keydown', (e) => { e.stopPropagation() })
+nn.get('#widget-key-input').on('keydown', (e) => { e.stopPropagation() })
+nn.get('#widget-title-input').on('keydown', (e) => { e.stopPropagation() })
 
 // opening and closing spotlight dropdown
 nn.get('#spotlight-dd').on('click', (e) => {
@@ -261,8 +423,11 @@ nn.get('#widget-dd').on('click', (e) => {
     em.style.display = em.style.display === 'none' ? 'flex' : 'none'
   }
 })
-nn.get('[name="widget-create"]').on('click', () => overlay('#widget-maker'))
-nn.get('[name="widget-maker-goback"]').on('click', () => overlay(null))
+nn.get('[name="widget-create"]').on('click', () => createWidget())
+nn.get('[name="widget-maker-goback"]').on('click', () => closeWidgetMaker())
+nn.get('[name="widget-maker-update"]').on('click', () => updateWidget())
+nn.get('#widget-key-input').on('blur', () => updateWidgetState())
+nn.get('#widget-title-input').on('blur', () => updateWidgetState())
 
 // .................... window events
 
@@ -280,7 +445,7 @@ nn.on('load', () => {
   modal = m
 
   // init netitor for widget maker
-  const ne = new Netitor({
+  WN = new Netitor({
     ele: '#widget-maker-html',
     code: '...',
     wrap: true,
@@ -288,7 +453,10 @@ nn.on('load', () => {
     lint: false,
     language: 'html'
   })
-  ne.cm.setOption('lineNumbers', false)
+  WN.cm.setOption('lineNumbers', false)
+  const debouncedUpdate = debounce(updateWidgetState, 1500)
+  WN.on('code-update', (code) => debouncedUpdate(code))
+  // TODO: fix where if you try to ctrl + arrow doesn't jump to different keyframes
 })
 
 nn.on('resize', () => {

From 944df8eee17f696d891f30cdec956060c9dc142d Mon Sep 17 00:00:00 2001
From: Cthomp7 <cthomp7@saic.edu>
Date: Sun, 19 Oct 2025 15:38:33 -0500
Subject: [PATCH 14/25] updated netitor & netnet-standard-library modules

---
 www/core/netitor                 | 2 +-
 www/core/netnet-standard-library | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/www/core/netitor b/www/core/netitor
index b8d68e3b..936f6a47 160000
--- a/www/core/netitor
+++ b/www/core/netitor
@@ -1 +1 @@
-Subproject commit b8d68e3be06e8ea5d04c8aa50620d3fbd2336a02
+Subproject commit 936f6a47f1395aed4809d759faad446e80529647
diff --git a/www/core/netnet-standard-library b/www/core/netnet-standard-library
index 9709473e..0d50874b 160000
--- a/www/core/netnet-standard-library
+++ b/www/core/netnet-standard-library
@@ -1 +1 @@
-Subproject commit 9709473ebdfb74c957333943a165bdc25ee58a7b
+Subproject commit 0d50874bd353f328cc5cdeec5351bd89fc103004

From 4d3ef46cde7f11a8832419fd581100ba5cc2056c Mon Sep 17 00:00:00 2001
From: Cthomp7 <cthomp7@saic.edu>
Date: Sun, 19 Oct 2025 16:55:47 -0500
Subject: [PATCH 15/25] added handling for closing widget maker with unsaved
 changes

---
 www/widgets/tutorial-maker/popups/index.html |  4 +++
 www/widgets/tutorial-maker/popups/main.css   | 35 ++++++++++++++++++
 www/widgets/tutorial-maker/popups/main.js    | 37 ++++++++++++++++----
 3 files changed, 69 insertions(+), 7 deletions(-)

diff --git a/www/widgets/tutorial-maker/popups/index.html b/www/widgets/tutorial-maker/popups/index.html
index 416d9d9a..a49c459a 100644
--- a/www/widgets/tutorial-maker/popups/index.html
+++ b/www/widgets/tutorial-maker/popups/index.html
@@ -11,6 +11,10 @@
 <link rel="stylesheet" href="recorder.css">
 <link rel="stylesheet" href="timeline.css">
 
+<div id="modal" class="custom-modal" style="display: none;">
+  <div class="custom-modal-inner"></div>
+</div>
+
 <section id="start" class="overlay">
   <button id="new" class="pill-btn pill-btn--secondary">new</button>
   <button id="open" class="pill-btn pil-btn--secondary">open</button>
diff --git a/www/widgets/tutorial-maker/popups/main.css b/www/widgets/tutorial-maker/popups/main.css
index d9dc7233..0e75b47f 100644
--- a/www/widgets/tutorial-maker/popups/main.css
+++ b/www/widgets/tutorial-maker/popups/main.css
@@ -201,6 +201,41 @@ nav > div > div {
   font-size: 0.8rem;
 }
 
+.pill-btn--red:hover {
+  background: var(--error-red);
+  border-color: var(--error-red);
+}
+
+/* styles for custom modal */
+.custom-modal {
+  width: 100vw;
+  height: 100vh;
+  background: rgba(28, 28, 54, 0.69);
+  z-index: 110;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.custom-modal-inner {
+  background: var(--bg-color);
+  border: 3px solid var(--netizen-meta);
+  border-radius: 10px;
+  height: fit-content;
+  padding: 15px;
+  color: var(--netizen-meta);
+  text-align: center;
+  display: flex;
+  gap: 10px;
+  flex-direction: column;
+  align-items: center;
+  max-width: 360px;
+}
+.custom-modal-inner.warning {
+  border-color: var(--error-red);
+}
+
 /* styles for spotlight dropdown menu */
 .dd-styles {
   background: var(--bg-color);
diff --git a/www/widgets/tutorial-maker/popups/main.js b/www/widgets/tutorial-maker/popups/main.js
index cab2003f..854e4ac6 100644
--- a/www/widgets/tutorial-maker/popups/main.js
+++ b/www/widgets/tutorial-maker/popups/main.js
@@ -5,6 +5,7 @@ let TIMECODE = 0 // timeline's current timecode (ie. playhead location)
 let SPOTLIGHT = []
 let modal
 let WN // neitior instance for widget maker
+let WIDGET // previous widget state
 
 const msg = (type, payload) => {
   window.opener.postMessage({ type, payload }, window.origin)
@@ -302,7 +303,7 @@ function updateWidget () {
     maker.dataset.widget = key // set to new key
   }
   msg('tut-mkr-update-widget', { widget })
-  closeWidgetMaker()
+  closeWidgetMaker('true')
 }
 
 function editWidget (w) {
@@ -314,6 +315,7 @@ function editWidget (w) {
   nn.get('#widget-key-input').textContent = w.key
   nn.get('#widget-title-input').textContent = w.title
   WN.code = w.innerHTML
+  WIDGET = w // store current widget state
   nn.get('[name="widget-maker-update"]').textContent = 'update'
   overlay('#widget-maker')
 }
@@ -344,12 +346,33 @@ function loadWidgets (widgets) {
   Object.keys(widgets).forEach(key => addWidgetOption(widgets[key]))
 }
 
-function closeWidgetMaker () {
-  overlay(null)
-  // clear widget maker inputs
-  nn.get('#widget-key-input').textContent = ''
-  nn.get('#widget-title-input').textContent = ''
-  WN.code = '...'
+function closeWidgetMaker (updated = false) {
+  const key = nn.get('#widget-key-input').textContent
+  const title = nn.get('#widget-title-input').textContent
+  const innerHTML = WN.code
+  const currentWidget = { key, title, innerHTML, type: 'Widget' }
+  if (updated || JSON.stringify(WIDGET) === JSON.stringify(currentWidget)) {
+    // close widget maker & clear inputs
+    overlay(null)
+    nn.get('#modal').css('display', 'none')
+    nn.get('#widget-key-input').textContent = ''
+    nn.get('#widget-title-input').textContent = ''
+    WN.code = '...'
+  } else {
+    // double-check users want to close without saving changes
+    const modal = nn.get('.custom-modal-inner')
+    modal.classList.add('warning')
+    modal.innerHTML = `
+    <p>You have unsaved changes that you’re about to lose. Are you sure you want to proceed?</p>
+    <div class="custom-modal-buttons">
+      <button name="wgt-mkr-discard" class="pill-btn pill-btn--secondary pill-btn--red">Discard Changes</button>
+      <button name="wgt-mkr-cancel" class="pill-btn pill-btn--secondary">Cancel</button>
+    </div>
+    `
+    nn.get('[name="wgt-mkr-discard"]').on('click', () => closeWidgetMaker(true))
+    nn.get('[name="wgt-mkr-cancel"]').on('click', () => nn.get('#modal').css('display', 'none'))
+    nn.get('#modal').css('display', 'flex')
+  }
 }
 
 function debounce (fn, wait, { leading = false, trailing = true } = {}) {

From 3734adbb88ea93654f7b653e6f95d2990348f9e4 Mon Sep 17 00:00:00 2001
From: Cthomp7 <cthomp7@saic.edu>
Date: Sun, 19 Oct 2025 17:45:36 -0500
Subject: [PATCH 16/25] added WIDGETS.delete method && fixed _updateWidgetState

---
 www/widgets/index.js                | 10 ++++++++++
 www/widgets/tutorial-maker/index.js |  7 +++----
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/www/widgets/index.js b/www/widgets/index.js
index 9a70707d..89c6cd5c 100644
--- a/www/widgets/index.js
+++ b/www/widgets/index.js
@@ -52,6 +52,16 @@ window.WIDGETS = { // GLOBAL WIDGETS OBJECT
   close: (key) => {
     if (WIDGETS.instantiated.includes(key)) WIDGETS[key].close()
     else console.error(`WIDGETS: ${key} was never instantiated`)
+  },
+  delete: (key, cb) => {
+    if (WIDGETS.instantiated.includes(key) && WIDGETS[key]) {
+      WIDGETS[key].close()
+      delete WIDGETS[key]
+      const i = WIDGETS.instantiated.indexOf(key)
+      if (i !== -1) WIDGETS.instantiated.splice(i, 1)
+    } else {
+      console.error(`Widget (${key}) does not exist.`)
+    }
   }
 }
 
diff --git a/www/widgets/tutorial-maker/index.js b/www/widgets/tutorial-maker/index.js
index 54d6403a..431785ed 100644
--- a/www/widgets/tutorial-maker/index.js
+++ b/www/widgets/tutorial-maker/index.js
@@ -228,17 +228,16 @@ class TutorialMaker extends Widget {
     const k = widget.oldKey || key
     if (widget.oldKey && widget.oldKey !== key && WIDGETS[k]) {
       // remove old widget and open new widget if key changed
-      WIDGETS[k].close()
-      delete WIDGETS[k]
+      WIDGETS.delete(k)
       WIDGETS.create({ key, title, innerHTML })
-      WIDGETS.open(key)
+      WIDGETS[key].open()
     } else if (WIDGETS[k]) {
       WIDGETS[k].key = key
       WIDGETS[k].title = title
       WIDGETS[k].innerHTML = innerHTML
     } else {
       WIDGETS.create({ key, title, innerHTML })
-      WIDGETS.open(key)
+      WIDGETS[key].open()
     }
   }
 

From 05d3b99d636475065e798b216b8ca97badc3050c Mon Sep 17 00:00:00 2001
From: Cthomp7 <cthomp7@saic.edu>
Date: Sun, 19 Oct 2025 19:56:07 -0500
Subject: [PATCH 17/25] fixed widget updating issues

---
 www/widgets/tutorial-maker/index.js       |  3 +--
 www/widgets/tutorial-maker/popups/main.js | 15 +++++++++++----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/www/widgets/tutorial-maker/index.js b/www/widgets/tutorial-maker/index.js
index 431785ed..c1498e3d 100644
--- a/www/widgets/tutorial-maker/index.js
+++ b/www/widgets/tutorial-maker/index.js
@@ -213,12 +213,11 @@ class TutorialMaker extends Widget {
     const { key, title, innerHTML, type } = widget
     if (remove) { // remove widget
       delete this.hvp.data.widgets[key]
+      WIDGETS.delete(key)
     } else if (widget.oldKey) { // save over existent widget
       this.hvp.data.widgets[widget.oldKey] = { key, title, innerHTML, type }
-      WIDGETS[widget.oldKey] = { key, title, innerHTML, type }
     } else { // create new widget
       this.hvp.data.widgets[key] = { key, title, innerHTML, type }
-      WIDGETS[key] = { key, title, innerHTML, type }
     }
   }
 
diff --git a/www/widgets/tutorial-maker/popups/main.js b/www/widgets/tutorial-maker/popups/main.js
index 854e4ac6..e9c26849 100644
--- a/www/widgets/tutorial-maker/popups/main.js
+++ b/www/widgets/tutorial-maker/popups/main.js
@@ -231,7 +231,7 @@ function handleSpotlightEnter () {
 // ------------------------------------------------------------ WIDGET FUNCTIONS
 
 // create widget option in widget dropdown menu
-function addWidgetOption (w) {
+function addWidgetOption (w, opened = false) {
   const d = document.createElement('div')
   d.className = 'widget'
 
@@ -240,7 +240,7 @@ function addWidgetOption (w) {
   const box = document.createElement('input')
   box.type = 'checkbox'
   box.name = `${w.key}-checkbox`
-  box.value = false
+  box.checked = opened
   const p = document.createElement('p')
   p.textContent = w.key
   d1.appendChild(box)
@@ -266,6 +266,7 @@ function addWidgetOption (w) {
 
   box.addEventListener('change', (e) => checkboxSelected(e, w.key))
   ebtn.addEventListener('click', () => editWidget(w))
+  // TODO: need to fix where edit widget state updates after already editing
   dbtn.addEventListener('click', () => deleteWidget(w, d))
 
   d.appendChild(d1)
@@ -289,13 +290,17 @@ function createWidget () {
 }
 
 function updateWidget () {
+  updateWidgetState()
   const key = nn.get('#widget-key-input').textContent
-  // TODO: make sure it is a astring with no spaces
-  // TODO: check if that widget key is already in the netnet system
   const title = nn.get('#widget-title-input').textContent
   const innerHTML = WN.code
   const widget = { key, title, innerHTML, type: 'Widget' }
 
+  // if widget is new, add it to the dropdown options
+  if (nn.get('[name="widget-maker-update"]').textContent === 'create') {
+    addWidgetOption(widget, true)
+  }
+
   // if editing an existent widget, send old widget key
   if (nn.get('[name="widget-maker-update"]').textContent === 'update') {
     const maker = nn.get('#widget-maker')
@@ -327,6 +332,8 @@ function deleteWidget (w, ele) {
 }
 
 function updateWidgetState (code) {
+  // TODO: make sure it is a astring with no spaces
+  // TODO: check if that widget key is already in the netnet system
   const key = nn.get('#widget-key-input').textContent
   const title = nn.get('#widget-title-input').textContent
   const innerHTML = code || WN.code

From a51ab88f3e15892f6a24d920aec2cfc6a3654caa Mon Sep 17 00:00:00 2001
From: Cthomp7 <cthomp7@saic.edu>
Date: Tue, 4 Nov 2025 19:27:17 -0600
Subject: [PATCH 18/25] added upload overlay for asset uploading

---
 www/core/netitor                             |  2 +-
 www/widgets/tutorial-maker/popups/index.html | 15 ++++-
 www/widgets/tutorial-maker/popups/main.css   | 33 +++++++++
 www/widgets/tutorial-maker/popups/main.js    | 70 +++++++++++++++++++-
 4 files changed, 116 insertions(+), 4 deletions(-)

diff --git a/www/core/netitor b/www/core/netitor
index 80122d06..936f6a47 160000
--- a/www/core/netitor
+++ b/www/core/netitor
@@ -1 +1 @@
-Subproject commit 80122d06a535284c8199fcdd0fb1f5b59b3a9d79
+Subproject commit 936f6a47f1395aed4809d759faad446e80529647
diff --git a/www/widgets/tutorial-maker/popups/index.html b/www/widgets/tutorial-maker/popups/index.html
index a49c459a..c1485fee 100644
--- a/www/widgets/tutorial-maker/popups/index.html
+++ b/www/widgets/tutorial-maker/popups/index.html
@@ -125,6 +125,19 @@ <h1>Video Recorder</h1>
   </div>
 </section>
 
+<!-- style="display: none;" -->
+<section id="upload" class="overlay" style="display: none;">
+  <div style="display: flex; justify-content: space-between; margin-bottom: 15px;">
+    <div name="upload-goback" class="pill-btn pill-btn--secondary">go back</div>
+    <button class="pill-btn pill-btn--secondary" style="padding-bottom: 3px;">?</button>
+  </div>
+  <div class="file-drop-cont">
+    <file-drop accept=".png, .jpg, .gif" maxFiles="100" maxSize="1GB"></file-drop>
+  </div>
+  <p>Uploaded Assets</p>
+  <div class="uploaded-assets"></div>
+</section>
+
 
 <section id="widget-maker" class="overlay" style="display: none;">
   <div>
@@ -243,7 +256,7 @@ <h1>Video Recorder</h1>
       </div>
     </div>
   </div>
-  <button type="widget-mkr-open" name="button" class="pill-btn pill-btn--secondary">upload assets</button>
+  <button name="upload-assets" class="pill-btn pill-btn--secondary">upload assets</button>
 </footer>
 
 <script src="/nn.min.js"></script>
diff --git a/www/widgets/tutorial-maker/popups/main.css b/www/widgets/tutorial-maker/popups/main.css
index 0e75b47f..b0fb41c9 100644
--- a/www/widgets/tutorial-maker/popups/main.css
+++ b/www/widgets/tutorial-maker/popups/main.css
@@ -415,3 +415,36 @@ footer {
   justify-content: space-between;
   flex: 0;
 }
+
+#upload > p {
+  color: var(--netizen-meta);
+  font-size: 1.2rem;
+  font-weight: 700;
+  text-align: center;
+}
+
+.uploaded-assets {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin: 6px 0;
+}
+
+.upl-asset {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  align-items: center;
+  width: 100%;
+  background: var(--netizen-meta);
+  padding: 6px 9px;
+  border-radius: 6px;
+}
+.upl-asset svg {
+  cursor: pointer;
+  width: 15px;
+  height: 15px;
+}
+.upl-asset svg:hover path {
+  stroke: #FF4545;
+}
diff --git a/www/widgets/tutorial-maker/popups/main.js b/www/widgets/tutorial-maker/popups/main.js
index e9c26849..38ee5f94 100644
--- a/www/widgets/tutorial-maker/popups/main.js
+++ b/www/widgets/tutorial-maker/popups/main.js
@@ -1,4 +1,4 @@
-/* global nn timeline zipper recorder FILES metadata HTMLElement customElements Netitor */
+/* global nn timeline zipper recorder FILES metadata HTMLElement customElements Netitor FileReader */
 
 const SWP = 'TUTORIAL_MAKER' // MUST MATCH PATH IN: files-db-service-worker.js
 let TIMECODE = 0 // timeline's current timecode (ie. playhead location)
@@ -23,7 +23,12 @@ function overlay (ele) {
   } else if (ele === '#video-menu') {
     window.resizeTo(420, 850)
     recorder.initMenu()
-  } else if (ele === '#widget-maker') window.resizeTo(610, 400)
+  } else if (ele === '#widget-maker') {
+    window.resizeTo(610, 400)
+  } else if (ele === '#upload') {
+    window.resizeTo(425, 500)
+    loadFiles()
+  }
 }
 
 function openTutorial () {
@@ -406,6 +411,62 @@ function debounce (fn, wait, { leading = false, trailing = true } = {}) {
   }
 }
 
+// ----------------------------------------------------- UPLOAD ASSETS FUNCTIONS
+
+function fileUploaded (e) {
+  if (!e.detail.files) return
+  e.detail.files.forEach(file => {
+    const reader = new FileReader()
+    reader.onload = async (event) => {
+      const fileContent = event.target.result
+      await FILES.updateFile(file.name, fileContent)
+    }
+  })
+}
+
+function addFile (file) {
+  const div = document.createElement('div')
+  div.className = 'upl-asset'
+  const p = document.createElement('p')
+  const name = file.path.split('/').pop()
+  p.textContent = name
+
+  // create 'X' svg button
+  const NS = 'http://www.w3.org/2000/svg'
+  const svg = document.createElementNS(NS, 'svg')
+  svg.setAttribute('width', '15')
+  svg.setAttribute('height', '15')
+  svg.setAttribute('viewBox', '0 0 15 15')
+  svg.setAttribute('fill', 'none')
+  svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
+
+  const p1 = document.createElementNS(NS, 'path')
+  p1.setAttribute('d', 'M13 2L2 13')
+  p1.setAttribute('stroke', '#1D1B36')
+  p1.setAttribute('stroke-width', '3')
+  p1.setAttribute('stroke-linecap', 'round')
+
+  const p2 = document.createElementNS(NS, 'path')
+  p2.setAttribute('d', 'M13 13L2 2')
+  p2.setAttribute('stroke', '#1D1B36')
+  p2.setAttribute('stroke-width', '3')
+  p2.setAttribute('stroke-linecap', 'round')
+  svg.appendChild(p1)
+  svg.appendChild(p2)
+
+  const deleteFile = () => {
+    FILES.deleteFile(file.path)
+    div.remove()
+  }
+  svg.addEventListener('click', deleteFile)
+  div.appendChild(p)
+  div.appendChild(svg)
+  nn.get('#upload .uploaded-assets').appendChild(div)
+}
+
+function loadFiles () {
+  Object.entries(FILES.files).forEach(file => addFile(file[1]))
+}
 
 // -------------------------------------------------------- SETUP EVENT LISTENRS
 
@@ -459,6 +520,11 @@ nn.get('[name="widget-maker-update"]').on('click', () => updateWidget())
 nn.get('#widget-key-input').on('blur', () => updateWidgetState())
 nn.get('#widget-title-input').on('blur', () => updateWidgetState())
 
+nn.get('[name="upload-assets"]').on('click', () => overlay('#upload'))
+nn.get('#upload file-drop').addEventListener('files-changed', (e) => fileUploaded(e))
+nn.get('[name="upload-goback"]').on('click', () => overlay(null))
+// TODO: configure upload assets (?) button
+
 // .................... window events
 
 nn.on('load', () => {

From 931eefb07d065dabc13dd2005867bfc301000c5c Mon Sep 17 00:00:00 2001
From: Cthomp7 <cthomp7@saic.edu>
Date: Tue, 4 Nov 2025 20:08:02 -0600
Subject: [PATCH 19/25] configured files to zipper.download

---
 www/widgets/tutorial-maker/popups/zip-tools.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/www/widgets/tutorial-maker/popups/zip-tools.js b/www/widgets/tutorial-maker/popups/zip-tools.js
index b2505328..354f0800 100644
--- a/www/widgets/tutorial-maker/popups/zip-tools.js
+++ b/www/widgets/tutorial-maker/popups/zip-tools.js
@@ -114,6 +114,13 @@ const zipper = {
         blob,
         { compression: 'STORE' }
       )
+      // load all files under FILES.files
+      Object.entries(FILES.files).forEach(file => {
+        if (file[1].path.split('/').pop() === `${metadata.id}.mp4`) return
+        const filePath = file[1].path.split('/').slice(2).join('/')
+        const fileData = FILES.readFile(file[1].path)
+        zip.file(filePath, fileData)
+      })
 
       const zipBlob = await zip.generateAsync({ type: 'blob' })
 

From e33ec52a7f68f85e0df3dabf36269407d28494ef Mon Sep 17 00:00:00 2001
From: Cthomp7 <cthomp7@saic.edu>
Date: Sat, 8 Nov 2025 19:31:20 -0600
Subject: [PATCH 20/25] added disableFileList logic to FileDrop element

---
 www/custom-elements/misc/file-drop/index.js  | 8 +++++---
 www/widgets/tutorial-maker/popups/index.html | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/www/custom-elements/misc/file-drop/index.js b/www/custom-elements/misc/file-drop/index.js
index 7afad84f..9d8f12c0 100644
--- a/www/custom-elements/misc/file-drop/index.js
+++ b/www/custom-elements/misc/file-drop/index.js
@@ -1,6 +1,6 @@
 /* global HTMLElement CustomEvent FileList */
 class FileDrop extends HTMLElement {
-  static get observedAttributes () { return ['accept', 'max-size', 'max-files', 'multiple'] }
+  static get observedAttributes () { return ['accept', 'max-size', 'max-files', 'multiple', 'disableFileList'] }
 
   constructor (opts) {
     super()
@@ -8,7 +8,8 @@ class FileDrop extends HTMLElement {
       accept: '.pdf, .jpg, .png',
       maxSize: '5MB',
       maxFiles: '1',
-      multiple: false
+      multiple: false,
+      disableFileList: false
     }
     this.files = []
   }
@@ -50,6 +51,7 @@ class FileDrop extends HTMLElement {
     const mf = parseInt(this.getAttribute('max-files'), 10)
     this.config.maxFiles = Number.isFinite(mf) ? mf : this.config.maxFiles
     this.config.multiple = this.hasAttribute('multiple') || this.config.maxFiles > 1
+    this.config.disableFileList = this.hasAttribute('disableFileList') || this.config.disableFileList
   }
 
   applyListeners () {
@@ -102,7 +104,7 @@ class FileDrop extends HTMLElement {
     const { add, rejected } = this.filterMaxFilesAmount(acceptedFiles)
 
     this.files.push(...add)
-    this.renderFileItems()
+    if (!this.config.disableFileList) this.renderFileItems()
 
     this.dispatchEvent(new CustomEvent('files-changed', {
       detail: { added: add, rejected, files: this.files.slice() },
diff --git a/www/widgets/tutorial-maker/popups/index.html b/www/widgets/tutorial-maker/popups/index.html
index c1485fee..eadd2085 100644
--- a/www/widgets/tutorial-maker/popups/index.html
+++ b/www/widgets/tutorial-maker/popups/index.html
@@ -132,7 +132,7 @@ <h1>Video Recorder</h1>
     <button class="pill-btn pill-btn--secondary" style="padding-bottom: 3px;">?</button>
   </div>
   <div class="file-drop-cont">
-    <file-drop accept=".png, .jpg, .gif" maxFiles="100" maxSize="1GB"></file-drop>
+    <file-drop accept=".png, .jpg, .gif" maxFiles="100" maxSize="1GB" disableFileList="true"></file-drop>
   </div>
   <p>Uploaded Assets</p>
   <div class="uploaded-assets"></div>

From b066db83d267a044f4262ba5e4c465f70845c3d0 Mon Sep 17 00:00:00 2001
From: Cthomp7 <cthomp7@saic.edu>
Date: Sat, 8 Nov 2025 20:32:58 -0600
Subject: [PATCH 21/25] fixed maxFiles & changed addFile

---
 www/custom-elements/misc/file-drop/index.js  | 11 +++++------
 www/widgets/tutorial-maker/popups/index.html |  2 +-
 www/widgets/tutorial-maker/popups/main.js    | 10 +++++++---
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/www/custom-elements/misc/file-drop/index.js b/www/custom-elements/misc/file-drop/index.js
index 9d8f12c0..cf81d16f 100644
--- a/www/custom-elements/misc/file-drop/index.js
+++ b/www/custom-elements/misc/file-drop/index.js
@@ -7,7 +7,7 @@ class FileDrop extends HTMLElement {
     this.config = {
       accept: '.pdf, .jpg, .png',
       maxSize: '5MB',
-      maxFiles: '1',
+      maxFiles: 1,
       multiple: false,
       disableFileList: false
     }
@@ -48,9 +48,8 @@ class FileDrop extends HTMLElement {
   applyAttributes () {
     this.config.accept = this.getAttribute('accept') ?? this.config.accept
     this.config.maxSize = this.getAttribute('max-size') ?? this.config.maxSize
-    const mf = parseInt(this.getAttribute('max-files'), 10)
-    this.config.maxFiles = Number.isFinite(mf) ? mf : this.config.maxFiles
-    this.config.multiple = this.hasAttribute('multiple') || this.config.maxFiles > 1
+    this.config.maxFiles = this.getAttribute('maxFiles') || this.config.maxFiles
+    this.config.multiple = this.getAttribute('multiple') || this.config.maxFiles > 1
     this.config.disableFileList = this.hasAttribute('disableFileList') || this.config.disableFileList
   }
 
@@ -86,7 +85,7 @@ class FileDrop extends HTMLElement {
     })
 
     // return if maxFiles amount is already met
-    if (this.files.length >= maxFiles) {
+    if (this.files.length > maxFiles) {
       this.displayMsg({
         text: `Max amount of files (${maxFiles}) has already been uploaded. Please remove previously uploaded files and re-upload.`,
         type: 'error'
@@ -126,7 +125,7 @@ class FileDrop extends HTMLElement {
 
   filterMaxFilesAmount (files) {
     const maxFiles = this.config.maxFiles
-    const max = Number.isFinite(maxFiles) ? maxFiles : 1
+    const max = maxFiles ?? 1
     const room = Math.max(0, max - this.files.length)
     const add = files.slice(0, room)
     const rejected = files.slice(room)
diff --git a/www/widgets/tutorial-maker/popups/index.html b/www/widgets/tutorial-maker/popups/index.html
index eadd2085..8c3bb1b0 100644
--- a/www/widgets/tutorial-maker/popups/index.html
+++ b/www/widgets/tutorial-maker/popups/index.html
@@ -132,7 +132,7 @@ <h1>Video Recorder</h1>
     <button class="pill-btn pill-btn--secondary" style="padding-bottom: 3px;">?</button>
   </div>
   <div class="file-drop-cont">
-    <file-drop accept=".png, .jpg, .gif" maxFiles="100" maxSize="1GB" disableFileList="true"></file-drop>
+    <file-drop accept=".png, .jpg, .gif" maxFiles="50" maxSize="1GB" disableFileList="true"></file-drop>
   </div>
   <p>Uploaded Assets</p>
   <div class="uploaded-assets"></div>
diff --git a/www/widgets/tutorial-maker/popups/main.js b/www/widgets/tutorial-maker/popups/main.js
index 38ee5f94..06a9c7cc 100644
--- a/www/widgets/tutorial-maker/popups/main.js
+++ b/www/widgets/tutorial-maker/popups/main.js
@@ -414,13 +414,15 @@ function debounce (fn, wait, { leading = false, trailing = true } = {}) {
 // ----------------------------------------------------- UPLOAD ASSETS FUNCTIONS
 
 function fileUploaded (e) {
-  if (!e.detail.files) return
+  if (!e.detail.files.length > 0) return
   e.detail.files.forEach(file => {
     const reader = new FileReader()
     reader.onload = async (event) => {
       const fileContent = event.target.result
       await FILES.updateFile(file.name, fileContent)
+      addFile(file.name)
     }
+    reader.readAsText(file)
   })
 }
 
@@ -428,7 +430,7 @@ function addFile (file) {
   const div = document.createElement('div')
   div.className = 'upl-asset'
   const p = document.createElement('p')
-  const name = file.path.split('/').pop()
+  const name = file?.path ? file.path.split('/').pop() : file
   p.textContent = name
 
   // create 'X' svg button
@@ -461,7 +463,9 @@ function addFile (file) {
   svg.addEventListener('click', deleteFile)
   div.appendChild(p)
   div.appendChild(svg)
-  nn.get('#upload .uploaded-assets').appendChild(div)
+  const container = nn.get('#upload .uploaded-assets')
+  if (container.children.length > 0) nn.get('#upload .uploaded-assets').insertBefore(div, container.children[0])
+  else nn.get('#upload .uploaded-assets').appendChild(div)
 }
 
 function loadFiles () {

From 1dfab0f40622db02a393f6ede7cb77cba7c11308 Mon Sep 17 00:00:00 2001
From: Cthomp7 <cthomp7@saic.edu>
Date: Sun, 9 Nov 2025 21:59:59 -0600
Subject: [PATCH 22/25] changed window.open popup name

---
 www/widgets/tutorial-maker/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/widgets/tutorial-maker/index.js b/www/widgets/tutorial-maker/index.js
index c1498e3d..42f0abf2 100644
--- a/www/widgets/tutorial-maker/index.js
+++ b/www/widgets/tutorial-maker/index.js
@@ -244,7 +244,7 @@ class TutorialMaker extends Widget {
 
   _openPopup (type, payload) {
     const url = 'widgets/tutorial-maker/popups/index.html'
-    this.popup = window.open(url, 'example-widget', 'width=200,height=200')
+    this.popup = window.open(url, 'tut-mkr-widget', 'width=200,height=200')
     // keep an eye on the pop up to see if it closed
     this.popupWatcher = setInterval(() => {
       if (this.popup && this.popup.closed) {

From ca4cc137dd068456f3a4b2d6d9425b2c1e7d13f3 Mon Sep 17 00:00:00 2001
From: Cthomp7 <cthomp7@saic.edu>
Date: Sun, 9 Nov 2025 22:01:01 -0600
Subject: [PATCH 23/25] fixed custom editable divs from triggering shortcuts &&
 fixed Netitor gutter issue

---
 www/widgets/tutorial-maker/popups/main.js | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/www/widgets/tutorial-maker/popups/main.js b/www/widgets/tutorial-maker/popups/main.js
index 06a9c7cc..517b20dc 100644
--- a/www/widgets/tutorial-maker/popups/main.js
+++ b/www/widgets/tutorial-maker/popups/main.js
@@ -494,12 +494,6 @@ nn.getAll('button[name]').forEach(btn => {
   })
 })
 
-// prevents shortcuts when typing in custom inputs
-nn.get('#kf-name-input').on('keydown', (e) => { e.stopPropagation() })
-nn.get('#sptlght-line-input').on('keydown', (e) => { e.stopPropagation() })
-nn.get('#widget-key-input').on('keydown', (e) => { e.stopPropagation() })
-nn.get('#widget-title-input').on('keydown', (e) => { e.stopPropagation() })
-
 // opening and closing spotlight dropdown
 nn.get('#spotlight-dd').on('click', (e) => {
   const em = nn.get('#sptlght-edit')
@@ -556,6 +550,7 @@ nn.on('load', () => {
   WN.cm.setOption('lineNumbers', false)
   const debouncedUpdate = debounce(updateWidgetState, 1500)
   WN.on('code-update', (code) => debouncedUpdate(code))
+  WN.ele.querySelector('.CodeMirror-gutters').style.background = 'transparent'
   // TODO: fix where if you try to ctrl + arrow doesn't jump to different keyframes
 })
 
@@ -566,6 +561,8 @@ nn.on('resize', () => {
 
 nn.on('keydown', (e) => {
   const avoidToggle = ['input', 'textarea']
+  const editable = e.target.getAttribute('contenteditable')
+  if (editable) return // stop propagation on all editable elements
   if (e.key === ' ' && !avoidToggle.includes(e.target.localName)) {
     msg('tut-mkr-toggle')
   } else if (e.key === 'ArrowLeft') {

From d63881a1fa98468dac37689039d2fb75cc9bd4fd Mon Sep 17 00:00:00 2001
From: Cthomp7 <cthomp7@saic.edu>
Date: Sun, 9 Nov 2025 22:01:32 -0600
Subject: [PATCH 24/25] fixed FILES.files download

---
 .../tutorial-maker/popups/zip-tools.js        | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/www/widgets/tutorial-maker/popups/zip-tools.js b/www/widgets/tutorial-maker/popups/zip-tools.js
index 354f0800..388925ee 100644
--- a/www/widgets/tutorial-maker/popups/zip-tools.js
+++ b/www/widgets/tutorial-maker/popups/zip-tools.js
@@ -114,16 +114,25 @@ const zipper = {
         blob,
         { compression: 'STORE' }
       )
+
       // load all files under FILES.files
-      Object.entries(FILES.files).forEach(file => {
-        if (file[1].path.split('/').pop() === `${metadata.id}.mp4`) return
+      const ignoreFiles = [`${metadata.id}.mp4`, 'tutorial.json', 'index.html']
+      for (const file of Object.entries(FILES.files)) {
+        const fileName = file[1].path.split('/').pop()
+        if (ignoreFiles.contains(fileName)) continue
+
         const filePath = file[1].path.split('/').slice(2).join('/')
         const fileData = FILES.readFile(file[1].path)
-        zip.file(filePath, fileData)
-      })
+        if (fileData.startsWith('blob:')) {
+          const res = await fetch(fileData)
+          const blob = await res.blob()
+          zip.file(filePath, blob, { binary: true })
+        } else {
+          zip.file(filePath, fileData)
+        }
+      }
 
       const zipBlob = await zip.generateAsync({ type: 'blob' })
-
       //  trigger download
       const a = document.createElement('a')
       a.href = URL.createObjectURL(zipBlob)
@@ -135,7 +144,6 @@ const zipper = {
     } catch (error) {
       console.error('Failed to download tutorial: ', error)
     }
-    // TODO: store all the data in FILES.files into a zip file && download it
   }
 }
 

From d8c89338402e23e41c9d844b4216381ca235a415 Mon Sep 17 00:00:00 2001
From: Cthomp7 <cthomp7@saic.edu>
Date: Sun, 9 Nov 2025 22:14:46 -0600
Subject: [PATCH 25/25] added widgets to download

---
 www/widgets/tutorial-maker/index.js            | 4 ++--
 www/widgets/tutorial-maker/popups/zip-tools.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/www/widgets/tutorial-maker/index.js b/www/widgets/tutorial-maker/index.js
index 42f0abf2..a345e966 100644
--- a/www/widgets/tutorial-maker/index.js
+++ b/www/widgets/tutorial-maker/index.js
@@ -177,8 +177,8 @@ class TutorialMaker extends Widget {
   _getData () {
     const keyframes = this.hvp.data.keyframes
     const keylogs = this.hvp.data.keylogs
-    // TODO: fetch widgets
-    return { keyframes, keylogs }
+    const widgets = this.hvp.data.widgets
+    return { keyframes, keylogs, widgets }
   }
 
   _addSpotlight (ls) {
diff --git a/www/widgets/tutorial-maker/popups/zip-tools.js b/www/widgets/tutorial-maker/popups/zip-tools.js
index 388925ee..51ca37e5 100644
--- a/www/widgets/tutorial-maker/popups/zip-tools.js
+++ b/www/widgets/tutorial-maker/popups/zip-tools.js
@@ -93,7 +93,7 @@ const zipper = {
       keys.forEach(key => {
         tutorial.metadata[key] = metadata[key]
       })
-      // TODO: configure widgets
+      tutorial.widgets = data.widgets ?? []
       tutorial.keyframes = data?.keyframes ?? []
       tutorial.keylogs = data?.keylogs ?? []
 
@@ -119,7 +119,7 @@ const zipper = {
       const ignoreFiles = [`${metadata.id}.mp4`, 'tutorial.json', 'index.html']
       for (const file of Object.entries(FILES.files)) {
         const fileName = file[1].path.split('/').pop()
-        if (ignoreFiles.contains(fileName)) continue
+        if (ignoreFiles.includes(fileName)) continue
 
         const filePath = file[1].path.split('/').slice(2).join('/')
         const fileData = FILES.readFile(file[1].path)