From b8812a2bdae37dd35f49aa275da3a3455c067baf Mon Sep 17 00:00:00 2001
From: sukuwc <sukuwc@riseup.net>
Date: Sun, 2 Nov 2025 21:50:10 +0100
Subject: [PATCH 1/4] SUKU initial import of melt context menu example

---
 src/App.svelte                 |   2 +
 src/lib/MeltContextMenu.svelte | 171 +++++++++++++++++++++++++++++++++
 2 files changed, 173 insertions(+)
 create mode 100644 src/lib/MeltContextMenu.svelte

diff --git a/src/App.svelte b/src/App.svelte
index b92f7d7..3e74034 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -17,6 +17,7 @@
   import { fly } from "svelte/transition";
   import LogMessage from "./lib/LogMessage.svelte";
   import { LogMessageType } from "./lib/LogMessageType.ts";
+  import MeltContextMenu from "./lib/MeltContextMenu.svelte";
 
   import { tooltip } from "./lib/tooltip.ts";
 
@@ -246,6 +247,7 @@
 
     <div class="mock-panel">
       <span>ContextMenu and context-target:</span>
+      <MeltContextMenu />
       <span
         use:contextTarget={{
           items: [
diff --git a/src/lib/MeltContextMenu.svelte b/src/lib/MeltContextMenu.svelte
new file mode 100644
index 0000000..ffa0916
--- /dev/null
+++ b/src/lib/MeltContextMenu.svelte
@@ -0,0 +1,171 @@
+<script lang="ts">
+  import { createContextMenu, melt } from "@melt-ui/svelte";
+  import { writable } from "svelte/store";
+
+  const settingsSync = writable(true);
+  const hideMeltUI = writable(false);
+
+  const {
+    elements: { trigger, menu, item, separator },
+    builders: { createSubmenu, createMenuRadioGroup, createCheckboxItem },
+  } = createContextMenu();
+
+  const {
+    elements: { subMenu: subMenuA, subTrigger: subTriggerA },
+  } = createSubmenu();
+
+  const {
+    elements: { radioGroup, radioItem },
+    helpers: { isChecked },
+  } = createMenuRadioGroup({
+    defaultValue: "Hunter Johnston",
+  });
+
+  const {
+    elements: { checkboxItem },
+  } = createCheckboxItem({
+    checked: settingsSync,
+  });
+
+  const {
+    elements: { checkboxItem: checkboxItemA },
+  } = createCheckboxItem({
+    checked: hideMeltUI,
+  });
+
+  const personsArr = [
+    "Hunter Johnston",
+    "Thomas G. Lopes",
+    "Adrian Gonz",
+    "Franck Poingt",
+  ];
+</script>
+
+<span class="trigger" {...$trigger} use:trigger aria-label="Update dimensions">
+  Right click me.
+</span>
+
+<div class="menu" {...$menu} use:menu>
+  <div class="item" {...$item} use:item>About Melt UI</div>
+  <div class="item" {...$item} use:item>Check for Updates...</div>
+  <div class="separator" {...$separator} use:separator />
+  <div class="item" {...$checkboxItem} use:checkboxItem>
+    <div class="check">
+      {#if $settingsSync}
+        [x]
+      {/if}
+    </div>
+    Settings Sync is On
+  </div>
+  <div class="item" {...$subTriggerA} use:subTriggerA>
+    Profiles
+    <div class="rightSlot">-></div>
+  </div>
+  <div class="menu subMenu" {...$subMenuA} use:subMenuA>
+    <div {...$radioGroup} use:radioGroup>
+      {#each personsArr as person}
+        <div class="item" {...$radioItem({ value: person })} use:radioItem>
+          <div class="check">
+            {#if $isChecked(person)}
+              [Tick]
+            {/if}
+          </div>
+          {person}
+        </div>
+      {/each}
+    </div>
+  </div>
+  <div {...$separator} use:separator class="separator" />
+
+  <div class="item" {...$checkboxItemA} use:checkboxItemA>
+    <div class="check">
+      {#if $hideMeltUI}
+        [x]
+      {:else}
+        [ ]
+      {/if}
+    </div>
+    Hide Melt UI
+    <div class="rightSlot">⌘H</div>
+  </div>
+  <div class="item" {...$item} use:item data-disabled>
+    Show All Components
+    <div class="rightSlot">⇧⌘N</div>
+  </div>
+  <div {...$separator} use:separator class="separator" />
+  <div class="item" {...$item} use:item>
+    Quit Melt UI
+    <div class="rightSlot">⌘Q</div>
+  </div>
+</div>
+
+<style>
+  .menu {
+    outline: none;
+    display: flex;
+    flex-direction: column;
+
+    max-height: 300px;
+    min-width: 220px;
+
+    z-index: 10;
+    background-color: var(--popover-background);
+    color: var(--foreground-muted);
+    border: 1px solid var(--foreground-muted);
+    border-radius: 0.25rem;
+  }
+
+  @media screen and (min-width: 1024px) {
+    .menu {
+      max-height: none;
+    }
+  }
+
+  .subMenu {
+    min-width: 220px;
+  }
+
+  .item {
+    outline: none;
+    position: relative;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding: 0.5rem;
+    z-index: 20;
+  }
+
+  .item:hover {
+    background-color: var(--popover-selection);
+    color: var(--foreground);
+  }
+
+  .item[data-disabled] {
+    color: var(--foreground-disabled);
+  }
+
+  .trigger {
+    display: block;
+    width: 300px;
+    padding: 3rem 0;
+
+    border-color: rgb(var(--color-neutral-50) / 1);
+    border-width: 2px;
+    border-style: dashed;
+    border-radius: 0.375rem;
+
+    text-align: center;
+  }
+
+  .separator {
+    display: block;
+    padding-bottom: 1px;
+    width: 100%;
+    background-color: var(--foreground-disabled);
+  }
+
+  .rightSlot {
+    margin-left: auto;
+    padding-left: 1.25rem;
+  }
+</style>

From 5c9823dd52cc2ec902b1845a86e28c768f1c687c Mon Sep 17 00:00:00 2001
From: sukuwc <sukuwc@riseup.net>
Date: Mon, 3 Nov 2025 14:59:04 +0100
Subject: [PATCH 2/4] SUKU render blocks created

---
 src/lib/MeltContextMenu.svelte | 174 ++++++++++++++++++++++++---------
 1 file changed, 127 insertions(+), 47 deletions(-)

diff --git a/src/lib/MeltContextMenu.svelte b/src/lib/MeltContextMenu.svelte
index ffa0916..8597b80 100644
--- a/src/lib/MeltContextMenu.svelte
+++ b/src/lib/MeltContextMenu.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import { createContextMenu, melt } from "@melt-ui/svelte";
-  import { writable } from "svelte/store";
+  import { get, writable } from "svelte/store";
+
+  ///////// USER CODE: Business logic of the actual context menu instance /////////////
 
   const settingsSync = writable(true);
   const hideMeltUI = writable(false);
@@ -39,65 +41,148 @@
     "Adrian Gonz",
     "Franck Poingt",
   ];
+
+  let menuRender = [
+    {
+      fn: menuItem,
+      descr: item,
+      label: "About Melt UI",
+      diabled: false,
+      hotkey: "⇧⌘N",
+    },
+    {
+      fn: menuItem,
+      descr: item,
+      label: "Check for Updates...",
+      diabled: false,
+      hotkey: "⇧U",
+    },
+    {
+      fn: menuSeparator,
+      descr: separator,
+    },
+    {
+      fn: menuCheckbox,
+      descr: checkboxItem,
+      label: "Settings Sync is On",
+      diabled: false,
+      hotkey: "",
+      ischecked: settingsSync
+    },
+  ];
+
+
+
 </script>
 
+{$settingsSync}
+
+{$hideMeltUI}
+
+
+
+
 <span class="trigger" {...$trigger} use:trigger aria-label="Update dimensions">
   Right click me.
 </span>
 
 <div class="menu" {...$menu} use:menu>
-  <div class="item" {...$item} use:item>About Melt UI</div>
-  <div class="item" {...$item} use:item>Check for Updates...</div>
-  <div class="separator" {...$separator} use:separator />
-  <div class="item" {...$checkboxItem} use:checkboxItem>
-    <div class="check">
-      {#if $settingsSync}
-        [x]
-      {/if}
-    </div>
-    Settings Sync is On
-  </div>
-  <div class="item" {...$subTriggerA} use:subTriggerA>
-    Profiles
-    <div class="rightSlot">-></div>
-  </div>
+  {#each menuRender as element}
+    {@render element.fn(
+      element.descr,
+      element.label,
+      element.disabled,
+      element.hotkey,
+      element.ischecked,
+    )}
+  {/each}
+  {@render menuCheckbox(
+    checkboxItem,
+    "Settings Sync is On",
+    false,
+    "",
+    settingsSync,
+  )}
+
+  {@render menuItem(subTriggerA, "Profiles disabled", true, "arrow")}
+  {@render menuItem(subTriggerA, "Profiles enabled", false, "arrow")}
+
   <div class="menu subMenu" {...$subMenuA} use:subMenuA>
     <div {...$radioGroup} use:radioGroup>
       {#each personsArr as person}
-        <div class="item" {...$radioItem({ value: person })} use:radioItem>
-          <div class="check">
-            {#if $isChecked(person)}
-              [Tick]
-            {/if}
-          </div>
-          {person}
-        </div>
+        {@render menuRadio(radioItem, person, false, "", isChecked)}
       {/each}
     </div>
   </div>
   <div {...$separator} use:separator class="separator" />
 
-  <div class="item" {...$checkboxItemA} use:checkboxItemA>
+  {@render menuCheckbox(
+    checkboxItemA,
+    "Hide Melt UI",
+    false,
+    "⇧⌘N",
+    hideMeltUI,
+  )}
+  {@render menuItem(item, "Show All Components", true, "⇧⌘N")}
+  {@render menuItem(item, "Show All Components", false, "⇧⌘N")}
+  {@render menuSeparator(separator)}
+  {@render menuItem(item, "Quit Melt UI", false, "⌘Q")}
+</div>
+
+{#snippet menuSeparator(descriptor)}
+  <div {...get(descriptor)} use:descriptor class="separator" />
+{/snippet}
+
+{#snippet menuRadio(descriptor, label, isdisabled, hotkey, helper)}
+  <div
+    class="item"
+    {...get(descriptor)({ value: label })}
+    use:descriptor
+    data-disabled={isdisabled ? "" : undefined}
+  >
     <div class="check">
-      {#if $hideMeltUI}
+      {#if get(helper)(label) === true}
         [x]
-      {:else}
+      {:else if get(helper)(label) === false}
         [ ]
       {/if}
     </div>
-    Hide Melt UI
-    <div class="rightSlot">⌘H</div>
+    {label}
+    <div class="rightSlot">{hotkey}</div>
   </div>
-  <div class="item" {...$item} use:item data-disabled>
-    Show All Components
-    <div class="rightSlot">⇧⌘N</div>
+{/snippet}
+
+{#snippet menuCheckbox(descriptor, label, isdisabled, hotkey, ischecked )}
+
+  <div
+    class="item"
+    {...get(descriptor)}
+    use:descriptor
+    data-disabled={isdisabled ? "" : undefined}
+  >
+    <div class="check">
+      {#if isChecked == true}
+        [x]
+      {:else}
+        [ ]
+      {/if}
+    </div>
+    {label}
+    <div class="rightSlot">{hotkey}</div>
   </div>
-  <div {...$separator} use:separator class="separator" />
-  <div class="item" {...$item} use:item>
-    Quit Melt UI
-    <div class="rightSlot">⌘Q</div>
+{/snippet}
+
+{#snippet menuItem(descriptor, label, isdisabled, hotkey)}
+  <div
+    class="item"
+    {...get(descriptor)}
+    use:descriptor
+    data-disabled={isdisabled ? "" : undefined}
+  >
+    {label}
+    <div class="rightSlot">{hotkey}</div>
   </div>
-</div>
+{/snippet}
 
 <style>
   .menu {
@@ -105,7 +190,6 @@
     display: flex;
     flex-direction: column;
 
-    max-height: 300px;
     min-width: 220px;
 
     z-index: 10;
@@ -135,25 +219,21 @@
     z-index: 20;
   }
 
-  .item:hover {
+  .item:hover:not([data-disabled]) {
     background-color: var(--popover-selection);
     color: var(--foreground);
   }
 
   .item[data-disabled] {
+    cursor: default;
     color: var(--foreground-disabled);
   }
 
   .trigger {
     display: block;
-    width: 300px;
-    padding: 3rem 0;
-
-    border-color: rgb(var(--color-neutral-50) / 1);
-    border-width: 2px;
-    border-style: dashed;
-    border-radius: 0.375rem;
-
+    width: 100%;
+    height: 25%;
+    border: 2px dashed white;
     text-align: center;
   }
 

From 232bfc906b8e776840041bbce312ac224b27ef38 Mon Sep 17 00:00:00 2001
From: sukuwc <sukuwc@riseup.net>
Date: Wed, 5 Nov 2025 11:26:38 +0100
Subject: [PATCH 3/4] SUKU reactivity through each block fixed for checkbox

---
 src/lib/MeltContextMenu.svelte | 44 ++++++++++++++++------------------
 1 file changed, 20 insertions(+), 24 deletions(-)

diff --git a/src/lib/MeltContextMenu.svelte b/src/lib/MeltContextMenu.svelte
index 8597b80..21cb53b 100644
--- a/src/lib/MeltContextMenu.svelte
+++ b/src/lib/MeltContextMenu.svelte
@@ -7,6 +7,12 @@
   const settingsSync = writable(true);
   const hideMeltUI = writable(false);
 
+  let settingsSyncState = $state($settingsSync);
+  settingsSync.subscribe((s) => {
+    console.log(s);
+    settingsSyncState = s;
+  });
+
   const {
     elements: { trigger, menu, item, separator },
     builders: { createSubmenu, createMenuRadioGroup, createCheckboxItem },
@@ -45,6 +51,7 @@
   let menuRender = [
     {
       fn: menuItem,
+      subtree: undefined,
       descr: item,
       label: "About Melt UI",
       diabled: false,
@@ -52,6 +59,7 @@
     },
     {
       fn: menuItem,
+      subtree: undefined,
       descr: item,
       label: "Check for Updates...",
       diabled: false,
@@ -59,35 +67,31 @@
     },
     {
       fn: menuSeparator,
+      subtree: undefined,
       descr: separator,
     },
     {
       fn: menuCheckbox,
+      subtree: undefined,
       descr: checkboxItem,
       label: "Settings Sync is On",
-      diabled: false,
-      hotkey: "",
-      ischecked: settingsSync
+      disabled: false,
+      hotkey: "ABC",
+      ischecked: () => settingsSyncState,
     },
   ];
-
-
-
 </script>
 
 {$settingsSync}
 
 {$hideMeltUI}
 
-
-
-
 <span class="trigger" {...$trigger} use:trigger aria-label="Update dimensions">
   Right click me.
 </span>
-
+s
 <div class="menu" {...$menu} use:menu>
-  {#each menuRender as element}
+  {#each menuRender as element, i}
     {@render element.fn(
       element.descr,
       element.label,
@@ -96,13 +100,6 @@
       element.ischecked,
     )}
   {/each}
-  {@render menuCheckbox(
-    checkboxItem,
-    "Settings Sync is On",
-    false,
-    "",
-    settingsSync,
-  )}
 
   {@render menuItem(subTriggerA, "Profiles disabled", true, "arrow")}
   {@render menuItem(subTriggerA, "Profiles enabled", false, "arrow")}
@@ -116,13 +113,13 @@
   </div>
   <div {...$separator} use:separator class="separator" />
 
-  {@render menuCheckbox(
+  <!--  {@render menuCheckbox(
     checkboxItemA,
     "Hide Melt UI",
     false,
     "⇧⌘N",
-    hideMeltUI,
-  )}
+    settingsSyncState,
+    )}-->
   {@render menuItem(item, "Show All Components", true, "⇧⌘N")}
   {@render menuItem(item, "Show All Components", false, "⇧⌘N")}
   {@render menuSeparator(separator)}
@@ -152,8 +149,7 @@
   </div>
 {/snippet}
 
-{#snippet menuCheckbox(descriptor, label, isdisabled, hotkey, ischecked )}
-
+{#snippet menuCheckbox(descriptor, label, isdisabled, hotkey, ischecked)}
   <div
     class="item"
     {...get(descriptor)}
@@ -161,7 +157,7 @@
     data-disabled={isdisabled ? "" : undefined}
   >
     <div class="check">
-      {#if isChecked == true}
+      {#if ischecked() == true}
         [x]
       {:else}
         [ ]

From 0bcd72cba5a3a5e8cffdede733956fa5c042de98 Mon Sep 17 00:00:00 2001
From: sukuwc <sukuwc@riseup.net>
Date: Fri, 5 Dec 2025 15:23:50 +0100
Subject: [PATCH 4/4] SUKU context menu progress

---
 src/lib/MeltContextMenu.svelte | 158 +++++++++++++++++++++------------
 1 file changed, 101 insertions(+), 57 deletions(-)

diff --git a/src/lib/MeltContextMenu.svelte b/src/lib/MeltContextMenu.svelte
index 21cb53b..b684bbe 100644
--- a/src/lib/MeltContextMenu.svelte
+++ b/src/lib/MeltContextMenu.svelte
@@ -51,132 +51,176 @@
   let menuRender = [
     {
       fn: menuItem,
-      subtree: undefined,
       descr: item,
-      label: "About Melt UI",
-      diabled: false,
-      hotkey: "⇧⌘N",
+      fields: {
+        label: "About Melt UI",
+        diabled: false,
+        hotkey: "⇧⌘N",
+      },
     },
     {
       fn: menuItem,
-      subtree: undefined,
       descr: item,
-      label: "Check for Updates...",
-      diabled: false,
-      hotkey: "⇧U",
+      fields: {
+        label: "Check for Updates...",
+        diabled: true,
+        hotkey: "⇧U",
+      },
     },
     {
       fn: menuSeparator,
-      subtree: undefined,
       descr: separator,
     },
     {
       fn: menuCheckbox,
-      subtree: undefined,
       descr: checkboxItem,
-      label: "Settings Sync is On",
-      disabled: false,
-      hotkey: "ABC",
-      ischecked: () => settingsSyncState,
+      fields: {
+        label: "Settings Sync is On",
+        disabled: false,
+        hotkey: "ABC",
+        ischecked: () => settingsSyncState,
+      },
+    },
+    {
+      fn: menuItem,
+      descr: subTriggerA,
+      fields: {
+        label: "Select profile",
+        diabled: false,
+        hotkey: "⇧P",
+      },
+    },
+    {
+      fn: menuSeparator,
+      descr: separator,
+    },
+    {
+      fn: menuSubmenu,
+      fields: {
+        subtree: [
+          {
+            fn: menuCheckbox,
+            descr: checkboxItem,
+            fields: {
+              label: "Settings Sync is On",
+              disabled: false,
+              hotkey: "ABC",
+              ischecked: () => settingsSyncState,
+            },
+          },
+        ],
+      },
+      descr: subMenuA,
     },
   ];
+
+  let menuMain = {
+    fn: menuSubmenu,
+    descr: menu,
+    subtree: menuRender,
+  };
+
+  let menuRef1 = () => {
+    return $menu;
+  };
+  let menuRef2 = () => menu;
 </script>
 
-{$settingsSync}
 
-{$hideMeltUI}
+
+
 
 <span class="trigger" {...$trigger} use:trigger aria-label="Update dimensions">
   Right click me.
 </span>
-s
-<div class="menu" {...$menu} use:menu>
-  {#each menuRender as element, i}
-    {@render element.fn(
-      element.descr,
-      element.label,
-      element.disabled,
-      element.hotkey,
-      element.ischecked,
-    )}
-  {/each}
 
-  {@render menuItem(subTriggerA, "Profiles disabled", true, "arrow")}
-  {@render menuItem(subTriggerA, "Profiles enabled", false, "arrow")}
+{@render menuMenu(()=> {return $menu}, () => menu, {subtree: menuRender})}
 
+
+
+<!--
   <div class="menu subMenu" {...$subMenuA} use:subMenuA>
     <div {...$radioGroup} use:radioGroup>
       {#each personsArr as person}
-        {@render menuRadio(radioItem, person, false, "", isChecked)}
+         {@render menuRadio(radioItem, person, false, "", isChecked)} 
       {/each}
     </div>
   </div>
   <div {...$separator} use:separator class="separator" />
+  -->
 
-  <!--  {@render menuCheckbox(
-    checkboxItemA,
-    "Hide Melt UI",
-    false,
-    "⇧⌘N",
-    settingsSyncState,
-    )}-->
-  {@render menuItem(item, "Show All Components", true, "⇧⌘N")}
-  {@render menuItem(item, "Show All Components", false, "⇧⌘N")}
-  {@render menuSeparator(separator)}
-  {@render menuItem(item, "Quit Melt UI", false, "⌘Q")}
-</div>
+
+{#snippet content(arr)}
+  {#each arr as element, i}
+    {@render element.fn(element.descr, element.fields)}
+  {/each}
+{/snippet}
+
+{#snippet menuSubmenu(descriptor, fields)}
+  <div class="menu" {...$subMenuA} use:descriptor>
+    hello1
+    {@render content(fields.subtree)}
+  </div>
+{/snippet}
+
+{#snippet menuMenu(descriptor1, descriptor2, fields)}
+  <div class="menu" {...menuRef1()} use:descriptor2()>
+    hello
+    {@render content(fields.subtree)}
+  </div>
+{/snippet}
 
 {#snippet menuSeparator(descriptor)}
   <div {...get(descriptor)} use:descriptor class="separator" />
 {/snippet}
 
-{#snippet menuRadio(descriptor, label, isdisabled, hotkey, helper)}
+{#snippet menuRadio(descriptor, fields)}
   <div
     class="item"
-    {...get(descriptor)({ value: label })}
+    {...get(descriptor)({ value: fields.label })}
     use:descriptor
-    data-disabled={isdisabled ? "" : undefined}
+    data-disabled={fields.isdisabled ? "" : undefined}
   >
     <div class="check">
-      {#if get(helper)(label) === true}
+      {#if get(fields.helper)(fields.label) === true}
         [x]
-      {:else if get(helper)(label) === false}
+      {:else if get(fields.helper)(fields.label) === false}
         [ ]
       {/if}
     </div>
     {label}
-    <div class="rightSlot">{hotkey}</div>
+    <div class="rightSlot">{fields.hotkey}</div>
   </div>
 {/snippet}
 
-{#snippet menuCheckbox(descriptor, label, isdisabled, hotkey, ischecked)}
+{#snippet menuCheckbox(descriptor, fields)}
   <div
     class="item"
     {...get(descriptor)}
     use:descriptor
-    data-disabled={isdisabled ? "" : undefined}
+    data-disabled={fields.isdisabled ? "" : undefined}
   >
     <div class="check">
-      {#if ischecked() == true}
+      {#if fields.ischecked() == true}
         [x]
       {:else}
         [ ]
       {/if}
     </div>
-    {label}
-    <div class="rightSlot">{hotkey}</div>
+    {fields.label}
+    <div class="rightSlot">{fields.hotkey}</div>
   </div>
 {/snippet}
 
-{#snippet menuItem(descriptor, label, isdisabled, hotkey)}
+{#snippet menuItem(descriptor, fields)}
   <div
     class="item"
     {...get(descriptor)}
     use:descriptor
-    data-disabled={isdisabled ? "" : undefined}
+    data-disabled={fields.isdisabled ? "" : undefined}
   >
-    {label}
-    <div class="rightSlot">{hotkey}</div>
+    {fields.label}
+    <div class="rightSlot">{fields.hotkey}</div>
   </div>
 {/snippet}