atome 0.5.7.5.9 → 0.5.7.6.5

data/vendor/assets/src/medias/utils/examples.rb

@@ -0,0 +1,187 @@
+atome_examples = {
+  "creator" => "# missing example for creator",
+  "aid" => "# frozen_string_literal: true\n\n\n# aid is used to provide an unique and persistent id for any atome\nb=box({ left: 12, id: :the_first_box })\n\nputs \" atome aid is : \#{b.aid}\"\nwait 1 do\n  hook(b.aid).color(:red)\nend\n",
+  "connection" => "# missing example for connection",
+  "message" => "# missing example for message",
+  "int8" => "# frozen_string_literal: true\n\n# t = text({ int8: { english: :hello, french: :salut, deutch: :halo } })\n\n# wait 1 do\n#   t.language(:french)\n#   wait 1 do\n#     t.language(:english)\n#     # data is updated to the latest choice\n#     puts t.data\n#     wait 1 do\n#       t.data(:hi)\n#     end\n#   end\n# end\n\nUniverse.translation[:hello] = { english: :hello, french: :salut, deutch: :halo }\n\nb = box({ left: 155,\n          drag: true,\n          id: :boxy })\n\n\nb.text({ data: :hello, id: :t1, position: :absolute, color: :black })\nt2 = b.text({ data: :hello, id: :t2, left: 9, top: 33, position: :absolute })\n\n\n\nUniverse.language = :french\nwait 2 do\n  t2.refresh\n  Universe.language = :deutch\n  wait 2 do\n  grab(:boxy).refresh\n  end\nend\n",
+  "language" => "# missing example for language",
+  "controller" => "# missing example for controller",
+  "smooth" => "# frozen_string_literal: true\n\nb = box({ width: 333, left: 333 })\nb.smooth(9)\n\nwait 2 do\n  b.smooth([33, 2, 90])\nend\n\n",
+  "blur" => "# frozen_string_literal: true\n\nb=circle({left: 333})\nb.blur(6)\n\nimage(:red_planet)\nb2=box({color: {alpha: 0.1, red: 1, green: 0, blue: 0.2}, left: 99, top: 99, width: 99, height: 99})\nb2.drag(true)\nb2.border({ thickness: 0.3, color: :gray, pattern: :solid })\nb2.smooth(12)\nb2.shadow({\n            invert: true,\n            id: :s4,\n            left: 2, top: 2, blur: 9,\n            # option: :natural,\n            red: 0, green: 0, blue: 0, alpha: 0.3\n          })\n\nb2.shadow({\n            # invert: true,\n            id: :s5,\n            left: 2, top: 2, blur: 9,\n            # option: :natural,\n            red: 0, green: 0, blue: 0, alpha: 0.6\n          })\nb2.blur({affect: :back, value: 15})\n",
+  "touch" => "#  frozen_string_literal: true\n\nb = box({ left: 333, color: :blue, smooth: 6, id: :the_box2 })\n\nt = text({ id: :the_text, data: 'type of touch : ?' })\n\nt.touch(:down) do |event|\n  puts :down\n  puts event[:pageX]\n  puts event[:pageY]\n  b.touch({ remove: :down })\n  t.data('down removed !! ')\nend\n\ntouch_code = lambda do\n  b.color(:red)\n  puts 'box tapped'\nend\nb.touch(tap: true, code: touch_code)\n\nb.touch(:long) do\n  { color: :cyan }\n  t.data('type of touch is : long ')\nend\n\nb.touch(:up) do\n  t.data('type of touch is : up ')\n  b.color(:orange)\nend\n\nb.touch(:down) do\n  t.data('type of touch is : down ')\n  b.color(:white)\nend\n\nb.touch(:double) do\n  t.color(:red)\n  t.data('type of touch is : double ')\n  b.color(:yellowgreen)\nend\n\n\n\n",
+  "play" => "#  frozen_string_literal: true\n\n\nnew({ particle: :display, render: false }) do |params|\n  # alert type\n  unless params[:items]\n    params[:items] = { width: 200, height: 33 }\n  end\n  container_width = params[:width] ||= width\n  container_height = params[:heigth] ||= height\n  container_top = params[:top] ||= top\n  container_left = params[:left] ||= left\n\n  item_width = params[:items][:width] ||= 400\n  item_height = params[:items][:height] ||= 50\n  item_margin = params[:margin] ||= 3\n\n  mode = params[:mode]\n\n  case mode\n  when :none\n  when :custom\n  when :list\n    if params[:data].instance_of? Array\n    elsif params[:data] == :particles\n      list_id = \"\#{id}_list\"\n      unless grab(list_id)\n        container = ''\n        attach.each do |parent|\n          container = grab(parent).box({ id: list_id, left: container_left, top: container_top, width: container_width, height: container_height, overflow: :auto, color: :black, depth: 0 })\n          container.on(:resize) do |event|\n            puts event[:dx]\n          end\n          container.resize({ min: { width: 100, height: 100 }, max: { width: 300, height: 700 } }) do |event|\n            puts event\n          end\n\n        end\n        sorted_particles = particles.sort.to_h\n        sorted_particles.each_with_index do |(particle_found, value), index|\n          line = container.box({ id: \"\#{list_id}_\#{index}\", width: item_width, height: item_height, left: 0, top: ((item_height + item_margin) * index) })\n          line.text({ data: \"\#{particle_found} : \", top: -item_height / 2, left: 2 })\n          if value.instance_of?(String) || value.instance_of?(Symbol) || value.instance_of?(Integer)\n            input_value = line.text({ data: value, top: -item_height / 2, left: 5, edit: true })\n            input_value.keyboard(:down) do |native_event|\n              event = Native(native_event)\n              if event[:keyCode].to_i == 13\n                event.preventDefault()\n                input_value.color(:red)\n              end\n            end\n            input_value.keyboard(:up) do |native_event|\n              data_found = input_value.data\n              send(particle_found, data_found)\n            end\n          else\n            puts \"value is :\#{value.class} => \#{value}\"\n          end\n        end\n        closer = container.circle({ id: \"\#{list_id}_closer\", width: 33, height: 33, top: 3, right: 3, color: :red, position: :sticky })\n        closer.touch(true) do\n          container.delete(true)\n        end\n      end\n    else\n    end\n  when :grid\n    grid_id = \"\#{id}_grid\"\n    unless grab(grid_id)\n      container = grab(:view).box({ id: grid_id, width: container_width, height: container_height, overflow: :auto, color: :white, depth: 0 })\n      ############## deletion\n      container.touch(true) do\n        puts \"removing container recursively : \#{container.id}\"\n        val_1= Universe.atomes.length\n        puts \"val_1 : \#{val_1}\"\n        container.delete({ recursive: true })\n        val_2= Universe.atomes.length\n        puts \"val_2 : \#{val_2}\"\n        puts \"val_1-val_2 : \#{val_1-val_2}\"\n      end\n      ############## deletion\n      params[:data].each_with_index do |item, index|\n        # unless grab(\"\#{grid_id}_\#{index}\")\n          item = container.box({ id: \"\#{grid_id}_\#{index}\", top: 0, position: :relative, left: nil, right: nil })\n          # item.touch(true) do\n          #   alert \"removing container recursively : \#{container.id}\"\n          #   val_1= Universe.atomes.length\n          #   puts \"val_1 : \#{val_1}\"\n          #   container.delete({ recursive: true })\n          #   val_2= Universe.atomes.length\n          #   puts \"val_2 : \#{val_2}\"\n          #   puts \"val_1-val_2 : \#{val_1-val_2}\"\n          # end\n        # end\n      end\n      # container.html.style('gridTemplateColumns', '1fr 1fr 1fr 1fr 1fr 1fr')\n      container.html.style('gridTemplateColumns', 'repeat(4, 1fr)')\n      container.html.style('gridTemplateRows', 'auto')\n      container.html.style('gridGap', '10px')\n      container.html.style('display', 'grid')\n      container.on(:resize) do |event|\n        puts event[:dx]\n      end\n      container.resize({ min: { width: 10, height: 10 }, max: { width: 300, height: 700 } }) do |event|\n        puts event\n      end\n    end\n  end\nend\nnew({ particle: :visible })\nnew({ renderer: :html, method: :visible }) do |params|\n  if params == false\n    params = :none\n  elsif params == true\n    params = :block\n  end\n  html.visible(params)\nend\nnew({ particle: :position }) do\nend\nnew({ method: :position, type: :integer, renderer: :html }) do |params|\n  html.style(:position, params)\nend\n\nb = box({ color: :red })\n\nb.touch(true) do\n  # b.display({ mode: :list, data: :particles, width: 333, items: { width: 200, height: 33 }, height: 33, margin: 5 })\n  b.display({ mode: :list, data: :particles, items: { width: 200, height: 33 }, height: 33, margin: 5 })\nend\n############## Builder #############\nc = circle({ left: 333 })\nfake_array = []\ni = 0\nwhile i < 32 do\n  fake_array << i\n  i += 1\nend\nc.touch(true) do\n  c.display({ mode: :grid, data: fake_array,width: 333, height: 333 })\nend\n############## Generator #############\ngen = generator({ id: :genesis, build: { top: 66, copies: 1 } })\ngen.build({ id: :bundler, copies: 32, tag: { group: :to_grid }, color: :red, width: 33, height: 44, left: 123, smooth: 9, blur: 3, attach: :view })\ngrab(:bundler_1).color(:blue)\n\ncolor({ id: :the_orange, red: 1, green: 0.4 })\n\natome_to_grid = tagged({ group: :to_grid })\nthe_group = group({ collected: atome_to_grid })\n\nthe_group.touch(true) do |i|\n  color(:green)\nend\n# wait 0.3 do\nthe_group.left(633)\nwait 1 do\n  grab(:view).display({ mode: :grid, data: fake_array })\nend\n\n\n\n\n\n",
+  "pause" => "# missing example for pause",
+  "time" => "# frozen_string_literal: true\n\nnew(molecule: :roller) do |params = {}|\n  roller_id = params[:id] ||= identity_generator\n  roller = box({ id: roller_id, width: 900, height: 333, color: :orange })\n  JS.eval(\"aRoll('\#{roller_id}_roller','\#{roller_id}', \#{roller.width}, \#{roller.height})\")\n  roller\nend\nnew({ molecule: :button }) do |params, bloc|\n  but = box({ smooth: 6, shadow: { alpha: 0.3 }, width: 25, height: 25, color: :red })\n  but.shadow({ alpha: 0.6, left: -3, top: -3, blur: 3, invert: true })\n  label = params.delete(:label) || 'button'\n  idf_f = params.delete(:id) || identity_generator\n  but.text({id: idf_f, data: label, component: { size: 9 }, center: true, position: :absolute })\n\n  but.instance_variable_set('@on', true)\n  but.set(params)\n\n  def code_logic(but, bloc)\n    but.instance_exec(&bloc) if bloc.is_a?(Proc)\n    if but.instance_variable_get('@on') == true\n      but.instance_variable_set('@on', false)\n    else\n      but.instance_variable_set('@on', true)\n    end\n  end\n\n  but.touch(true) do\n    code_logic(but, bloc)\n  end\n  but\nend\n\ndef roll_playback_verif(val)\n  puts val\nend\n\nclass Atome\n  def roller_play(idf, callback, &bloc)\n    idf = \"\#{idf}_roller\"\n    puts \"create a 'ruby_method' on the fly and make RBevalL('ruby_method(ev)')\"\n    JS.eval <<~JS\n      globalThis.\#{callback} = function(ev) {\n         console.log(ev);\n          console.log('------');\n      };\n    JS\n    JS.eval(\"document.getElementById('\#{idf}').play(\#{callback});\")\n  end\n\n  def roller_stop(idf)\n    idf = \"\#{idf}_roller\"\n    JS.eval(\"document.getElementById('\#{idf}').stop();\")\n  end\n\n  def roller_tempo(idf, tempo)\n    idf = \"\#{idf}_roller\"\n    JS.eval(\"setTempo('\#{idf}', \#{tempo})\")\n  end\nend\n\nroller({ id: :roller, callback: :roll_playback_verif })\n\nbutton({ label: :play, id: :player, top: :auto, bottom: 0 }) do\n  if @on\n    roller_play('roller', 'pianorollCallback') do |note|\n      puts 'super'\n    end\n  else\n    roller_stop('roller')\n  end\nend\n\nslider({ orientation: :vertical, range: { color: :white }, value: 55, width: 18, height: 199, attach: :intuition,\n         left: 900, top: 3, color: :red, cursor: { color: { alpha: 1, red: 0.12, green: 0.12, blue: 0.12 },\n                                                   width: 9, height: 6, smooth: 3 } }) do |value|\n  A.roller_tempo('roller', value * 3)\nend\n\n#  case \"xrange\":\n#         document.getElementById(\"proll\").xrange=k.value*timebase;\n#         break;\n#     case \"xoffset\":\n#         document.getElementById(\"proll\").xoffset=k.value*timebase;\n#         break;\n#     case \"yrange\":\n#         document.getElementById(\"proll\").yrange=k.value;\n#         break;\n#     case \"yoffset\":\n#         document.getElementById(\"proll\").yoffset=k.value;\n#         break;\n#     }\n\n# <button onclick=\"setTempo('proll')\">set tempo</button>\n# <button onclick=\"play()\">Play</button>\n# <button onclick=\"stop()\">Stop</button>\n# <button onclick=\"changeEditMode('proll','dragmono')\">Drag Mono</button>\n# <button onclick=\"changeEditMode('proll','dragpoly')\">Drag Poly</button>\n# <button onclick=\"AddNote('proll')\">Add Note</button>\n# <button onclick=\"setMarkStart('proll')\">set start marker</button>\n# <button onclick=\"setMarkEnd('proll')\">set end marker</button>\n# <button onclick=\"playHead('proll')\">Move play head</button>\n# <button onclick=\"menu('proll')\">menu</button>\n# <button onclick=\"editing('proll')\">edit/select</button>\n# <button onclick=\"group('proll')\">group</button>\n# <button onclick=\"notes('proll')\">notes list</button>\n# <button onclick=\"selectAll('proll')\">select all</button>\n# <button onclick=\"deSelectAll('proll')\">de-select all</button>\n# <button onclick=\"deleteSelectedNotes('proll')\">delete selection</button>\n# <button onclick=\"marker('proll')\">marker</button>\n# <button onclick=\"removeMarker('proll')\">remove marker</button>\n# <button onclick=\"removeAllMarkers('proll')\">remove all markers</button>\n\n# JS.eval <<~JS\n#           var actx, osc, gain;\n#\n#         function init_audio() {\n#             timebase = 16;\n#             actx = new AudioContext();\n#             osc = actx.createOscillator();\n#             gain = actx.createGain();\n#             gain.gain.value = 0;\n#             osc.type = \"sawtooth\";\n#             osc.start();\n#             osc.connect(gain).connect(actx.destination);\n#         }\n#\n#\n#         function Callback(ev) {\n#             const currentTime = actx.currentTime;\n#             const startTime = currentTime + (ev.t - performance.now() / 1000);\n#             const endTime = currentTime + (ev.g - performance.now() / 1000);\n#             osc.detune.setValueAtTime((ev.n - 69) * 100, startTime);\n#             gain.gain.setTargetAtTime(0.5, startTime, 0.005);\n#             gain.gain.setTargetAtTime(0, endTime, 0.1);\n#         }\n#\n#         function play() {\n#             gain.connect(actx.destination);\n#             actx.resume().then(() => {\n#                 console.log('Audio context resumed');\n#             });\n#             document.getElementById(\"proll\").play(Callback);\n#         }\n#\n#         function stop() {\n#             gain.disconnect();\n#             actx.suspend().then(() => {\n#                 console.log('Audio context suspended');\n#             });\n#             document.getElementById('proll').stop()\n#         }\n# JS\n\n#    <script>\n#         var actx, osc, gain;\n#\n#         function init_audio() {\n#             timebase = 16;\n#             actx = new AudioContext();\n#             osc = actx.createOscillator();\n#             gain = actx.createGain();\n#             gain.gain.value = 0;\n#             osc.type = \"sawtooth\";\n#             osc.start();\n#             osc.connect(gain).connect(actx.destination);\n#         }\n#\n#\n#         function Callback(ev) {\n#             const currentTime = actx.currentTime;\n#             const startTime = currentTime + (ev.t - performance.now() / 1000);\n#             const endTime = currentTime + (ev.g - performance.now() / 1000);\n#             osc.detune.setValueAtTime((ev.n - 69) * 100, startTime);\n#             gain.gain.setTargetAtTime(0.5, startTime, 0.005);\n#             gain.gain.setTargetAtTime(0, endTime, 0.1);\n#         }\n#\n#         function play() {\n#             gain.connect(actx.destination);\n#             actx.resume().then(() => {\n#                 console.log('Audio context resumed');\n#             });\n#             document.getElementById(\"proll\").play(Callback);\n#         }\n#\n#         function stop() {\n#             gain.disconnect();\n#             actx.suspend().then(() => {\n#                 console.log('Audio context suspended');\n#             });\n#             document.getElementById('proll').stop()\n#         }\n#     </script>",
+  "on" => "# frozen_string_literal: true\n\n# add new font face\nA.add_text_visual({ path: 'Roboto', name: 'Roboto-Black' })\nA.add_text_visual({ path: 'Roboto', name: 'Roboto-Thin' })\nA.add_text_visual({ path: 'Roboto', name: 'Roboto-LightItalic' })\n\n# now applying it\nfirst_text=text({ data: :hello, component: { size: 55, visual: 'Roboto-Thin' } })\nwait 1 do\n  text({ data: :hello, component: { size: 55, visual: 'Roboto-Black' } })\n  wait 1 do\n    first_text.component({visual: 'Roboto-LightItalic'})\n  end\nend\n",
+  "fullscreen" => "# missing example for fullscreen",
+  "mute" => "# missing example for mute",
+  "drag" => "#  frozen_string_literal: true\n\na=box({width: 666, height: 777, color: :orange})\nb = box({ left: 666, color: :blue, smooth: 6, id: :the_box2, depth: 1 , top: 66})\ncc=circle({color: :red, left: 0, top: 0})\nclone = \"\"\nb.drag(:start) do\n  b.color(:black)\n  b.height(123)\n  # beware you must use grab(:view) else it'll be fasten to the context, that means to 'b' in this case\n  clone = grab(:view).circle({ color: :white, left: b.left, top: b.top, depth: 3 })\nend\n\nb.drag(:stop) do\n  b.color(:purple)\n  b.height=b.height+100\n  clone.delete(true)\nend\n\nb.drag(:locked) do |event|\n  dx = event[:dx]\n  dy = event[:dy]\n  x = (clone.left || 0) + dx.to_f\n  y = (clone.top || 0) + dy.to_f\n  clone.left(x)\n  clone.top(y)\n  puts \"x: \#{x}\"\n  puts \"y: \#{y}\"\nend\ncc.drag({ restrict: {max:{ left: 240, top: 190}} }) do |event|\nend\n\n\nc=circle\n\nc.drag({ restrict: a.id }) do |event|\n\nend\n\nt=text({data: 'touch me to unbind drag stop for b (clone will not deleted anymore)', left: 250 })\nt.touch(true) do\n  b.drag({remove: :stop})\nend\n\ntt= text({data: \"remove drag on circles\", top: 99})\n\ntt.touch(true) do\n  cc.drag(false)\n  c.drag(false)\nend\n\n\n",
+  "drop" => "#  frozen_string_literal: true\n\n\n\ndragged = box({ left: 33,top: 333, width: 333,color: :orange, smooth: 6, id: :drop_zone })\n\ndragged.drop(true) do |event|\n  grab(event[:destination]).color(:white)\n  grab(event[:source]).color(:black)\nend\n\ndragged.drop(:enter) do |event|\n  grab(event[:destination]).color(:red)\nend\n\ndragged.drop(:leave) do |event|\n  grab(event[:destination]).color(:gray)\nend\n\ndragged.drop(:activate) do |event|\n  grab(event[:destination]).color(:yellow)\n  grab(event[:source]).color(:cyan)\nend\n\n\ndragged.drop(:deactivate) do |event|\n  grab(event[:destination]).color(:orange)\nend\nbox({ left: 333, color: :blue,top: 222, smooth: 6, id: :the_box, drag: true })\nbox({ left: 333, color: :red,top: 180, smooth: 9, id: :the_box2, drag: true })\n\nt=text({data: 'touch me to unbind drop enter'})\nt.touch(true) do\n  dragged.drop({ remove: :enter })\nend\n\n",
+  "over" => "#  frozen_string_literal: true\n\nb = box({ left: 666, color: :blue, smooth: 6, id: :the_box2 })\nb.over(true) do\n  b.color(:black)\n  # puts \"I'm inside\"\nend\nb.over(:enter) do\n  puts \"in\"\n  puts \"enter\"\n  b.width= b.width+30\n  b.color(:yellow)\nend\nb.over(:leave) do\n  b.height= b.height+10\n  puts \"out\"\n  puts \"leave\"\n  # alert :out\n  b.color(:orange)\nend\n\n#\nt=b.text('touch me to stop over leave')\nb.touch(true) do\n  b.over({ remove: :enter })\n  t.data('finished')\nend\n\n",
+  "targets" => "# missing example for targets",
+  "start" => "# missing example for start",
+  "stop" => "# missing example for stop",
+  "begin" => "# missing example for begin",
+  "end" => "# frozen_string_literal: true\n\nnew(molecule: :calendar) do |params, &bloc|\n\n  cal = box(params)\n  cal.resize(true)\n  cal_id = cal.id\n\n  ##########################  create calendar ##########################\n  cal_name = cal_id\n  calendar = <<~JAVASCRIPT\n    	 window.\#{cal_name} = new tui.Calendar('#\#{cal_id}', {\n    		defaultView: 'month',\n    		usageStatistics: false,\n    		month: {\n    			startDayOfWeek: 0,\n    		},\n    		week: {\n    			showTimezoneCollapseButton: true,\n    			timezones: [{ timezoneOffset: 0, displayLabel: 'UTC', tooltip: 'UTC' }],\n    		},\n    });\n\n\n    \n     \n  JAVASCRIPT\n\n  JS.eval(calendar)\n\n  ######################### Update view methode ############################\n\n\n\n\n  cal.define_singleton_method(:view) do |view_mode|\n    update_calendar = <<~JAVASCRIPT\n      	 function changeCalendarView(view) {\n      	const validViews = ['day', 'week', 'month'];\n      	if (!validViews.includes(view)) {\n      		console.error(`Vue non valide: ${view}. Les vues valides sont: ${validViews.join(', ')}`);\n      		return;\n      	}\n      	window.\#{cal_name}.changeView(view);\n      }\n      	changeCalendarView('\#{view_mode}');\n\n      	// changeCalendarView('day');\n    JAVASCRIPT\n    JS.eval(update_calendar)\n  end\n\n  cal.define_singleton_method(:event) do |new_event|\n    add_event = <<~JAVASCRIPT\n      window.\#{cal_name}.createEvents([\n      		{\n      			id: '\#{new_event[:id]}',\n      			calendarId: '\#{new_event[:calendarId]}',\n      			title: '\#{new_event[:title]}',\n      			category: '\#{new_event[:category]}',\n      			dueDateClass: '\#{new_event[:dueDateClass]}',\n      			start: '\#{new_event[:start]}',\n      			end: '\#{new_event[:end]}',\n      		},\n      	]);\n    JAVASCRIPT\n    JS.eval(add_event)\n\n  end\n\n\n\n  #################\n  cal.define_singleton_method(:update_event) do |event_id, calendar_id, updates|\n    update_event = <<~JAVASCRIPT\n    window.\#{cal_name}.updateEvent(\n      '\#{event_id}',        // ID de l'événement\n      '\#{calendar_id}',     // ID du calendrier\n      {\n        title: '\#{updates[:title]}',\n        start: new Date('\#{updates[:start]}'),\n        end: new Date('\#{updates[:end]}'),\n        category: '\#{updates[:category]}',\n        dueDateClass: '\#{updates[:dueDateClass]}',\n        isAllDay: \#{updates[:isAllDay] ? 'true' : 'false'},\n        location: '\#{updates[:location]}',\n        raw: \#{updates[:raw] || '{}'},\n        state: '\#{updates[:state]}'\n      }\n    );\n  JAVASCRIPT\n    JS.eval(update_event)\n  end\n  #################\n\n  cal.define_singleton_method(:delete_event) do |event_id, calendar_id|\n    delete_event = <<~JAVASCRIPT\n    window.\#{cal_name}.deleteEvent('\#{event_id}', '\#{calendar_id}');\n  JAVASCRIPT\n    JS.eval(delete_event)\n  end\n\n  ####################\n\n  cal.define_singleton_method(:log_event_range) do\n    log_range = <<~JAVASCRIPT\n    var selectedRanges = [];\n\n    window.\#{cal_name}.on('selectDateTime', function(info) {\n      var range = { start: new Date(info.start), end: new Date(info.end) };\n      selectedRanges.push(range);\n      console.log('Selected ranges:', selectedRanges);\n\n      // Exemple de traitement de chaque plage\n      selectedRanges.forEach(function(range) {\n        console.log('Processing range:', range.start, 'to', range.end);\n      });\n\n      // Réinitialisation après traitement\n      selectedRanges = [];\n    });\n  JAVASCRIPT\n    JS.eval(log_range)\n  end\n  ######################\n\n  cal.define_singleton_method(:handle_range_clear) do\n    clear_range = <<~JAVASCRIPT\n    window.\#{cal_name}.on('selectDateTime', function(info) {\n      // Log the selected range (optional)\n      console.log('Selected range:', new Date(info.start), 'to', new Date(info.end));\n      \n      // Clear the selected range\n      window.\#{cal_name}.clearGridSelections();\n      \n      console.log('Range selection cleared');\n    });\n  JAVASCRIPT\n    JS.eval(clear_range)\n  end\n\n  ######################\n  # now we return main atome\n  cal\nend\ncal = calendar({ id: :the_cal, width: 396, height: 396 })\n# below we get range when drag on the calendar\ncal.log_event_range\n# below we remove teh  range newly created to avoid graphical pollution\ncal.handle_range_clear\nwait 1 do\n  cal.event(	{\n                id: '1',\n                calendarId: '1',\n                title: 'nouvel example',\n                category: 'time',\n                dueDateClass: '',\n                start: '2024-08-20T10:12:00+00:00',\n                end: '2024-08-20T12:17:00+00:00',\n              })\nend\n\nwait 2 do\n  grab(:the_cal).view(:day)\n  wait 2 do\n    cal.view(:week)\n    wait 2 do\n      cal.view(:month)\n      wait 1 do\n        wait 1 do\n          cal.update_event('1', '1', {\n            title: 'Événement mis à jour',\n            start: '2024-08-20T11:00:00+00:00',\n            end: '2024-08-20T13:00:00+00:00',\n            category: 'time'\n          })\n        end\n        cal.delete_event('1', '1')\n      end\n    end\n  end\nend\n\n\n\n\n",
+  "duration" => "# missing example for duration",
+  "mass" => "# missing example for mass",
+  "damping" => "# missing example for damping",
+  "stiffness" => "# missing example for stiffness",
+  "velocity" => "# missing example for velocity",
+  "ease" => "# missing example for ease",
+  "keyboard" => "#  frozen_string_literal: true\n\nt = text :hello\nt.left(99)\n\nt.edit(true)\n\nt.keyboard(:press) do |native_event|\n  event = Native(native_event)\n  puts \"press : \#{event[:key]} :  \#{event[:keyCode]}\"\nend\n\nt.keyboard(:down) do |native_event|\n  event = Native(native_event)\n  if event[:keyCode].to_s == '13'\n    event.preventDefault()\n    t.color(:red)\n  end\n\nend\n\nt.keyboard(:up) do |native_event|\n  event = Native(native_event)\n  puts \"up!!\"\nend\n\nt.keyboard(true) do |native_event|\n  event = Native(native_event)\n  puts \" true => \#{event[:keyCode]}\"\n  puts \"true => \#{event[:key]}\"\n\nend\n\n# t.keyboard(:input) do |native_event|\n#   event = Native(native_event)\n#   puts event\n# end\n\n# t.keyboard(:keydown) do |native_event|\n#   event = Native(native_event)\n#   puts \"down : \#{event[:keyCode]}\"\n# end\n\nc = circle({ top: 123, left: 0, width: 55, height: 55 })\n# c2 = circle({ top: 123, left: 80, width: 55, height: 55 })\n# c3 = circle({ top: 123, left: 150, width: 55, height: 55 })\n\nc.touch(true) do\n  text({ data: 'stop up', top: 150 })\n  t.keyboard({ remove: :up })\nend\n# c2.touch(true) do\n#   text({ data: 'remove all', top: 150 })\n#   t.keyboard(:remove)\n# end\n# c3.touch(true) do\n#   t.edit(false)\n#   text({ data: 'stop editing', top: 150 })\n# end\n\n\n# b33=box({left: 99, top: 99})\n#\n# b33.touch(true) do\n#   t.keyboard({ remove: :up }) do\n#     event = Native(native_event)\n#     puts \"heyeeee up!!\"\n#   end\n# end\n",
+  "resize" => "# frozen_string_literal: true\n\n# please note that whatever the atome resize will return the size of the view!\nview = grab(:view)\nview.on(:resize) do |event|\n  puts \"view size is \#{event}\"\nend\n\nb=box\nb.touch(true) do\n  view.on(:remove)\nend\n\n\nc=circle({ left: 333 })\n\nc.touch(true) do\n  view.on(:resize) do |event|\n    puts \"Now size is : \#{event}\"\n  end\nend",
+  "overflow" => "# frozen_string_literal: true\n\nb = box({ id: :the_container, width: 300, height: 300 })\nb.box({ top: 500, color: :red })\ncc = b.circle({ top: 160, id: :the_circle })\n\ninitial_height = cc.height\ninitial_width = cc.width\nb.overflow(:scroll) do |event|\n  new_height = initial_height + event[:top]\n  cc.height(new_height)\n  { left: event[:top] }\nend\nc = circle({ top: 370, color: :red })\nc.touch(:up) do\n  b.overflow(:remove)\n  c.delete(true)\n  c = circle({ top: 370, left: 90, color: :green })\n  c.touch(true) do\n    b.overflow(:scroll) do |event|\n      puts 'removed!!'\n      new_width = initial_width + event[:top]\n      cc.width(new_width)\n    end\n  end\nend\n\n",
+  "animate" => "# missing example for animate",
+  "width" => "# missing example for width",
+  "height" => "# missing example for height",
+  "size" => "# frozen_string_literal: true\n\n# please note that whatever the atome resize will return the size of the view!\nview = grab(:view)\nview.on(:resize) do |event|\n  puts \"view size is \#{event}\"\nend\n\nb=box\nb.touch(true) do\n  view.on(:remove)\nend\n\n\nc=circle({ left: 333 })\n\nc.touch(true) do\n  view.on(:resize) do |event|\n    puts \"Now size is : \#{event}\"\n  end\nend",
+  "attach" => "# frozen_string_literal: true\n\n# Here is the attach explanation and example\n# the attach method in atome is both a getter and a setter\n# attach and fasten particles serve the same purpose but just in the opposite direction\n# please note that atome.attach([:atome_id]) means that atome will be the parent of the atome with the id :atome_id\n# to sum up :  attach and fasten are both setter and getter :\n# a.attach(b.ib) will attach the current object to the IDs passed in the params. The current atome will be the child of the the atomes width IDS passed in the the params,\n# a.attach(b.ib) means (insert 'b' into 'a') or a is parent b is child\n\n# while a.fasten(b.id) (insert 'a' into 'b')is the opposite to fasten it will attach IDs passed in the params to the current atome. The current atome will be the parent of of the the atomes width IDS passed in the the params\n# a.fasten(b.ib) means (insert 'a' into 'b') or a is child b is parent\n\n# atome.attach([:atome_id]) means that atome will be the child of the atome with the id :atome_id\n# Here is how to use it as a setter :\nb = box({ id: :b315, color: :red })\ncircle({ id: :c_12, top: 0, drag: true, color: :yellow })\n\nc=circle({ id: :c_123, color: :cyan, left: 233, drag: true })\n box({ id: :b_1, left: 333, drag: true })\ngrab(:b_1).attach(:c_123)\n\nbb = box({ top: 99, drag: true })\nbb.attach(:b_1)\n\nbox({ id: :my_test_box })\nwait 1 do\n  b.attach(:c_12)\n  # Here is how to use it as a getter :\n  # to retrieve witch atomes b315 is fasten to  to the atome c_12 just type\n  puts  b.attach # => [:c_12]\n  # to retrieve atome fasten to the atome c_12 just type tha other method\n  puts  c.fasten #=> [:b_1]\nend\n",
+  "fasten" => "#  frozen_string_literal: true\nb = box({ drag: true, id: :the_b, top: 63, left: 63 })\nc = b.circle({ left: 99, id: :the_c })\nb.box({left: 99, top: 99, width: 33, height: 33, id: :second_one})\nt = b.text({ data: 'touch the circle', left: 44, top: 44, id: :the_t })\nc.touch(:down) do\n  b.unfasten([c.id])\n  b.color(:green)\n  t.data('circle unfasten')\n  grab(:infos).data(\"number of item(s) fasten to the box : \#{b.fasten}\")\n  wait 2 do\n    grab(:second_one).delete((true))\n    grab(:infos).data(\"number of item(s) fasten to the box : \#{b.fasten}\")\n    wait 2 do\n      b.color(:red)\n      t.data('unfasten all attached atomes')\n      b.unfasten(:all)\n      grab(:infos).data(\"number of  item fasten to the box : \#{b.fasten}\")\n    end\n  end\nend\n\ntext({id: :infos,left: 155, data: \"number of  item fasten to the box : \#{b.fasten}\"})\n",
+  "unfasten" => "#  frozen_string_literal: true\nb = box({ drag: true, id: :the_b, top: 63, left: 63 })\nc = b.circle({ left: 99, id: :the_c })\nb.box({left: 99, top: 99, width: 33, height: 33, id: :second_one})\nt = b.text({ data: 'touch the circle', left: 44, top: 44, id: :the_t })\nc.touch(:down) do\n  b.unfasten([c.id])\n  b.color(:green)\n  t.data('circle unfasten')\n  grab(:infos).data(\"number of item(s) fasten to the box : \#{b.fasten}\")\n  wait 2 do\n    grab(:second_one).delete((true))\n    grab(:infos).data(\"number of item(s) fasten to the box : \#{b.fasten}\")\n    wait 2 do\n      b.color(:red)\n      t.data('unfasten all attached atomes')\n      b.unfasten(:all)\n      grab(:infos).data(\"number of  item fasten to the box : \#{b.fasten}\")\n    end\n  end\nend\n\ntext({id: :infos,left: 155, data: \"number of  item fasten to the box : \#{b.fasten}\"})\n",
+  "detach" => "#  frozen_string_literal: true\n\nb = box({ drag: true, id: :the_b })\nc = b.circle({ left: 99, id: :the_c })\nd = b.text({ data: :hello, left: 44, top: 44, id: :the_t })\nc.touch(:down) do\n  c.detach(b.id)\nend",
+  "apply" => "# # frozen_string_literal: true\n\nb=box({ left: 12, id: :the_first_box })\ncolor({ id: :the_lemon, red: 1, green: 1 })\nwait 1 do\n  b.apply(:the_lemon)\nend\n\n",
+  "affect" => "# frozen_string_literal: true\n\nbox({ left: 12, id: :the_first_box })\nc=color({ id: :the_col, blue: 0.21, green: 1 })\n\nwait 1 do\n  c.affect(:the_first_box)\nend\n",
+  "collect" => "# missing example for collect",
+  "real" => "# missing example for real",
+  "type" => "# frozen_string_literal: true\n\nb = box({ top: 166, data: :hello,path: './medias/images/red_planet.png'  })\nb.color({ id: :col1, red: 1, blue: 1})\n\n# b.instance_variable_set(\"@top\", 30)\n# b.instance_variable_set(\"@apply\", [c.id])\n# b.instance_variable_set(\"@path\",  )\n\n# b.instance_variable_set(\"@smooth\", 30)\nwait 1 do\n  b.type=:text\n  b.refresh\n  wait 1 do\n    b.type=:image\n    b.refresh\n  end\nend",
+  "id" => "# frozen_string_literal: true\n\nif Universe.internet\n  v = video({ path: \"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4\" })\nelse\n  v = video(:video_missing)\nend\n\nv.touch(true) do\n  v.play(true)\n  wait 3 do\n    v.play(66)\n  end\nend",
+  "name" => "# missing example for name",
+  "active" => "# missing example for active",
+  "markup" => "# frozen_string_literal: true\n\n# For now markup can only be specified at creation time, it will be possible later\nthe_one = text({ data: :hello, markup: :h1 })",
+  "bundle" => "# missing example for bundle",
+  "data" => "# frozen_string_literal: true\n\nA.message({ action: :insert, data: { table: :security, particle: :password, data: 'my_pass'} }) do |datas|\n  puts \"0 data received:  \#{datas}\"\nend\n\nA.message({ action: :insert, data: { table: :identity, particle: :name, data: 'jeezs' } }) do |data_received_from_server|\n  puts \"1 my first insert \#{data_received_from_server}\"\nend\n\nA.message({ action: :insert, data: { table: :identity, particle: :name, data: 'jeezs2' } })\n\nA.message({ action: :query, data: { table: :identity } }) do |data_received_from_server|\n  puts \"2 another insert  : \#{data_received_from_server}\"\nend\n\nA.message({ action: :query, data: { table: :identity } }) do |data_received|\n  puts \"3 received : \#{data_received}\"\nend\n\nA.message({ action: :insert, data: { table: :identity, particle: :name, data: 'jeezs3' } }) do |result|\n  puts \"4 insert done : \#{result}\"\nend\n\nA.message({ action: :insert, data: { table: :identity, particle: :name, data: 'jeezs4' } }) do |result|\n  puts \"5 last message received: \#{result}\"\nend\n\nA.message({ action: :insert, data: { table: :security, particle: :name, data: 'john doe' } }) do |data_received_from_server|\n  puts \"6 test 1 : \#{data_received_from_server}\"\nend\n\nA.message({ action: :insert, data: { table: :identity, particle: :tit, data: 'dummy' } }) do |data_received_from_server|\n  puts \"7 test 2 :  \#{data_received_from_server}\"\nend\n\nA.message({ action: :insert, data: { table: :unknown, particle: :name, data: 'dummy2' } }) do |data_received_from_server|\n  puts \"test 3 :  \#{data_received_from_server}\"\nend",
+  "category" => "# frozen_string_literal: true\n\n# assign a class to atom object in the webview\n\nt=text('touch the box')\nb=box({ left: 12, id: :the_first_box })\nb.category(:matrix)\nb.touch(true) do\n  b.remove({ category: :matrix})\n  t.data= \" category is : \#{b.category}\"\n  wait 1 do\n    b.category(:new_one)\n    t.data= \" category is : \#{b.category}\"\n  end\nend\nt.data= \" category is : \#{b.category} \"\n",
+  "selection" => "# missing example for selection",
+  "selected" => "# frozen_string_literal: true\n\nt = text({ data: 'touch me to select all', id: :the_text })\nb = box({ left: 12, id: :the_box })\nc = circle({ left: 230, id: :the_circle, color: { blue: 1, id: :c1 } })\nc.color({ green: 1, id: :c2 })\n# to change default selection style\nUniverse.default_selection_style = { border: { thickness: 3, red: 1, green: 0, blue: 1, alpha: 1, pattern: :dotted } }\n\nc.touch(true) do\n  if c.selected\n    c.selected(false)\n  else\n    # c.selected(true)\n    # example of custom selection style\n    c.selected({ shadow: { id: :titi,\n                           left: 9, top: 3, blur: 9,\n                           invert: false,\n                           red: 0, green: 0, blue: 0, alpha: 1\n    }, border: { id: :toto, thickness: 5, red: 1, green: 1, blue: 1, alpha: 1,\n                 pattern: :dotted, inside: true }\n               })\n  end\nend\n\nimage({ path: 'medias/images/red_planet.png', id: :the__red_planet, top: 233 })\n\nt.touch(true) do\n  puts \"1 current_user - \#{grab(Universe.current_user).selection}\"\n  puts \"1 - b selected : \#{b.selected}\"\n  grab(:view).fasten.each do |atome_found|\n    grab(atome_found).selected(true)\n  end\n  puts \"2 - current_user : \#{grab(Universe.current_user).selection}\"\n  puts \"2 - b selected : \#{b.selected}\"\n  selected_items = grab(Universe.current_user).selection # we create a group\n\n  selected_items.each do |atome_id_selected|\n    atome_selected = grab(atome_id_selected)\n    atome_selected.width = rand(333)\n    atome_selected.height = rand(333)\n\n  end\n  b.selected(false)\n  puts \"3 current_user- \#{grab(Universe.current_user).selection}\"\n  puts \"3 - b selected : \#{b.selected}\"\n\n  grab(Universe.current_user).selection.color(:red)\n  grab(Universe.current_user).selection.each do |el|\n    puts el\n  end\n  puts grab(Universe.current_user).selection.collect\nend\n\n# image({ path: \"./medias/images/logos/vie.svg\", left: :auto, right: 3, top: 0 , size: 30})\n\n",
+  "format" => "# missing example for format",
+  "alien" => "# missing example for alien",
+  "email" => "# missing example for email",
+  "cells" => "# missing example for cells",
+  "component" => "# missing example for component",
+  "edit" => "# frozen_string_literal: true\nbox\ndragger = box({ width: 333, height: 16, top: 0 })\nback = box({ width: 333, height: 222, top: dragger.height })\nbody = back.box({ top: 0, width: '100%', height: '100%', component: { size: 12 }, id: :poil })\ncode_runner = dragger.circle({ left: 3, top: 3, width: 12, height: 12, color: :red })\ncode_closer = dragger.circle({ left: :auto ,right: 3, top: 3, width: 12, height: 12, color: :black })\n\nbody.editor({ id: :the_ed, code: \"def my_script\n\n  return 100\n\nend\", width: 333, height: 192, color: :lightgray, top: 0 })\n\ndef create_editor(code_id)\n  js_code = <<~JAVASCRIPT\n    var editor = CodeMirror.fromTextArea(document.getElementById(\"\#{code_id}\"), {\n        lineNumbers: true,\n        mode: \"ruby\",\n        theme: \"monokai\"\n    });\n    editor.getWrapperElement().id = \"atome_editor_\#{code_id}\";\n    document.getElementById(\"atome_editor_\#{code_id}\").CodeMirrorInstance = editor;\n\n  JAVASCRIPT\n  JS.eval(js_code)\nend\n\ndef set_code(code_id, content)\n  js_code = <<~JAVASCRIPT\n    var editorWrapper = document.getElementById(\"atome_editor_\#{code_id}\");\n                 var editorInstance = editorWrapper.CodeMirrorInstance;\n                 var newContent = \"\#{content}\";\n                 editorInstance.setValue(newContent);\n  JAVASCRIPT\n  JS.eval(js_code)\nend\n\ndef get_code(code_id)\n  js_code = <<~JAVASCRIPT\n    var editorWrapper = document.getElementById(\"atome_editor_\#{code_id}\");\n\n               var editorInstance = editorWrapper.CodeMirrorInstance;\n               return editorInstance.getValue();\n  JAVASCRIPT\n  JS.eval(js_code)\nend\n\ncreate_editor(\"the_ed\")\n\nwait 1 do\n  editor_id = \"the_ed\"\n  set_code(editor_id, \"def new_script\\n  puts 'so cool'\\ncircle({top: rand(333), color: :red})\\nend\\nnew_script\")\nend\n\ncode_closer.touch(true) do\n  back.delete(true)\n  dragger.delete(true)\nend\n\ncode_runner.touch(true) do\n  editor_id = \"the_ed\"\n  data_found = get_code(\"the_ed\").to_s\n  grab(:the_t).code(data_found.to_s)\n  atome_before = Universe.user_atomes\n  eval(data_found)\n  code_editor = grab(editor_id)\n  atome_to_delete = code_editor.data\n  atome_to_delete.each do |atome_id_found|\n    grab(atome_id_found).delete(false)\n  end\n  atome_after = Universe.user_atomes\n  new_atomes = atome_after - atome_before\n  code_editor.data(new_atomes)\nend\ndragger.drag(restrict: :view ) do |event|\n  view = grab(:view)\n  view_width = view.to_px(:width)\n  view_height = view.to_px(:height)\n\n  dx = event[:dx]\n  dy = event[:dy]\n\n  # Calculer les nouvelles positions\n  x = (back.left || 0) + dx.to_f\n  y = (back.top || 0) + dy.to_f\n\n  # Contrainte de `x` entre 0 et `view_width`\n  if x > 0 && x < view_width - back.width\n    back.left(x)\n  else\n    # Contrainte si `x` dépasse les limites\n    x = [0, [x, view_width - back.width].min].max\n    back.left(x)\n  end\n\n  # Contrainte de `y` pour qu'il soit supérieur à une certaine valeur\n  if y > 0 + dragger.height && y < view_height + dragger.height\n    back.top(y)\n  else\n    # Contrainte si `y` dépasse les limites\n    y = [0 + dragger.height, [y, view_height + dragger.height].min].max\n    back.top(y)\n  end\nend\nback.resize({ size: { min: { width: 120, height: 90 }, max: { width: 3000, height: 3000 } } }) do |event|\n  dx = event[:dx]\n  # dy = event[:dy]\n  x = (dragger.width || 0) + dx.to_f\n  # y = (back.top || 0) + dy.to_f\n  dragger.width(x)\n  # back.top(y)\nend\n\nback.shadow({ alpha: 0.6, blur: 16, left: 3, top: 16 })\n\nback.drag(false)\ndragger.touch(:double) do\n  if back.display == :none\n    back.display(:block)\n  else\n    back.display(:none)\n  end\nend\n\n# a_list=[]\n# Universe.atome_list.each  do |k, v|\n#   a_list << k\n# end\n#\n# alert a_list\n#\n# p_list=[]\n#  Universe.particle_list.each  do |k, v|\n#    p_list << k\n#  end\n#\n# alert p_list\n#\n# box(id: :mon_carre, width: 300, height: 300)\nalert \"pseudo element and trigger absctrator\"",
+  "style" => "# frozen_string_literal: true\nb = box\n\nb.style({ left: 33, width: 44, rotate: 23, color: :yellowgreen, blur: 44 })",
+  "hide" => "# missing example for hide",
+  "remove" => "# frozen_string_literal: true\n\nb = box({ top: 166, id: :the_box, left: 333 })\nb.color({ id: :new_col, red: 1 })\n\nb.touch(true) do\n  # alert b.color\n  b.remove(:box_color)\n\n  # alert b.color\n  wait 1 do\n    grab('box_color').red(1)\n  end\nend\n# b.color({id: :other_col,  green: 1})\n# # b.paint({gradient: [:other_col, :new_col]})\n# color({id: :last_col,  green: 0.3, blue: 0.5})\n# color({id: :last_col2,  red: 1, blue: 0.5})\n#\n# b.shadow({\n#            id: :s1,\n#            # affect: [:the_circle],\n#            left: 9, top: 3, blur: 9,\n#            invert: false,\n#            red: 0, green: 0, blue: 0, alpha: 1\n#          })\n#\n#\n# wait 1 do\n#   b.remove(:other_col)\n#   wait 1 do\n#     b.remove(:new_col)\n#     wait 1 do\n#       b.remove(:box_color)\n#\n#       wait 1 do\n#         b.apply(:last_col)\n#         wait 1 do\n#           b.apply(:last_col2)\n#           b.remove(:s1)\n#         end\n#       end\n#     end\n#   end\n# end\n# b.touch(true) do\n#   b.shadow({\n#              id: :s1,\n#              # affect: [:the_circle],\n#              left: 9, top: 3, blur: 9,\n#              invert: false,\n#              red: 0, green: 0, blue: 0, alpha: 1\n#            })\n#\n#   puts \"before => \#{b.apply}\"\n#   b.remove({all: :color})\n#   puts \"after => \#{b.apply}\"\n#   wait 1 do\n#     b.paint({id: :the_gradient_1,gradient: [:box_color, :circle_color]})\n#     b.paint({id: :the_gradient,gradient: [:other_col, :new_col]})\n#     wait 1 do\n#       b.remove(:the_gradient)\n#       wait 1 do\n#         b.remove(all: :shadow)\n#         b.color(:cyan)\n#       end\n#     end\n#   end\n# end\n#\n",
+  "classes" => "# missing example for classes",
+  "remove_classes" => "# missing example for remove_classes",
+  "definition" => "# missing example for definition",
+  "gradient" => "# frozen_string_literal: true\n\ncirc = circle({ drag: true })\ncirc.remove({ all: :color })\ncol_1 = circ.color(:white)\ncol_2 = circ.color({ red: 1, id: :red_col })\ncol_4 = circ.color({ blue: 1, id: :red_col2, alpha: 0.3 })\ncol_5 = circ.color({ red: 0, green: 1, id: :red_col3, alpha: 0.7 })\ncol_3 = circ.color(:yellow)\nwait 0.5 do\n  circ.paint({ gradient: [col_1.id, col_2.id], direction: :left })\n  wait 0.5 do\n    circ.paint({ id: :the_painter, rotate: 69, gradient: [col_1.id, col_2.id] })\n    wait 0.5 do\n      circ.color(:cyan)\n      circ.paint({ gradient: [col_1.id, col_2.id, col_3.id], rotate: 33, diffusion: :conic })\n      wait 0.5 do\n        painter = circ.paint({ id: :the_painter2, gradient: [col_1.id, col_2.id, col_3.id], direction: :left })\n        wait 0.5 do\n          # circ.color(:blue)\n          circ.paint({ gradient: [col_4.id, col_5.id], diffusion: :conic })\n          wait 1 do\n            circ.color(:blue)\n            # circ.paint({ gradient: [col_5.id, col_5.id], diffusion: :conic })\n          end\n        end\n      end\n    end\n  end\n\nend\n\nthe_text = text({ data: 'hello for al the people in front of their machine', center: true, top: 222, width: 777, component: { size: 66 } })\n\nthe_text.left(333)\n\n  the_text.paint({ gradient:  [col_1.id, col_2.id], direction: :left , id: :painted_love })\n\n# #TODO : gradient on text!\n\n",
+  "thickness" => "# missing example for thickness",
+  "pattern" => "# missing example for pattern",
+  "fill" => "# frozen_string_literal: true\n\nb=box({width: 300, height: 333, color: {alpha: 0}})\nimage({id: :logo,path: 'medias/images/logos/atome.svg', width: 66, left: 555})\ngrab(:black_matter).image({id: :planet,path: 'medias/images/red_planet.png', width: 66,height: 66,  left: 555, top: 180})\n\n\nb.fill([atome:  :logo, width: 33, height: 33 ])\nb.overflow(:hidden)\nwait 1 do\n  b.fill([atome:  :planet, width: 33, height: 33 ])\n  wait 1 do\n    b.fill([{atome:  :planet,repeat: {x: 5, y: 3}}])\n    wait 1 do\n      b.fill([{atome:  :planet,width: 33, height: 33 ,rotate: 33, size: { x: 800,y: 600 }, position: { x:-200,y: -200 } }])\n      wait 3 do\n        b.fill([{atome:  :planet,repeat: {x: 5, y: 3}}, { atome: :logo, width: 33, height: 33 ,  opacity: 0.3} ])\n      end\n    end\n  end\nend\n\nb.drag(true)",
+  "opacity" => "# frozen_string_literal: true\n\nimage({id: :planet,path: 'medias/images/red_planet.png', width: 66,height: 66,  left: 33, top: 33})\nb=box({width: 66, height: 66, color: :yellowgreen})\n\n  wait 1 do\n\n    b.opacity(0.3)\n  end\n",
+  "exchange" => "# frozen_string_literal: true\n\nb = box({ width: 200, height: 200, color: :white })\n\na = b.box({ color: :green, left: 33, id: :box, shadow: {\n  id: :menu_active_shade,\n  left: 9,\n  top: -3,\n  blur: 10,\n  invert: false,\n  red: 0,\n  green: 0,\n  blue: 0,\n  alpha: 1 } })\nwait 2 do\n  a.exchange({ color: :red, top: 33})\nend\n",
+  "red" => "# missing example for red",
+  "green" => "# missing example for green",
+  "blue" => "# missing example for blue",
+  "alpha" => "# missing example for alpha",
+  "diffusion" => "# missing example for diffusion",
+  "clean" => "# missing example for clean",
+  "insert" => "# missing example for insert",
+  "sort" => "# missing example for sort",
+  "inside" => "# missing example for inside",
+  "margin" => "# missing example for margin",
+  "value" => "# missing example for value",
+  "behavior" => "# frozen_string_literal: true\n\n# Behaviors allow you to add specific code to any particle, enabling the particle to behave differently.\n# Here, when the first box receives a value, it behaves differently from the second box even if they received\n# the same params .\n\ntext({ data: :hello, id: :the_txt, left: 120 })\n\nb=box\n\nmy_lambda= lambda do |new_value|\n  grab(:the_txt).color(:red)\nend\n\nb.behavior({value: my_lambda})\n\nmy_second_lambda= lambda do |new_value|\n  grab(:the_txt).data('from cirle')\nend\nc=box({top: 69})\nc.behavior({value: my_second_lambda})\n\nwait 1 do\n  c.value(:ok)\nend\nwait 2 do\n  b.value(:ok)\nend\n\n\n\n\n",
+  "orientation" => "# missing example for orientation",
+  "align" => "# frozen_string_literal\n\ntext({data: :centering,align: :center, width: 180, top: 33, left: 0, position: :absolute, color: :red})",
+  "actor" => "# frozen_string_literal: true\n\nbbb = box({left: 66})\nccc = bbb.circle(id: :the_circle)\n\nbbb.role(:first)\nbbb.role(:second)\nbbb.delete(:left)\nbbb.delete(:role)\n\nbbb.role(:fourth)\nbbb.role(:five)\nbbb.role({ remove: :last })\n\nbbb.actor({ the_circle: :buttons })\nbbb.actor({ the_circle: :dummy })\nbbb.actor({ the_circle: :menu })\n\nbbb.actor({ remove: { the_circle: :dummy } })\n\nputs \"1 ===> \#{bbb.role}\"\nputs \"2 ===> \#{bbb.actor}\"\nputs \"3 ===> \#{ccc.role}\"",
+  "role" => "# frozen_string_literal: true\n\nbbb = box({left: 66})\nccc = bbb.circle(id: :the_circle)\n\nbbb.role(:first)\nbbb.role(:second)\nbbb.delete(:left)\nbbb.delete(:role)\n\nbbb.role(:fourth)\nbbb.role(:five)\nbbb.role({ remove: :last })\n\nbbb.actor({ the_circle: :buttons })\nbbb.actor({ the_circle: :dummy })\nbbb.actor({ the_circle: :menu })\n\nbbb.actor({ remove: { the_circle: :dummy } })\n\nputs \"1 ===> \#{bbb.role}\"\nputs \"2 ===> \#{bbb.actor}\"\nputs \"3 ===> \#{ccc.role}\"",
+  "password" => "# missing example for password",
+  "left" => "# missing example for left",
+  "right" => "# frozen_string_literal: true\n\nb=box({ left: 12, id: :the_first_box })\nb.touch(true) do\n\n  alt=b.alternate(true, false)\n  if alt\n    b.color(:green)\n  else\n    b.color(:red)\n  end\n  allow_right_touch(alt)\n\nend\n\n",
+  "top" => "# missing example for top",
+  "bottom" => "# missing example for bottom",
+  "rotate" => "# frozen_string_literal: true\n\n\nb=box\ni=b.image({path: 'medias/images/icons/hamburger.svg'})\nwait 2 do\n  i.rotate(22)\nend",
+  "direction" => "# missing example for direction",
+  "depth" => "# missing example for depth",
+  "position" => "# missing example for position",
+  "organise" => "# missing example for organise",
+  "spacing" => "# missing example for spacing",
+  "display" => "#  frozen_string_literal: true\n\n\nnew({ particle: :display, render: false }) do |params|\n  # alert type\n  unless params[:items]\n    params[:items] = { width: 200, height: 33 }\n  end\n  container_width = params[:width] ||= width\n  container_height = params[:heigth] ||= height\n  container_top = params[:top] ||= top\n  container_left = params[:left] ||= left\n\n  item_width = params[:items][:width] ||= 400\n  item_height = params[:items][:height] ||= 50\n  item_margin = params[:margin] ||= 3\n\n  mode = params[:mode]\n\n  case mode\n  when :none\n  when :custom\n  when :list\n    if params[:data].instance_of? Array\n    elsif params[:data] == :particles\n      list_id = \"\#{id}_list\"\n      unless grab(list_id)\n        container = ''\n        attach.each do |parent|\n          container = grab(parent).box({ id: list_id, left: container_left, top: container_top, width: container_width, height: container_height, overflow: :auto, color: :black, depth: 0 })\n          container.on(:resize) do |event|\n            puts event[:dx]\n          end\n          container.resize({ min: { width: 100, height: 100 }, max: { width: 300, height: 700 } }) do |event|\n            puts event\n          end\n\n        end\n        sorted_particles = particles.sort.to_h\n        sorted_particles.each_with_index do |(particle_found, value), index|\n          line = container.box({ id: \"\#{list_id}_\#{index}\", width: item_width, height: item_height, left: 0, top: ((item_height + item_margin) * index) })\n          line.text({ data: \"\#{particle_found} : \", top: -item_height / 2, left: 2 })\n          if value.instance_of?(String) || value.instance_of?(Symbol) || value.instance_of?(Integer)\n            input_value = line.text({ data: value, top: -item_height / 2, left: 5, edit: true })\n            input_value.keyboard(:down) do |native_event|\n              event = Native(native_event)\n              if event[:keyCode].to_i == 13\n                event.preventDefault()\n                input_value.color(:red)\n              end\n            end\n            input_value.keyboard(:up) do |native_event|\n              data_found = input_value.data\n              send(particle_found, data_found)\n            end\n          else\n            puts \"value is :\#{value.class} => \#{value}\"\n          end\n        end\n        closer = container.circle({ id: \"\#{list_id}_closer\", width: 33, height: 33, top: 3, right: 3, color: :red, position: :sticky })\n        closer.touch(true) do\n          container.delete(true)\n        end\n      end\n    else\n    end\n  when :grid\n    grid_id = \"\#{id}_grid\"\n    unless grab(grid_id)\n      container = grab(:view).box({ id: grid_id, width: container_width, height: container_height, overflow: :auto, color: :white, depth: 0 })\n      ############## deletion\n      container.touch(true) do\n        puts \"removing container recursively : \#{container.id}\"\n        val_1= Universe.atomes.length\n        puts \"val_1 : \#{val_1}\"\n        container.delete({ recursive: true })\n        val_2= Universe.atomes.length\n        puts \"val_2 : \#{val_2}\"\n        puts \"val_1-val_2 : \#{val_1-val_2}\"\n      end\n      ############## deletion\n      params[:data].each_with_index do |item, index|\n        # unless grab(\"\#{grid_id}_\#{index}\")\n          item = container.box({ id: \"\#{grid_id}_\#{index}\", top: 0, position: :relative, left: nil, right: nil })\n          # item.touch(true) do\n          #   alert \"removing container recursively : \#{container.id}\"\n          #   val_1= Universe.atomes.length\n          #   puts \"val_1 : \#{val_1}\"\n          #   container.delete({ recursive: true })\n          #   val_2= Universe.atomes.length\n          #   puts \"val_2 : \#{val_2}\"\n          #   puts \"val_1-val_2 : \#{val_1-val_2}\"\n          # end\n        # end\n      end\n      # container.html.style('gridTemplateColumns', '1fr 1fr 1fr 1fr 1fr 1fr')\n      container.html.style('gridTemplateColumns', 'repeat(4, 1fr)')\n      container.html.style('gridTemplateRows', 'auto')\n      container.html.style('gridGap', '10px')\n      container.html.style('display', 'grid')\n      container.on(:resize) do |event|\n        puts event[:dx]\n      end\n      container.resize({ min: { width: 10, height: 10 }, max: { width: 300, height: 700 } }) do |event|\n        puts event\n      end\n    end\n  end\nend\nnew({ particle: :visible })\nnew({ renderer: :html, method: :visible }) do |params|\n  if params == false\n    params = :none\n  elsif params == true\n    params = :block\n  end\n  html.visible(params)\nend\nnew({ particle: :position }) do\nend\nnew({ method: :position, type: :integer, renderer: :html }) do |params|\n  html.style(:position, params)\nend\n\nb = box({ color: :red })\n\nb.touch(true) do\n  # b.display({ mode: :list, data: :particles, width: 333, items: { width: 200, height: 33 }, height: 33, margin: 5 })\n  b.display({ mode: :list, data: :particles, items: { width: 200, height: 33 }, height: 33, margin: 5 })\nend\n############## Builder #############\nc = circle({ left: 333 })\nfake_array = []\ni = 0\nwhile i < 32 do\n  fake_array << i\n  i += 1\nend\nc.touch(true) do\n  c.display({ mode: :grid, data: fake_array,width: 333, height: 333 })\nend\n############## Generator #############\ngen = generator({ id: :genesis, build: { top: 66, copies: 1 } })\ngen.build({ id: :bundler, copies: 32, tag: { group: :to_grid }, color: :red, width: 33, height: 44, left: 123, smooth: 9, blur: 3, attach: :view })\ngrab(:bundler_1).color(:blue)\n\ncolor({ id: :the_orange, red: 1, green: 0.4 })\n\natome_to_grid = tagged({ group: :to_grid })\nthe_group = group({ collected: atome_to_grid })\n\nthe_group.touch(true) do |i|\n  color(:green)\nend\n# wait 0.3 do\nthe_group.left(633)\nwait 1 do\n  grab(:view).display({ mode: :grid, data: fake_array })\nend\n\n\n\n\n\n",
+  "layout" => "# frozen_string_literal: true\n\nb = box({ color: :red, id: :the_box, left: 3 })\n5.times do |index|\n  width_found = b.width\n  b.duplicate({ left: b.left + index * (width_found + 45), top: 0, category: :custom_category })\nend\n\ngrab(:view).fasten.each do |atome_found|\n  grab(atome_found).selected(true)\nend\ngrab(:the_box_copy_1).text(:hello)\n\nselected_items = grab(Universe.current_user).selection # we create a group\n# we collect all atomes in the view\natomes_found = []\nselected_items.each do |atome_found|\n  atomes_found << atome_found\nend\n\n\nselected_items.layout({ mode: :default, width: 500, height: 22 })\n\nwait 1 do\n  selected_items.layout({ mode: :grid, width: 900, height: 500, color: :green, element: { rotate: 22, height: 100, width: 150 } })\n  wait 1 do\n    selected_items.layout({ mode: :grid, width: 1200, height: 500, overflow: :scroll })\n    wait 1 do\n      selected_items.layout({ mode: :default, width: 500, height: 22 })\n      wait 1 do\n        selected_items.layout({ id: :my_layout, mode: :list, width: 800, height: 800, overflow: :scroll, element: { height: 22, width: 800 } })\n        wait 1 do\n          selected_items.layout({ mode: :default })\n        end\n      end\n    end\n  end\nend\n",
+  "center" => "# frozen_string_literal: true\n\nb= box({ center:  { x: 0, y: 0, dynamic: true }})\n\n# b.center({ x: '10%', y: '20%' })\n# b.center({ x: true, y: true })\n# box({center: true})",
+  "increment" => "# frozen_string_literal: true\n\ncc=color({red: 1, blue: 0.1,id: :the_col})\nb=box({ left: 12, id: :the_first_box, apply: cc.id  })\nc=circle({ left: 99, top: 99 })\n\nwait 1 do\n  c.increment({left: 33, top: 99})\n  b.increment({left: 33, top: 99})\n  wait 1 do\n    c.increment({width: 33, top: -22})\n    b.increment({width: 33, top: -9})\n    cc.increment({red: -0.5})\n    wait 1 do\n      cc.increment({blue: 1})\n    end\n    # Atome.sync(:ok)\n  end\nend\n\n# wait 3 do\n#   color(:red)\n# end\n",
+  "longitude" => "# missing example for longitude",
+  "latitude" => "# missing example for latitude",
+  "location" => "# missing example for location",
+  "zoom" => "# missing example for zoom",
+  "pan" => "# missing example for pan",
+  "markers" => "# missing example for markers",
+  "renderers" => "# missing example for renderers",
+  "code" => "#  frozen_string_literal: true\n\n\n\nb=box({color: :red})\nb.touch(true) do\n  JS.eval('loadFeature()') # found in atome.js file\nend\n\n",
+  "run" => "#  frozen_string_literal: true\n\nb = box({ left: 333, color: :blue, smooth: 6, id: :the_box2 })\n\n\n\nexec_code=lambda do\n\n  wait 1 do\n    b.color(:violet)\n  end\n\nend\n\nb.run(exec_code)\n\n\n",
+  "target" => "#  frozen_string_literal: true\n\nb = box({ left: 333, color: :blue, smooth: 6, id: :the_box2 })\n\nt = text({ id: :the_text, data: 'touch the box and wait!' })\n\nexec_code=lambda do\n\n  wait 2 do\n    t.data('it works!! ')\n  end\n\nend\nb.code(:hello) do\n  circle({ left: rand(333), color: :green })\nend\nb.run(:hello)\nb.touch(:tap) do\n  {\n    color: :cyan,\n    target: { the_text: { data: :super! } },\n    run: exec_code\n  }\nend\n\n",
+  "delete" => "# frozen_string_literal: true\n\nb = box({left: 99, top: 99})\nb.text({ data: 'click me' })\n\n# wait 5 do\n#   b.delete(:left)\n#   puts 'o'\n# end\norange=''\nb.touch(true) do\n\n  c = grab(:view).circle({id: :circling, left: 222, color: :orange, blur: 1.9 })\n  orange=c.box({id: :boxing,color: {id: :orange_col, red: 1, blue: 0.2 }, width: 33, height: 33, left: 123})\n  orange.shadow({\n             id: :s1,\n             # affect: [:the_circle],\n             left: 9, top: 3, blur: 9,\n             invert: false,\n             red: 0, green: 0, blue: 0, alpha: 1\n           })\n  c.box({id: :boxy,color: {id: :red_col, red: 1 }, width: 33, height: 33, left: 333})\n  c.text('tap here')\n  wait 0.5 do\n    c.delete(:left)\n    wait 0.5 do\n      # orange.color(:pink)\n       c.delete(:blur)\n    end\n  end\n\n  c.touch(:down) do\n    grab(:circling).delete({ recursive: true }) if grab(:circling)\n  end\n  # alert orange.apply\n  # wait 4 do\n  #   grab(:circling).delete({ recursive: true })if grab(:circling)\n  # end\nend\n\n\n\n\n############\n# b = box({left: 333, id: :the_box_1})\n# b.color({id: :the_orange_col, red: 1, blue: 0.5})\n# b.circle({top: 66, id: :the_circle_1, color: :yellow})\n#\n# b.shape({id: :tutu})\n# b.shape({id: :toto}) #######\n# b.circle({id: :invisible}) ######\n#\n# wait 1 do\n#   b.delete(:left)\n# end\n# #\n# wait 3 do\n#\n#   b.shape.each do |fasten_atome_id|\n#     fasten_atome_id.left(333)\n#     wait 2 do\n#       fasten_atome_id.delete(true)\n#     end\n#   end\n#\n# end\n# #\n# #\n# wait 4 do\n#   b.delete(:color)\n# end\n\n# ################## end tests ##################\n#\n# # recursive example\n# bb=box({id: :the_parent_box})\n# bb.text({id: :text_0, data: 'test'})\n# bb.text({id: :text_1, data: 'poil'})\n# bb.color({id: :the_colo, red: 1})\n# col=color({ id: :col_1, red: 1, green: 0.5 })\n#\n# # alert \"before creation : \#{bb}\"\n# bb.touch(true) do\n#   bb.box({fasten: col.id, id: :fasten_box})\n#   c=bb.circle(({ id: :circle_1 }))\n#   c.text({id: :text_1, data: :hello})\n#   bb.text(:good)\n#   # alert \"after creation : \#{bb}\"\n#   wait 1 do\n#   bb.physical.each do |fasten_atome_id|\n#         bb.delete({id: fasten_atome_id, recursive: true})\n#     end\n#\n#     # wait 1 do\n#     #   alert \"1 sec after deletion : \#{bb}\"\n#     # end\n#   end\n# end\n\n# ########################\n# puts  Universe.atomes\n# puts  Universe.user_atomes\n# puts  Universe.system_atomes\n\n# physical_found=[\"text_0\",\"fasten_box\",\"circle_1\",\"fasten_box\",\"circle_1\"]\n# clean_physical=physical_found.uniq\n# alert clean_physical\n\n# b=box(drag: true)\n# c=circle\n# # c.attach(b.id)\n# b.attach(c.id)\n# alert b\n# alert c\n\n",
+  "clear" => "# frozen_string_literal: true\n\n# here is how to clear the content of an atome\nb=box\nc=circle\nb.left(0)\nc.left(222)\nwait 2 do\n  # Important : please note that the view is also an atome, this this a system atome that can't be deleted,\n  # There are a few system atomes created at init time\n  # Here are the list of the system atomes created at system startup:\n  #  we can clear it's content using .clear(true) its the same action as if I have done : b.delete(true) and c.delete(true)\n  grab(:view).clear(true)\nend\n\n\n# here are the list of system atomes created at system startup :\n\n\n#Atome.new(\n#   { renderers: [], id: :eDen, type: :element, tag: { system: true }, attach: [], fasten: [] }\n# )\n# Atome.new(\n#   { renderers: [], id: :user_view, type: :element, tag: { system: true },\n# 	attach: [:eDen], fasten: [] }\n# )\n#\n# # color creation\n# Atome.new(\n#   { renderers: default_render, id: :view_color, type: :color, tag: ({ system: true, persistent: true }),\n# 	red: 0.15, green: 0.15, blue: 0.15, alpha: 1, top: 12, left: 12, diffusion: :linear, attach: [], fasten: [] }\n# )\n#\n# Atome.new(\n#   { renderers: default_render, id: :shape_color, type: :color, tag: ({ system: true, persistent: true }),\n# 	red: 0.4, green: 0.4, blue: 0.4, alpha: 1, attach: [], fasten: [] }\n# )\n#\n# Atome.new(\n#   { renderers: default_render, id: :box_color, type: :color, tag: ({ system: true, persistent: true }),\n# 	red: 0.5, green: 0.5, blue: 0.5, alpha: 1, attach: [], fasten: [] }\n# )\n#\n# Atome.new(\n#   { renderers: default_render, id: :invisible_color, type: :color, tag: ({ system: true, persistent: true }),\n# 	red: 0, green: 0, blue: 0, alpha: 1, attach: [], fasten: [] }\n# )\n#\n# Atome.new(\n#   { renderers: default_render, id: :text_color, type: :color, tag: ({ system: true, persistent: true }),\n# 	red: 0.9, green: 0.9, blue: 0.9, alpha: 1, attach: [], fasten: [] }\n# )\n#\n# Atome.new(\n#   { renderers: default_render, id: :circle_color, type: :color, tag: ({ system: true, persistent: true }),\n# 	red: 0.6, green: 0.6, blue: 0.6, alpha: 1, attach: [], fasten: [] }\n# )\n#\n# # system object creation\n# # the black_matter is used to store un materialized atomes\n# Atome.new(\n#   { renderers: default_render, id: :black_matter, type: :shape, attach: [:user_view],apply: [],\n# 	left: 0, right: 0, top: 0, bottom: 0, width: 0, height: 0, overflow: :hidden, tag: { system: true }, fasten: []\n#   })\n#\n# # view port\n# Atome.new(\n#   { renderers: default_render, id: :view, type: :shape, attach: [:user_view], apply: [:view_color],\n# 	tag: { system: true },\n# 	fasten: [], left: 0, right: 0, top: 0, bottom: 0, width: :auto, height: :auto, overflow: :auto,\n#   }\n#\n# )\n#\n# # unreal port, hold system object and tools\n# Atome.new(\n#   { renderers: default_render, id: :intuition, type: :shape, attach: [:user_view], tag: { system: true },\n# 	left: 0, top: 0, width: 0, height: 0, overflow: :visible, fasten: [],apply: []\n#   }\n# )\n#\n# machine_id = :dummy_machine\n# # attention we must used two separate pass to avoid the password to be encode twice\n# machine_password = { read: {atome: :star_wars},write: {atome: :star_wars} }\n# user_password = { read: {atome: :star_wars},write: {atome: :star_wars} }\n#\n# machine({ id: machine_id, password: machine_password, name: :macAir, data: { date: '10090717' }, tag: { system: true } })\n#\n# human({ id: :anonymous, login: true, password: user_password, data: { birthday: '10/05/1996' }, tag: { system: true } })\n#\n# # default_user.set_current_user(:anonymous)\n# Universe.current_machine = machine_id\n# # the constant A is used to access alla atomes methods\n# A = Atome.new(\n#   { renderers: default_render, id: :atome, type: :element, tag: { system: true }, attach: [], fasten: [] }\n# )",
+  "path" => "# missing example for path",
+  "schedule" => "# frozen_string_literal: true\n\n\n\ndef format_time\n  time = Time.now\n  {\n    year: time.year,\n    month: time.month,\n    day: time.day,\n    hour: time.hour,\n    minute: time.min,\n    second: time.sec\n  }\nend\n\n# Exemple d'utilisation\n\nt=text({data: \"message here\", id: :messenger})\n\nschedule_task('every_minute_task', format_time[:year], format_time[:month], format_time[:day], format_time[:hour], format_time[:minute], format_time[:second]+5, recurrence: :minutely) do\n  t.data(\"every minute i change from :\#{format_time}, now : \#{format_time[:minute]} , \#{format_time[:second]}\")\nend",
+  "cursor" => "# missing example for cursor",
+  "preset" => "# frozen_string_literal: true\n\n\n# here how ti use preset in the atome framework\n# presets available are : render_engines,image,video,animation,element,box,vector,circle,shape,text,drm,shadow,color,www,raw,code,audio,group,human,machine,paint\n\nmy_box=box\n# using the code line above a lot of particles will be implicitly created, if we inspect my_box\nputs my_box.inspect # this will print :\n#[Log] #<Atome: @broadcast={}, @callback={}, @tag={}, @fasten=[], @unit={}, @collected={}, @id=:box_14, @type=:shape, @html=#<HTML:0x0662a164 @element=[object HTMLDivElement], @id=\"box_14\", @original_atome=#<Atome: @broadcast={}, @callback={}, @tag={}, @fasten=[], @unit={}, @collected={}, @id=:box_14, @type=:shape, @html=#<HTML:0x0662a164 ...>, @attach=[:view], @renderers=[:html], @width=99, @height=99, @apply=[:box_color], @left=100, @top=100, @clones=[], @preset={:box=>{:width=>99, :height=>99, :apply=>[:box_color], :left=>100, :top=>100, :clones=>[]}}>, @element_type=\"div\">, @attach=[:view], @renderers=[:html], @width=99, @height=99, @apply=[:box_color], @left=100, @top=100, @clones=[], @preset={:box=>{:width=>99, :height=>99, :apply=>[:box_color], :left=>100, :top=>100, :clones=>[]}}> (browser.script.iife.min.js, line 13)\n\n# please note that an ID is automatically created using a simple strategy  id : atome_type_total_number_of_users_atomes  ex here :  @id=\"box_14\"\n\nmy_box.text(\"touch me\")\nputs \" my_box preset is : \#{my_box.preset}\"\n# print in the console : [Log]  my_box preset is : {:box=>{:width=>99, :height=>99, :apply=>[:box_color], :left=>100, :top=>100, :clones=>[]}} (browser.script.iife.min.js, line 13)\n\n\nc=circle({id: :my_circle, width: 333, height: 333})\nputs  \" c is : \#{c.inspect }\"\n# this print : [Log]  c is : #<Atome: @type=:shape, @smooth=\"100%\", @width=99, @id=:circle_16, @renderers=[:html], @height=99, @broadcast={}, @callback={}, @tag={}, @fasten=[], @unit={}, @collected={}, @html=#<HTML:0x06579be8 @element=[object HTMLDivElement], @id=\"circle_16\", @original_atome=#<Atome: @type=:shape, @smooth=\"100%\", @width=99, @id=:circle_16, @renderers=[:html], @height=99, @broadcast={}, @callback={}, @tag={}, @fasten=[], @unit={}, @collected={}, @html=#<HTML:0x06579be8 ...>, @top=100, @attach=[:view], @left=100, @apply=[:circle_color], @clones=[], @preset={:circle=>{:width=>99, :height=>99, :smooth=>\"100%\", :apply=>[:circle_color], :left=>100, :top=>100, :clones=>[]}}>, @element_type=\"div\">, @top=100, @attach=[:view], @left=100, @apply=[:circle_color], @clones=[], @preset={:circle=>{:width=>99, :height=>99, :smooth=>\"100%\", :apply=>[:circle_color], :left=>100, :top=>100, :clones=>[]}}> (browser.script.iife.min.js, line 13)\n# it's pôssible to alter basic preset using the particle .preset\nmy_box.preset({ circle:  {type: :shape, :width=>99, :height=>99, :smooth=>\"100%\", color: :red, :left=>100, :top=>100 }})\nputs \" my_box preset is now : \#{my_box.preset}\"\n# now the preset circle is : [Log]  my_box preset is now : {:circle=>{:type=>:shape, :width=>99, :height=>99, :smooth=>\"100%\", :color=>:red, :left=>100, :top=>100, :clones=>[]}} (browser.script.iife.min.js, line 13)\n\nmy_box.touch(true) do\n  my_box.preset(:circle) # the box now rounded like a circle\n\n  new_circle=circle # as the preset circle has been modified tha circle is now red as specified in the updated preset\n  puts  \"new_circle is : \#{new_circle.inspect}\"\n  # this print : new_circle is : #<Atome: @type=:shape, @smooth=\"100%\", @width=99, @id=:circle_18, @renderers=[:html], @height=99, @broadcast={}, @callback={}, @tag={}, @fasten=[], @unit={}, @collected={}, @html=#<HTML:0x0664e99c @element=[object HTMLDivElement], @id=\"circle_18\", @original_atome=#<Atome: @type=:shape, @smooth=\"100%\", @width=99, @id=:circle_18, @renderers=[:html], @height=99, @broadcast={}, @callback={}, @tag={}, @fasten=[], @unit={}, @collected={}, @html=#<HTML:0x0664e99c ...>, @top=100, @attach=[:box_14], @left=100, @apply=[:circle_18_color_1_0_0_0_0_0____], @clones=[]>, @element_type=\"div\">, @top=100, @attach=[:box_14], @left=100, @apply=[:circle_18_color_1_0_0_0_0_0____], @clones=[]>\nend\n",
+  "relations" => "# missing example for relations",
+  "tag" => "# frozen_string_literal: true\n\nb=box\nb.circle({left: 0, top: 0, tag: {group: :to_grid}})\nb.box({left: 120, top: 120, tag: {group: :from_grid}})\nb.circle({left: 240, top: 240,  tag: {group: :from_grid}})\nb.box({left: 330, top: 330,tag: {group: :to_grid}})\nb.box({left: 330, top: 600,tag: :no_tag})\n\n\nwait 1 do\n  tagged(:group).each do |atome_id|\n    grab(atome_id).color(:green)\n    wait 1 do\n      tagged({group: :to_grid }).each do |atome_id|\n        grab(atome_id).color(:blue)\n      end\n    end\n  end\nend\n\n\n\n\n",
+  "web" => "# missing example for web",
+  "unit" => "# frozen_string_literal: true\n\n\nbox({ left: 50, id: :the_first_box,  color: :blue })\nb1=box({ left: 12, id: :the_second_box ,top: 3, unit: {left: '%', width: '%'}, color: :red})\nbox({ left: 550, id: :the_third_box , unit: {left: :px}, color: :green})\nwait 2 do\n  b1.unit({left: 'cm'})\n  b1.unit({top: 'cm'})\n  # b1.unit[:top]='cm'\n  puts b1.unit\nend\n\n\n",
+  "login" => "# #  frozen_string_literal: true\n\n# puts \"current user: \#{Universe.current_user}\"\n# human({ id: :jeezs, login: true })\n#\n# puts \"current user: \#{Universe.current_user}\"\n# wait 2 do\n#   human({ id: :toto, login: true })\n#   puts \"current user: \#{Universe.current_user}\"\n# end\n\nputs 'ok1'\n\n  # Vérification que les champs email et password ne sont pas envoyés vides :\n  # if (email_text.data.nil? || email_text.data.strip.empty?) && (password_text.data.nil? || password_text.data.strip.empty?)\n  #   puts \"Veuillez renseigner votre adresse email et votre mot de passe.\"\n  # elsif email_text.data.nil? || email_text.data.strip.empty?\n  #   puts \"Veuillez renseigner votre adresse email.\"\n  # elsif password_text.data.nil? || password_text.data.strip.empty?\n  #   puts \"Veuillez renseigner votre mot de passe.\"\n  # else\n\n    mail = 'tretre'\n    pass = 'poipoi'\n    pass = Black_matter.encode(pass)\n\n\n    # A.message({ action: :authentication, data: { table: :user, particles: {email: mail, password: pass} } }) do |response|\n    #   puts \"authentication : \#{response}\"\n    # end\n\n    mail_message = false\n    mail_response = nil\n    password_message = false\n    password_response = nil\nwait 3 do\n  A.message({ action: :authentication, data: { table: :user, particles: {email: mail} } }) do |response|\n    puts \"Full authentication response: \#{response.inspect}\"\n    if response.key?('mail_authorized')\n      # Logique si 'authorized' est présent dans la réponse\n      puts \"response mail authorized: \#{response['mail_authorized']}\"\n      # Si le mail et le password sont ok, on log le user et on stocke l'info en local storage\n      mail_message = JS.global[:localStorage].setItem('logged', response['mail_authorized'])\n      mail_response = response['mail_authorized']\n      puts \"mail_response : \#{mail_response}\"\n      # On efface le formulaire si le serveur renvoie que l'user est loggé\n      # view.delete(true)\n      JS.global[:localStorage].setItem('user_id', response['user_id'])\n    else\n      # Gestion du cas où 'authorized' est absent\n    end\n\n  end\n\n  A.message({ action: :authorization, data: { table: :user, particles: {password: pass} } }) do |response|\n    puts \"authorization : \#{response}\"\n    if response.key?('password_authorized')\n      authorized = response['password_authorized'] || false  # Utilisez false comme valeur par défaut si 'authorized' est absent\n      puts \"response password : \#{response['password_authorized']}\"\n      # Si le mail et le password sont ok, on log le user et on stocke l'info en local storage\n      password_message = JS.global[:localStorage].setItem('logged', response['password_authorized'])\n      password_response = response['password_authorized']\n      puts \"password_response : \#{password_response}\"\n      # On efface le formulaire si le serveur renvoie que l'user est loggé\n      # view.delete(true)\n      JS.global[:localStorage].setItem('user_id', response['user_id'])\n    else\n      # Gestion du cas où 'authorized' est absent\n    end\n  end\nend\n\n\n    # # # On efface le formulaire si le serveur renvoie que l'user est loggé\n    # if (mail_response == \"true\" || password_response == \"true\")\n    #   view.delete(true)\n    #   puts 'deleted!'\n    #   # JS.global[:localStorage].setItem('user_id',response['user_id'])\n    #   # puts \"response user_id : \#{response['user_id']}\"\n    # end\n\n  # end\n\nputs 'ok2'",
+  "hypertext" => "#  frozen_string_literal: true\n\nb = box({ id: :the_html, color: :orange, overflow: :auto, width: :auto, height: :auto, left: 100, right: 100, top: 100, bottom: 100 })\n# html_desc=<<STR\n# <!DOCTYPE html>\n# <html>\n#     <head>\n#         <title>Une petite page HTML</title>\n#         <meta charset=\"utf-8\" />\n#     </head>\n#     <body>\n#         <h1 id='title' style='color: yellowgreen'>Un titre de niveau 1</h1>\n#\n#         <p>\n#             Un premier petit paragraphe.\n#         </p>\n#\n#         <h2>Un titre de niveau 2</h2>\n#\n#         <p>\n#             Un autre paragraphe contenant un lien pour aller\n#             sur le site <a href=\"http://koor.fr\">KooR.fr</a>.\n#         </p>\n#     </body>\n# </html>\n# STR\nhtml_desc = <<STR\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Com 1 Image</title>\n    <style>\n        body { font-family: Arial, sans-serif; margin: 0; padding: 0; }\n        header { display: flex; justify-content: space-between; align-items: center; padding: 20px; }\n        nav { display: none; } \n        .section { padding: 50px 20px; text-align: center;z-index: 3  }\n        .contact-info { text-align: left; }\n        @media (min-width: 768px) {\n            nav { display: block; }\n        }\n    </style>\n  <style>\n        .ok-info { text-align: left; }\n        @media (min-width: 768px) {\n            nav { display: block; }\n        }\n    </style>\n</head>\n<body>\n\n<header>\n    <button>☰</button> <!-- Icône de menu pour mobile -->\n    <h1>Com 1 Image</h1>\n    <nav>\n        <a href=\"#accueil\">Accueil</a>\n    </nav>\n</header>\n\n<section id='div_id' class=\"section my_class\" style='left: 333px;color: yellow'>\n    <h2>PRODUCTIONS AUDIOVISUELLES</h2>\n    <!-- Contenu de la section -->\n</section>\n\n<section class=\"section\">\n    <h2>COLLABORATIF</h2>\n    <p>Texte sur le collaboratif...</p>\n</section>\n\n<section class=\"section\">\n    <h2>CORPORATE</h2>\n    <div class=\"communication\">\n        <!-- Images et textes liés à la communication -->\n    </div>\n    <div class=\"publicite\">\n        <!-- Images et textes liés à la publicité -->\n    </div>\n    <!-- ... Autres contenus de la section Corporate -->\n</section>\n\n<section class=\"section\">\n    <h2>ART</h2>\n    <p>Texte sur l'art...</p>\n</section>\n\n<section class=\"section contact-info\">\n    <h2>CONTACT</h2>\n    <p>email@example.com</p>\n    <address>\n        74 bis avenue des Thèmes<br>\n        63400 - Chamalières\n    </address>\n</section>\n\n</body>\n</html>\n\nSTR\nb.hypertext(html_desc)\n\n# b.hyperedit(id)  do |html_object|\n# id convert to atome\n# get tage type  convert to markup\n# get tag content convert to data\n# get style and class convert to particle\n# end\nb.hyperedit(:div_id) do |tag_desc|\n  puts  tag_desc.class\nend\n\n  wait 2 do\n    div_result = HTML.locate(id: 'div_id') # find by ID\n\n    atomized_el= atomizer({ target: div_result, id: :my_second_html_obj })\n    atomized_el.rotate(55)\n    atomized_el.color(:purple)\n    atomized_el.position(:absolute)\n    atomized_el.left(255)\n    atomized_el.top(255)\n  end\n\n\nwait 3 do\n  # or handle the objet in pure ruby js style\n  div_result = HTML.locate(id: 'div_id') # find by ID\n  div_result[:style][:left]= \"66px\"\n  puts \"the div is : \#{div_result[:style][:left]}\"\n\n\nend\n\n# TODO : create an html to atome converter\n\n",
+  "hyperedit" => "# missing example for hyperedit",
+  "terminal" => "# frozen_string_literal: true\nA.terminal('pwd') do |data|\n  text \"terminal response  :\n \#{data}\"\nend\n\n# alert A.inspect",
+  "read" => "# frozen_string_literal: true\n\nA.read('Cargo.toml') do |data|\n  text \"file content  :\n \#{data}\"\nend\nwait 1 do # to be sure the server is ready\n  A.read('../application/examples/blur.rb') do |data|\n    text \"file content  :\n \#{data}\"\n  end\nend\n",
+  "browse" => "# frozen_string_literal: true\n\n\n# browse only works with  application version of atome or using server mode , it allow the browse local file on your computer or remote file on server, if operating in server mode\n\n# here is an example :\nA.browse('/') do |data|\n  text \"folder content  :\n \#{data}\"\nend\n\n# if Atome.host == 'tauri'\n#   # JS.eval(\"readFile('atome','Cargo.toml')\")\n#   JS.eval(\"browseFile('atome','/')\")\n# else\n#   puts 'nothing here'\n#   # JS.eval(\"terminal('A.terminal_callback','pwd')\")\n# end",
+  "copies" => "# missing example for copies",
+  "temporary" => "# missing example for temporary",
+  "atomes" => "# missing example for atomes",
+  "match" => "#  frozen_string_literal: true\n\n# def add_css_to_atomic_style(css)\n#   style_element = JS.global[:document].getElementById('atomic_style')\n#   text_node = JS.global[:document].createTextNode(css)\n#   style_element.appendChild(text_node)\n# end\n#\n# def convert_to_css(data)\n#   conditions = data[:condition]\n#   apply = data[:alterations]\n#\n#   # Convert the conditions\n#   condition_strings = []\n#\n#   if conditions[:max]\n#     condition_strings << \"(max-width: \#{conditions[:max][:width]}px)\" if conditions[:max][:width]\n#     condition_strings << \"(max-height: \#{conditions[:max][:height]}px)\" if conditions[:max][:height]\n#   end\n#\n#   if conditions[:min]\n#     condition_strings << \"(min-width: \#{conditions[:min][:width]}px)\" if conditions[:min][:width]\n#     condition_strings << \"(min-height: \#{conditions[:min][:height]}px)\" if conditions[:min][:height]\n#   end\n#\n#   operator = conditions[:operator] == :and ? \"and\" : \"or\"\n#\n#   # Convert properties to apply\n#   property_strings = []\n#   apply.each do |key, values|\n#     inner_properties = []\n#     values.each do |property, value|\n#       if property == :color\n#         inner_properties << \"background-color: \#{value} !important;\"\n#       else\n#         inner_properties << \"\#{property}: \#{value}px !important;\" if value.is_a?(Integer)\n#         inner_properties << \"\#{property}: \#{value} !important;\" if value.is_a?(Symbol)\n#       end\n#     end\n#     # Prefix each key with \"#\"\n#     property_strings << \"#\#{key} {\n\#{inner_properties.join(\"\n\")}\n}\"\n#   end\n#\n#   # let it build\n#   css = \"@media \#{condition_strings.join(\" \#{operator} \")} {\n\#{property_strings.join(\"\n\")}\n}\"\n#   add_css_to_atomic_style(css)\n#   css\n# end\n#\n# def css_to_data(css)\n#   data = {\n#     :condition => {},\n#     :apply => {}\n#   }\n#   # Extract conditions\n#   media_conditions = css.match(/@media ([^\{]+)/)[1].split(',').map(&:strip)\n#   media_conditions.each do |condition|\n#     type = condition.match(/(max|min)-/)[1].to_sym\n#     property = condition.match(/(width|height)/)[1].to_sym\n#     value = condition.match(/(\d+)/)[1].to_i\n#\n#     data[:condition][type] ||= {}\n#     data[:condition][type][property] = value\n#   end\n#\n#   # Extract properties to be applied\n#   css.scan(/(\w+) \{([^\}]+)\}/).each do |match|\n#     key = match[0].to_sym\n#     properties = match[1].split(';').map(&:strip).reject(&:empty?)\n#\n#     data[:apply][key] ||= {}\n#     properties.each do |property|\n#       prop, value = property.split(':').map(&:strip)\n#       if prop == \"background-color\"\n#         data[:apply][key][:color] = value.to_sym\n#       elsif value[-2..] == \"px\"\n#         data[:apply][key][prop.to_sym] = value.to_i\n#       else\n#         data[:apply][key][prop.to_sym] = value.to_sym\n#       end\n#     end\n#   end\n#\n#   data\n# end\n\n\n\nbox({ color: :red, width: :auto, left: 120, right: 120, id: :box_1 })\ncircle({ left: 33, top: 200, id: :circle_1 })\ncircle({ left: 200, top: 200, id: :circle_2 })\ncircle({ left: 400, top: 200, id: :circle_3 })\ncircle({ left: 600, top: 200, id: :circle_4 })\ntext({ data: \"resize the window to it's minimum to activate response\", id: :my_text })\n\nA.match({condition:{max: {width: 777}, min: {height: 333}, operator: :and }})  do\n{\n  circle_1: { color: :red , width: 23},\n  circle_2: { color: :orange , width: 23, top: 12},\n  box_1: { width: 123, left: 222, color: :blue, rotate: 22}\n}\nend\n\n# match can work without any condition then the particles are always applied\n\n# A.match({}) do\n#   {\n#     circle_1: { color: :red, width: 23 },\n#     circle_2: { color: :orange, width: 23, top: 12 },\n#     box_1: { width: 123, left: 222, color: :blue, rotate: 22 }\n#   }\n# end\n\n\n\n",
+  "invert" => "# missing example for invert",
+  "option" => "# missing example for option",
+  "duplicate" => "# frozen_string_literal: true\n\n# new({ particle: :duplicate, store: false }) do |params|\n#   if @duplicate\n#     copy_number = @duplicate.length\n#   else\n#     copy_number = 0\n#   end\n#\n#   new_atome_id = \"\#{@id}_copy_\#{copy_number}\"\n#   new_atome = Atome.new({ type: @type, renderers: @renderers, id: new_atome_id })\n#\n#   fasten_atomes = []\n#   fasten_found = fasten.dup\n#   particles_found = instance_variables.dup\n#\n#   particles_found.delete(:@history)\n#   particles_found.delete(:@callback)\n#   particles_found.delete(:@duplicate)\n#   particles_found.delete(:@touch_code)\n#   # touch_code=instance_variable_get('@touch_code')\n#   particles_found.delete(:@html)\n#   particles_found.delete(:@fasten)\n#   particles_found.delete(:@id)\n#   params[:id] = new_atome_id\n#   fasten_found.each do |child_id_found|\n#     child_found = grab(child_id_found)\n#     if child_found\n#       new_child = child_found.duplicate({})\n#       fasten_atomes << new_child.id\n#     end\n#   end\n#   particles_found.each do |particle_found|\n#     particle_name = particle_found.to_s.sub('@', '')\n#     particle_content = self.send(particle_name)\n#     new_atome.set(particle_name => particle_content)\n#     # new_atome.instance_variable_set('@touch_code',touch_code)\n#   end\n#   params[:fasten] = fasten_atomes\n#\n#   if params.instance_of? Hash\n#     params.each do |k, v|\n#       new_atome.send(k, v)\n#     end\n#   end\n#\n#   @duplicate ||= {}\n#   @duplicate[new_atome_id] = new_atome\n#   new_atome\n# end\n#\n# new({ after: :duplicate }) do |params|\n#   @duplicate[@duplicate.keys[@duplicate.keys.length - 1]]\n# end\n# c=circle\n# c.color({red: 1, id: :titi})\n# # b=box({apply: [:titi], left: 123})\n\n\nb = circle({ id: :the_circle })\nb.text(:hello)\nbb = b.duplicate({  width: 33, left: 234, top: 222 })\nbb.color(:red)\nwait 1 do\nbb2 = b.duplicate({ width: 33, left: 12, top: 99 })\nbb3 = b.duplicate({ width: 33, left: 444 })\nbb3.color(:green)\nbb2.color(:orange)\nend\n\n",
+  "copy" => "# frozen_string_literal: true\n\n\nt=text(:hello)\nt.edit(true)\nb=box({left: 99})\n\nb.touch(true) do\n  allow_copy(true)\n  allow_right_touch(true)\nend\n\n\n",
+  "paste" => "# missing example for paste",
+  "backup" => "# missing example for backup",
+  "import" => "# frozen_string_literal: true\n\nsupport = box({ top: 250, left: 12, width: 300, height: 40, smooth: 9, color: { red: 0.3, green: 0.3, blue: 0.3 }, id: :support })\n\nsupport.shadow({\n                 id: :s3,\n                 left: 3, top: 3, blur: 9,\n                 invert: true,\n                 red: 0, green: 0, blue: 0, alpha: 0.7\n               })\n\n\n\nbox({ id: :the_boxy })\n\n\n\nsupport.import(true) do |content|\n  puts \"add code here, content:  \#{content}\"\nend\n\n\nimporter do |val|\n  puts \"case 21 \#{val}\"\nend\n\n# importer(:all) do |val|\n#   alert \"case 21 \#{val}\"\n# end\n\nimporter('the_boxy') do |val|\n  puts \"yes !!! exception found : \#{val}\"\nend",
+  "compute" => "# frozen_string_literal: true\n\n\nc = circle({ height: 400, width: 200, top: 100, left:99, top: 79 })\nb = c.box({ width: 200, height: 100, left: 280, top: 190, id: :my_box })\ni= image(:red_planet)\nc.touch(true) do\n  c.fit({ value: 100, axis: :x })\nend\n\nputs '------'\nputs \"b.compute  left return the position on the screen of the item : \#{b.compute({reference: c.id, particle: :left, metrics: :pixel})}\"\nputs \"b.compute left : \#{b.compute({ particle: :left })[:value]}, c left : \#{b.left}\"\nputs \"b.compute top :\#{b.compute({ particle: :top })[:value]}, c top: \#{b.top}\"\nputs  \"i.compute width :\#{i.compute({ particle: :width })[:value]}, i width: \#{i.width}\"\nputs \"i.compute height :\#{i.compute({ particle: :height })[:value]}, i height: \#{i.height}\"\n",
+  "get" => "#  frozen_string_literal: true\n\nthe_text = text({ data: 'hello for al the people in front of their machine jhgj  jg jgh jhg  iuuy res ', center: true, top: 120, width: 77, component: { size: 11 } })\nthe_box = box({ left: 12 })\nthe_circle = circle({ id: :cc, color: :orange })\nthe_circle.image('red_planet')\nthe_circle.color('red')\nthe_circle.box({ left: 333, id: :the_c })\n\nelement({ id: :the_element })\nthe_view = grab(:view)\nputs \"views_shape's shape are : \#{the_view.shape}\"\nputs \"the_circle color is : \#{the_circle.color}\"\nputs \"the_text data is : \#{the_text.data}\"\nputs \"the_box left is : \#{the_box.left}\"\nputs \"the_circle particles are : \#{the_circle.particles}\"\n",
+  "css" => "# frozen_string_literal: true\n\nb=box({right: 45, left: :auto})\nb.css[:style][:border] = '2px solid yellow'\nputs  b.css[:style][:border]\nputs b.css",
+  "holder" => "# frozen_string_literal: true\n# holder is a particle that contain an atome so we use my_objet.holder.left(33)\n# and it will move the atome contain in the holder particle to be manipulated\n# it facilitate the access of some atome without being worried about their id\n# this is mainly used int context of input , slider , etc...\n\n\n# simple example\nb=box({color: :black})\n\nc=b.circle({width: 10, height: 10, color: :red})\n\nb.holder(c)\nwait 1 do\n  b.holder.center(true)\nend\n\n\n\n\n\n\n# second example ( holder is build in the input molecule)\ntext({ left: 33, top: 33, data: 'data collected', id: :infos })\n\ninp = A.input({ width: 166,\n                trigger: :up,\n                back: :orange,\n                shadow: {\n                  id: :s2,\n                  left: 3, top: 3, blur: 3,\n                  invert: true,\n                  red: 0, green: 0, blue: 0, alpha: 0.9\n                },\n                text: :black,\n                smooth: 3,\n                left: 66,\n                top: 33,\n                default: 'type here'\n              }) do |val|\n\n  grab(:infos).data(val)\nend\n\nwait 2 do\n  inp.top(12)\n  wait 1 do\n    inp.width(666)\n    inp.holder.blur(6)\n    wait 1 do\n      inp.holder.blur(0)\n      inp.holder.data('injected data')\n    end\n  end\n\nend\n\n\n\n\n\n\n",
+  "executor" => "# frozen_string_literal: true\ndef act_on(obj)\n  obj.color(:red)\n  obj.left(56)\nend\n\ndef act_off(obj)\n  obj.color(:blue)\n  obj.left(33)\nend\n\n\nb = box({ left: 12, id: :the_first_box, top: 30 })\n\nb.touch(true) do\n  b.alternate({ width: 33, color: :red, height: 33 , smooth: 0 }, { width: 66, color: :orange, blur: 8}, { height: 66, color: :green, smooth: 9, blur: 0})\nend\n\nc = circle({ left: 99 , top: 30})\n\nc.touch(true) do\n  alt = b.alternate(true, false)\n  if alt\n    c.color(:yellowgreen)\n  else\n    c.color(:orange)\n  end\nend\n\n\nc2 = circle({ left: 333 , top: 30})\n\n\nc2.touch(true) do\n  b.alternate({  executor: {act_on: b}  }, { executor: {act_off: b}})\nend\n",
+  "tick" => "# frozen_string_literal: true\n\n# tick allow you to automatise any action counting\n# it can be added into any new created particle ex: here a dummy\n\nnew({ particle: :dummy }) do |_p|\n  tick(:dummy )\nend\n\nnew({ particle: :dummy2 }) do |_p|\n  tick(:dummy2 )\nend\n\na=box\na.dummy(:hi)\n\nputs a.tick[:dummy]\na.dummy(:ho)\nputs a.tick[:dummy]\n\na.dummy2(:ho)\nputs a.tick[:dummy2]\n\nc=circle({left: 99})\n\nc.touch(true) do\n  c.tick(:my_counter)\n  puts  c.tick[:my_counter]\nend\n\nbb=box({left: 333})\n\nbb.touch(true) do\n  if   bb.tick(:my_counter)%2 == 0\n    bb.color(:red)\n  else\n    bb.color(:blue)\n  end\nend",
+  "storage" => "# frozen_string_literal: true\nt=text(\"touch the box to erase localstorage, long touch on the box to stop historicize\")\nb=box({top: 66})\nc=circle({top: 99})\nc.touch(true) do\n  c.left(c.left+99)\n  # c.left=c.left+33\n  # box\nend\nb.touch(true) do\n  JS.eval('localStorage.clear()')\nend\n\nb.touch(:long) do\n  b.color(:red)\n  Universe.allow_localstorage = false\n\nend\n\n",
+  "state" => "# missing example for state",
+  "record" => "# frozen_string_literal: true\n\n# native recording (server mode only) :\ntext({ data: 'native operation only work in server mode ', top: 60 })\na = circle({ color: :red, left: 30, top: 90 })\na.text('native Audio')\nrecord_callback = 'unset'\na.touch(true) do\n  A.record({ media: :audio, duration: 5, mode: :native, name: :my_audio_rec, type: :wav, path: '../src', data: { note: :c, velocity: 12, robin: 3, author: :vie, tags: [:voice, :noise, :attack] } }) do |result|\n    puts \"result: \#{result}\"\n    record_callback = result\n  end\n  nil# we must return nil else the event methods take the bloc for a Hash and crash the code\n\nend\n\naa = circle({ color: :red, left: 120, top: 90 })\naa.text('native video')\n\naa.touch(true) do\n  A.record({ media: :video, duration: 5, mode: :native, name: :my_video_rec, type: :mp4, path: '../src/', data: { type: :thriller, } }) do |result|\n    puts result\n    record_callback = result\n  end\n  nil # we must return nil else the event methods take the bloc for a Hash and crash the code\n\nend\n\naaa = circle({ color: :red, left: 256, top: 90 })\naaa.text('native stop')\naaa.touch(true) do\n  pid = record_callback[:pid]\n  A.record({ stop: true, pid: pid }) do |msg|\n    puts \"msg received for native stop : \#{msg}\"\n  end\n  nil # we must return nil else the event methods take the bloc for a Hash and crash the code\n\nend\n\n# web recording:\nbox_to_rec_into = box({ id: :the_big_box })\nc = circle({ color: :red, left: 30 })\nc.text(:audio)\nc.touch(true) do\n  box_to_rec_into.record({ media: :audio, duration: 7, mode: :web, name: :web_audio_rec, type: :wav, path: '../src', data: { note: :c, velocity: 12, robin: 3, author: :vie, tags: [:voice, :noise, :attack] } }) do |result|\n    #   # puts \"recording audio : \#{result}\"\n  end\n  nil # we must return nil else the event methods take the bloc for a Hash and crash the code\n\nend\n\ncc = circle({ color: :red, left: 120, id: :the_circle })\ncc.text(:video)\ncc.touch(true) do\n  box_to_rec_into.record({ media: :video, duration: 30, mode: :web, name: :web_video_rec, type: :mp4, path: '../src/', data: { type: :thriller } }) do |result|\n    # puts \"recording video : \#{result}\"\n  end\n  nil # we must return nil else the event methods take the bloc for a Hash and crash the code\n\nend\n\nccc = circle({ color: :red, left: 256 })\nccc.text(:stop)\nccc.touch(true) do\n  box_to_rec_into.record({ stop: true }) do |msg|\n    puts \"msg received for web stop : \#{msg}\"\n  end\n  nil # we must return nil else the event methods take the bloc for a Hash and crash the code\n\nend\n\ncc2 = circle({ color: :red, left: 512, id: :the_circle_prev })\ncc2.text(:preview)\ncc2.touch(true) do\n  A.preview({ media: :video, mode: :web, id: :my_preview })\n  nil # we must return nil else the event methods take the bloc for a Hash and crash the code\n\nend\n\ncc3 = circle({ color: :red, left: 600, id: :the_circle_stop_prev })\ncc3.text('kill preview')\ncc3.touch(true) do\n  A.preview({ media: :video, mode: :web, id: :my_preview, stop: true })\n  nil # we must return nil else the event methods take the bloc for a Hash and crash the code\n\nend\n\n\n",
+  "preview" => "# missing example for preview",
+  "meteo" => "#  frozen_string_literal: true\n\nb = box\nb.meteo('chamalieres') do |params|\n  text({ data: params[:main][:temp] })\n  puts params\nend\n\n",
+  "editor" => "# frozen_string_literal: true\nbox\ndragger = box({ width: 333, height: 16, top: 0 })\nback = box({ width: 333, height: 222, top: dragger.height })\nbody = back.box({ top: 0, width: '100%', height: '100%', component: { size: 12 }, id: :poil })\ncode_runner = dragger.circle({ left: 3, top: 3, width: 12, height: 12, color: :red })\ncode_closer = dragger.circle({ left: :auto ,right: 3, top: 3, width: 12, height: 12, color: :black })\n\nbody.editor({ id: :the_ed, code: \"def my_script\n\n  return 100\n\nend\", width: 333, height: 192, color: :lightgray, top: 0 })\n\ndef create_editor(code_id)\n  js_code = <<~JAVASCRIPT\n    var editor = CodeMirror.fromTextArea(document.getElementById(\"\#{code_id}\"), {\n        lineNumbers: true,\n        mode: \"ruby\",\n        theme: \"monokai\"\n    });\n    editor.getWrapperElement().id = \"atome_editor_\#{code_id}\";\n    document.getElementById(\"atome_editor_\#{code_id}\").CodeMirrorInstance = editor;\n\n  JAVASCRIPT\n  JS.eval(js_code)\nend\n\ndef set_code(code_id, content)\n  js_code = <<~JAVASCRIPT\n    var editorWrapper = document.getElementById(\"atome_editor_\#{code_id}\");\n                 var editorInstance = editorWrapper.CodeMirrorInstance;\n                 var newContent = \"\#{content}\";\n                 editorInstance.setValue(newContent);\n  JAVASCRIPT\n  JS.eval(js_code)\nend\n\ndef get_code(code_id)\n  js_code = <<~JAVASCRIPT\n    var editorWrapper = document.getElementById(\"atome_editor_\#{code_id}\");\n\n               var editorInstance = editorWrapper.CodeMirrorInstance;\n               return editorInstance.getValue();\n  JAVASCRIPT\n  JS.eval(js_code)\nend\n\ncreate_editor(\"the_ed\")\n\nwait 1 do\n  editor_id = \"the_ed\"\n  set_code(editor_id, \"def new_script\\n  puts 'so cool'\\ncircle({top: rand(333), color: :red})\\nend\\nnew_script\")\nend\n\ncode_closer.touch(true) do\n  back.delete(true)\n  dragger.delete(true)\nend\n\ncode_runner.touch(true) do\n  editor_id = \"the_ed\"\n  data_found = get_code(\"the_ed\").to_s\n  grab(:the_t).code(data_found.to_s)\n  atome_before = Universe.user_atomes\n  eval(data_found)\n  code_editor = grab(editor_id)\n  atome_to_delete = code_editor.data\n  atome_to_delete.each do |atome_id_found|\n    grab(atome_id_found).delete(false)\n  end\n  atome_after = Universe.user_atomes\n  new_atomes = atome_after - atome_before\n  code_editor.data(new_atomes)\nend\ndragger.drag(restrict: :view ) do |event|\n  view = grab(:view)\n  view_width = view.to_px(:width)\n  view_height = view.to_px(:height)\n\n  dx = event[:dx]\n  dy = event[:dy]\n\n  # Calculer les nouvelles positions\n  x = (back.left || 0) + dx.to_f\n  y = (back.top || 0) + dy.to_f\n\n  # Contrainte de `x` entre 0 et `view_width`\n  if x > 0 && x < view_width - back.width\n    back.left(x)\n  else\n    # Contrainte si `x` dépasse les limites\n    x = [0, [x, view_width - back.width].min].max\n    back.left(x)\n  end\n\n  # Contrainte de `y` pour qu'il soit supérieur à une certaine valeur\n  if y > 0 + dragger.height && y < view_height + dragger.height\n    back.top(y)\n  else\n    # Contrainte si `y` dépasse les limites\n    y = [0 + dragger.height, [y, view_height + dragger.height].min].max\n    back.top(y)\n  end\nend\nback.resize({ size: { min: { width: 120, height: 90 }, max: { width: 3000, height: 3000 } } }) do |event|\n  dx = event[:dx]\n  # dy = event[:dy]\n  x = (dragger.width || 0) + dx.to_f\n  # y = (back.top || 0) + dy.to_f\n  dragger.width(x)\n  # back.top(y)\nend\n\nback.shadow({ alpha: 0.6, blur: 16, left: 3, top: 16 })\n\nback.drag(false)\ndragger.touch(:double) do\n  if back.display == :none\n    back.display(:block)\n  else\n    back.display(:none)\n  end\nend\n\n# a_list=[]\n# Universe.atome_list.each  do |k, v|\n#   a_list << k\n# end\n#\n# alert a_list\n#\n# p_list=[]\n#  Universe.particle_list.each  do |k, v|\n#    p_list << k\n#  end\n#\n# alert p_list\n#\n# box(id: :mon_carre, width: 300, height: 300)\nalert \"pseudo element and trigger absctrator\"",
+  "color" => "# frozen_string_literal: true\n\n# frozen_string_literal: true\n\n# puts 'type you problematic code here!'\ncol=color({green: 1, id: :the_col})\n\nb=box({top: 3})\nt=text(data: :red, left: 0, top: 123)\nt1=text(data: :green, left: 100, top: 123)\nt2=text(data: :blue, left: 200, top: 123)\nt3=text(data: :yellow, left: 300, top: 123)\nt4=text(data: :orange, left: 400, top: 123)\nt5=text(data: :cyan, left: 500, top: 123)\n\nitem_to_batch=[t.id,t1.id,t2.id, t3.id, t4.id, t5.id]\nthe_group= group({ collect: item_to_batch })\nthe_group.apply([:the_col])\nt.touch(true) do\n  b.color({id: :red, red: 1 })\n  # puts \"number of atomes : \#{Universe.atomes.length}\"\nend\nt1.touch(true) do\n  b.color({id: :green, green: 1 })\n  # puts \"number of atomes : \#{Universe.atomes.length}\"\nend\nt2.touch(true) do\n  b.color({id: :blue, blue: 1 })\n  # puts \"number of atomes : \#{Universe.atomes.length}\"\nend\nt3.touch(true) do\n  b.color({id: :yellow,  red: 1, green: 1 })\n  # puts \"number of atomes : \#{Universe.atomes.length}\"\nend\nt4.touch(true) do\n  b.color({id: :orange,  red: 1, green: 0.5 })\n  # puts \"number of atomes : \#{Universe.atomes.length}\"\nend\nt5.touch(true) do\n  b.color({id: :cyan,  blue: 1, green: 1 })\n  # puts \"number of atomes : \#{Universe.atomes.length}\"\nend\n\nt=text({data: \"dynamic color propagation, touch me to propagate\"})\nt.apply(:the_col)\nc=circle({id: :the_circle, top: 260})\nc.apply([:the_col])\nb.apply([:the_col])\n\nt.touch(true) do\n  col.red(1)\nend\n\n\n",
+  "image" => "#  frozen_string_literal: true\n\nimage(:red_planet)\nimage({path: 'medias/images/logos/atome.svg', width: 33})\n",
+  "video" => "# frozen_string_literal: true\n\nif Universe.internet\n  v = video({ path: \"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4\" })\nelse\n  v = video(:video_missing)\nend\n\nv.touch(true) do\n  v.play(true)\n  wait 3 do\n    v.play(66)\n  end\nend",
+  "www" => "#  frozen_string_literal: true\n\nb = box\n\nb.www({ path: \"https://www.youtube.com/embed/usQDazZKWAk\", left: 333 })\n\nAtome.new(\n  renderers: [:html], id: :youtube1, type: :www, attach: :view, path: \"https://www.youtube.com/embed/fjJOyfQCMvc?si=lPTz18xXqIfd_3Ql\", left: 33, top: 33, width: 199, height: 199,\n\n)",
+  "shadow" => "# frozen_string_literal: true\n\nc = circle({ id: :the_circle, left: 122, color: :orange, drag: { move: true, inertia: true, lock: :start } })\nc.color({ id: :col1, red: 1, blue: 1 })\n\n c.shadow({\n              id: :s1,\n              # affect: [:the_circle],\n              left: 9, top: 3, blur: 9,\n              invert: false,\n              red: 0, green: 0, blue: 0, alpha: 1\n            })\n\nshadow({\n           id: :s2,\n           affect: [:the_circle],\n           left: 3, top: 9, blur: 9,\n           invert: true,\n           red: 0, green: 0, blue: 0, alpha: 1\n         })\n\nc.shadow({\n           id: :s4,\n           left: 20, top: 0, blur: 9,\n           option: :natural,\n           red: 0, green: 1, blue: 0, alpha: 1\n         })\n\nwait 2 do\n  c.remove(:s4)\n  wait 2 do\n    c.remove({ all: :shadow })\n  end\nend\n\n\nthe_text = text({ data: 'text with shadow!', center: true, top: 222, width: 777, component: { size: 66 }, id: :my_text })\n\n\nthe_text.shadow({\n           id: :my_shadow,\n           left: 6, top: 6, blur: 6,\n           option: :natural,\n           red: 0, green: 0, blue: 0, alpha: 1\n         })\n\nthe_text.left(255)\nthe_text.top(66)\nthe_text.color(:red)\n\nwait 1 do\n  text_shadow= grab(:my_shadow)\n  text_shadow.alpha(0.5)\n  text_shadow.left(120)\n  text_shadow.blur({ value: 1 })\n\n  # grab(:my_text).refresh(true)\n\nend\n\n",
+  "border" => "# frozen_string_literal: true\n\n\n\n\nb=box({id: :my_b_box, left: 150, top: 150})\nb.shadow({\n           id: :s1,\n           # affect: [:the_circle],\n           left: 9, top: 3, blur: 9,\n           invert: false,\n           red: 0, green: 0, blue: 0, alpha: 1\n         })\nborder1= b.border({ thickness: 15, red: 1, green: 1, blue: 0, alpha: 1, pattern: :solid ,id: :border_1, inside: true})\nwait 2 do\n  b.remove(:border_1)\nend\nwait 1.5 do\n border({ thickness: 30, red: 1, green: 1, blue: 0, alpha: 1, pattern: :solid ,id: :poil, inside: true})\nend\n\nc = circle({ id: :the_circle, color: :green })\nb = box({ left: 333, id: :the_box })\ncircle({ top: 190, width: 99, height: 99, id: :dont_break_too })\nc2 = circle({ top: 190, width: 99, height: 99, id: :dont_break, color: :orange })\n# let's add the border\nwait 1 do\n  c2.shadow({\n              left: 9,\n              top: 3,\n              blur: 9,\n              invert: false,\n              option: :natural,\n              red: 0, green: 0, blue: 0, alpha: 1\n            })\n  c2.border({ thickness: 5, red: 1, green: 0, blue: 0, alpha: 1, pattern: :dotted, id: :borderline })\nend\nc.border({ thickness: 5, red: 1, green: 1, blue: 0, alpha: 1, pattern: :dotted })\nb.border({ thickness: 5, red: 0, green: 1, blue: 0, alpha: 1, pattern: :dotted })\n\nwait 2 do\n  c2.border({ thickness: 5, red: 1, green: 1, blue: 0, alpha: 1, pattern: :solid })\n  c.border({ thickness: 5, red: 1, green: 1, blue: 0, alpha: 1, pattern: :dotted })\n  b.border({ thickness: 3, red: 1, green: 1, blue: 0, alpha: 1, pattern: :dotted })\n  b.text('touch me')\nend\n#\nb.touch(true) do\n\n  b.border({ thickness: 5, red: 1, green: 1, blue: 1, alpha: 1, pattern: :dotted, id: :the_door,inside: true })\n  puts \" no new atome added!, number of atomes: \#{Universe.atomes.length}\"\n  b.apply([:the_door])\n  c.apply([:the_door])\n  c2.apply([:the_door])\n  wait 1 do\n    # if the_door (border) is change all affect atomes are refreshed\n    grab(:the_door).pattern(:solid)\n    wait 1 do\n      # if the_door (border) is change all affect atomes are refreshed\n      grab(:the_door).thickness(20)\n      wait 1 do\n        # if the_door (border) is change all affect atomes are refreshed\n        grab(:the_door).red(0)\n        c2.color({alpha: 0})\n\n      end\n    end\n  end\nend\n\n\nbb=box({top: 50, left: 100})\nbb.text(:touch_me)\nbord=bb.border({ thickness: 3,  pattern: :dotted, inside: true})\nbb.touch(true) do\n  col=bord.color({red: 1 })\n\n  wait 2 do\n    col.green(1)\n  end\nend\n",
+  "raw" => "#  frozen_string_literal: true\n\nraw_data = <<STR\n<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/8BT4Q3UtO6Q?si=WI8RlryV8HW9Y0nz\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen></iframe>\nSTR\n\n\nraw_data = <<STR\n<svg width=\"600\" height=\"350\" xmlns=\"http://www.w3.org/2000/svg\">\n<!-- Style for the boxes -->\n                         <style>\n.box { fill: white; stroke: black; stroke-width: 2; }\n   .original { fill: lightblue; }\n   .clone { fill: lightgreen; }\n   .arrow { stroke: black; stroke-width: 2; marker-end: url(#arrowhead); }\n                                                          .text { font-family: Arial, sans-serif; font-size: 14px; }\n   </style>\n\n  <!-- Arrowhead definition -->\n  <defs>\n    <marker id=\"arrowhead\" markerWidth=\"10\" markerHeight=\"7\" \n    refX=\"0\" refY=\"3.5\" orient=\"auto\">\n      <polygon points=\"0 0, 10 3.5, 0 7\" fill=\"black\"/>\n     </marker>\n  </defs>\n\n   <!-- Boxes for original and clones -->\n                                      <rect x=\"250\" y=\"30\" width=\"100\" height=\"50\" class=\"box original\"/>\n   <rect x=\"100\" y=\"200\" width=\"100\" height=\"50\" class=\"box clone\"/>\n   <rect x=\"250\" y=\"200\" width=\"100\" height=\"50\" class=\"box clone\"/>\n   <rect x=\"400\" y=\"200\" width=\"100\" height=\"50\" class=\"box clone\"/>\n\n   <!-- Text for boxes -->\n                       <text x=\"275\" y=\"55\" class=\"text\" text-anchor=\"middle\">Original</text>\n  <text x=\"150\" y=\"225\" class=\"text\" text-anchor=\"middle\">Clone 1</text>\n   <text x=\"300\" y=\"225\" class=\"text\" text-anchor=\"middle\">Clone 2</text>\n  <text x=\"450\" y=\"225\" class=\"text\" text-anchor=\"middle\">Clone 3</text>\n\n   <!-- Arrows -->\n   <line x1=\"300\" y1=\"80\" x2=\"150\" y2=\"200\" class=\"arrow\"/>\n   <line x1=\"300\" y1=\"80\" x2=\"300\" y2=\"200\" class=\"arrow\"/>\n   <line x1=\"300\" y1=\"80\" x2=\"450\" y2=\"200\" class=\"arrow\"/>\n   </svg>\nSTR\n\n\n\nraw({ id: :the_raw_stuff, data: raw_data })",
+  "shape" => "# frozen_string_literal: true\n\nshape(\n  { renderers: [:html], id: :my_test_box, type: :shape, apply: [:shape_color],\n    left: 120, top: 0, width: 100, smooth: 15, height: 100, overflow: :visible, fasten: [], center: true\n  })\n",
+  "audio" => "#  frozen_string_literal: true\n\n# audio tag\na = audio({ path: 'medias/audios/clap.wav', id: :basic_audio })\nb=box({id: :playButton})\nb.text(:audio_tag)\na.left(333)\nb.touch(:down) do\n  a.play(true)\nend\n\n\n\n### Web Audio\n audio({ path: 'medias/audios/clap.wav', id: :audioElement })\n@audio_context = JS.eval('return new AudioContext()')\n@audio_element = JS.global[:document].getElementById('audioElement')\n@track = @audio_context.createMediaElementSource(@audio_element)\n\n@gain_node = @audio_context.createGain()\n@gain_node[:gain][:value] = 0.6\n\n@track.connect(@gain_node)\n@gain_node.connect(@audio_context[:destination])\n\ndef play_audio\n  @audio_context[:resume].to_s if @audio_context[:state].to_s == 'suspended'\n  @audio_element.play\nend\nb2=box({left: 166})\nb2.text(:web_audio)\nb2.touch(:down) do\n  play_audio\nend\n\n\n# ######### wadjs\n\nbb=box({left: 333})\nbb.text(:wadjs)\n\n\n\n# Initialize window.snare\n\ninit_code = \"window.snare = new Wad({source : 'medias/audios/clap.wav'});\"\nJS.eval(init_code)\n\n# Define the JavaScript playSnare function\njs_code = <<~JAVASCRIPT\n  window.playSnare = function() {\n    window.snare.play();\n    // setTimeout(function() {\n    //  window.snare.stop();\n    //}, 30);\n  }\nJAVASCRIPT\n\n# Evaluate the JavaScript code once\nJS.eval(js_code)\n\n# Define the Ruby method to call the JavaScript function\ndef play_snare\n  JS.eval('window.playSnare()')\nend\n\n# Attach the method to the touch event\nbb.touch(:down) do\n  play_snare\nend",
+  "element" => "# missing example for element",
+  "animation" => "# # frozen_string_literal: true\n#\n# bb = text({ id: :the_ref, width: 369, data: \"touch me!\" })\n# bb.color(:orange)\n# box({ id: :my_box, drag: true })\n# c = circle({ id: :the_circle, left: 222, drag: { move: true, inertia: true, lock: :start } })\n# c.shadow({ renderers: [:html], id: :shadow2, type: :shadow,\n#            attach: [:the_circle],\n#            left: 3, top: 9, blur: 19,\n#            red: 0, green: 0, blue: 0, alpha: 1\n#          })\n#\n# Atome.new(animation: { renderers: [:browser], id: :the_animation1, type: :animation, attach: [],fasten: []})\n# aa = animation({\n#                  targets: %i[my_box the_circle],\n#                  begin: {\n#                    left_add: 0,\n#                    top: :self,\n#                    smooth: 0,\n#                    width: 3\n#                  },\n#                  end: {\n#                    left_add: 333,\n#                    top: 299,\n#                    smooth: 33,\n#                    width: :the_ref\n#                  },\n#                  duration: 800,\n#                  mass: 1,\n#                  damping: 1,\n#                  stiffness: 1000,\n#                  velocity: 1,\n#                  repeat: 1,\n#                  ease: 'spring'\n#                }) do |pa|\n#   puts \"animation say\#{pa}\"\n# end\n# aa.stop(true) do |val|\n#   puts \" stop : \#{val}\"\n# end\n#\n# aa.start(true) do |val|\n#   puts \" start : \#{val}\"\n# end\n#\n# bb.touch(true) do\n#   aa.play(true) do |po|\n#     puts \"play say \#{po}\"\n#   end\n# end\n#\n# aaa = animation({\n#                   # no target for advanced animations control on callback\n#                   begin: {\n#                     left_add: 0,\n#                     top: :self,\n#                     smooth: 0,\n#                     width: 3\n#                   },\n#                   end: {\n#                     left_add: 333,\n#                     top: :self,\n#                     smooth: 33,\n#                     width: :the_ref\n#                   },\n#                   duration: 1800,\n#                   mass: 1,\n#                   damping: 1,\n#                   stiffness: 1000,\n#                   velocity: 1,\n#                   repeat: 1,\n#                   ease: 'spring'\n#                 }) do |pa|\n#   puts \"get params to do anything say\#{pa}\"\n# end\n# wait 7 do\n#   aaa.play(true) do |po|\n#     puts \"play aaa say \#{po}\"\n#   end\n# end\n\n#TODO : make the code above works\n# create a animation object\n# create callback methode when playing\n\n# # here is how to animate shape :\nwait 0.2 do\n  puts \" we wait 0.2 sec  else there's a  of a problem if we use  server wasm \"\n\nb=box({id: :the_box})\n\n  b.animate({ to: 333, particle: :width, duration: 3000}) do |val|\n    puts \"width +\#{val}\"\n  end\n\n  b.animate({ to: 456, particle: :left, duration: 5000}) do |val|\n    puts \"left +\#{val}\"\n  end\n\n  b.animate({  end: :left}) do |val|\n    puts \"left ended\"\n  end\n\n  b.animate({ to: 69, particle: :smooth, duration: 10000}) do |val|\n    puts \"smooth +\#{val}\"\n  end\n\n  b.animate({ end: :smooth}) do |val|\n    puts \" cool smooth end now!!!\"\n  end\n\n  b.animate({ to: 90, particle: :rotate, duration: 10000}) do |val|\n    puts \"rotate +\#{val}\"\n  end\n\n  b.animate({ to: 222, particle: :top, duration: 10000}) do |val|\n    puts \"top +\#{val}\"\n  end\n\nend\n\n\n\n",
+  "group" => "# frozen_string_literal: true\n\ntext({ id: :the_text,data: 'Touch me to group and colorize', center: true, top: 120, width: 77, component: { size: 11 } })\nbox({ left: 12, id: :the_first_box })\nthe_circle = circle({ id: :cc, color: :yellowgreen, top: 222 })\nthe_circle.image({path:  'medias/images/red_planet.png', id: :the__red_planet })\nthe_circle.color('red')\nthe_circle.box({ left: 333, id: :the_c })\n\nelement({ id: :the_element })\n\nthe_view = grab(:view)\n\ncolor({ id: :the_orange, red: 1, green: 0.4 })\ncolor({ id: :the_lemon, red: 1, green: 1 })\nthe_group = group({ collect: the_view.shape })\n\nwait 0.5 do\n  the_group.left(633)\n  wait 0.5 do\n    the_group.rotate(23)\n    wait 0.5 do\n      the_group.apply([:the_orange])\n      the_group.blur(6)\n    end\n  end\nend\nputs the_group.collect\ngrab(:the_first_box).smooth(9)\ngrab(:the_text).touch(true) do\nbibi=box({left: 555})\nthe_group2= group({ collect: [:the_c,:the_first_box, :the_text, :cc , bibi.id] })\nthe_group2.top(55)\n# puts we remove the circle(:cc) so it' wont be affected by the color :the_lemon\nthe_group2.collect.delete( :cc )\nthe_group2.apply([:the_lemon])\n\nend\n\n\n\n# # # FIXME : on touch code above crash but works with wait\n\n\n",
+  "text" => "#  frozen_string_literal: true\n\nnew({particle: :select})\nt = text :hello\nt.left(99)\n\nt.edit(true)\n\nb=box\nb.touch(true) do\n  puts t.data\n  back_color = grab(:back_selection)\n  text_color = grab(:text_selection)\n  back_color.red(1)\n  back_color.alpha(1)\n  text_color.green(1)\n  t.component({ selected: true })\nend",
+  "human" => "# missing example for human",
+  "machine" => "# missing example for machine",
+  "paint" => "# frozen_string_literal: true\n\nc=circle({drag: true, id: :the_circle})\n\nc1=c.color(:white).id\nc2=c.color(:red).id\nc3=c.color(:yellow).id\ncolor({id: :my_col1, red: 1 , alpha: 0.5})\nwait 0.5 do\n  c.paint({ gradient: [c1,c2], direction: :left })\n  wait 0.5 do\n    wait 0.5 do\n      c.paint({ gradient: [c1,c2], diffusion: :radial })\n      wait 0.5 do\n        cc= c.paint({ gradient: [c1,c2, c3], diffusion: :conic })\n        wait 0.5 do\n          # cc.delete(true)\n          #   alert c.paint\n          c.remove({all: :paint})\n          # alert c.paint\n          wait 0.6 do\n            c.color(:red)\n          end\n          # c.paint({ gradient: [c3, c3], diffusion: :conic })\n        end\n      end\n    end\n  end\nend\n",
+  "vector" => "# frozen_string_literal: true\n\ngrab(:black_matter).image({ path: 'medias/images/icons/color.svg', id: :atomic_logo, width: 33, left: 333 })\nimg=vector({ width: 333, height: 333, id: :my_placeholder })\nA.fetch_svg({ source: :atomic_logo, target: :my_placeholder })\nwait 2 do\n  img.color(:cyan)\nend\n# grab(:atomic_logo).delete(true)\n",
+  "table" => "# frozen_string_literal: true\n\n\nc = circle({ id: :my_cirle, color: :red, drag: true })\nc.box({ left: 0, width: 22, height: 22, top: 65 })\nc.touch(true) do\n  alert :okk\nend\nm = table({ renderers: [:html], attach: :view, id: :my_test_box, type: :table, apply: [:shape_color],\n             left: 333, top: 0, width: 900, smooth: 15, height: 900, overflow: :scroll, option: { header: true },\n             component: {\n               border: { thickness: 5, color: :blue, pattern: :dotted },\n               overflow: :auto,\n               color: \"white\",\n               shadow: {\n                 id: :s4,\n                 left: 20, top: 0, blur: 9,\n                 option: :natural,\n                 red: 0, green: 1, blue: 0, alpha: 1\n               },\n               height: 50,\n               width: 50,\n               component: { size: 12, color: :black }\n             },\n             data: [\n               { titi: :toto },\n               { dfgdf: 1, name: 'Alice', age: 30, no: 'oko', t: 123, r: 654, f: 123, g: 654, w: 123, x: 654, c: 123, v: 654 },\n               { id: 2, name: 'Bob', age: 22 },\n               { dfg: 4, name: 'Vincent', age: 33, no: grab(:my_cirle) },\n               { dfgd: 3, name: 'Roger', age: 18, no: image(:red_planet), now: :nothing }\n\n             ]\n           })\n\n# tests\nm.color(:orange)\nm.border({ thickness: 5, color: :blue, pattern: :dotted })\n\nputs m.get({ cell: [1, 2] })\nwait 2 do\n  m.insert({ cell: [2, 2], content: 999 })\n  m.insert({ row: 1 })\n  wait 1 do\n    m.remove({ row: 2 })\n  end\n  wait 2 do\n    m.remove({ column: 1 })\n  end\n  wait 3 do\n    m.insert({ column: 3 })\n  end\n\n  wait 4 do\n    m.sort({ column: 1, method: :alphabetic })\n    puts 1\n    wait 1 do\n      puts 2\n      m.sort({ column: 2, method: :numeric })\n      wait 1 do\n        puts 3\n        m.sort({ column: 3, method: :numeric })\n        wait 1 do\n          puts 4\n          m.sort({ column: 1, method: :numeric })\n        end\n      end\n    end\n  end\n\nend\n\n#  cell.fusion() # to be implemented later\n\n\n\n\n",
+  "atomized" => "# missing example for atomized",
+  "map" => "#  frozen_string_literal: true\n\n\n# new({ atome: :map, type: :hash })\n\n# new({particle: :longitude}) do |params, _user_proc|\n#   render(:map, {longitude: params })\n#   params\n# end\n#\n# new({particle: :latitude}) do |params, _user_proc|\n#   render(:map, {latitude: params })\n#   params\n# end\n\n# new({ method: :map, renderer: :html, type: :int }) do |params, _user_proc|\n#   latitude_found=@latitude\n#   longitude_found=@longitude\n#   location_hash={longitude: longitude_found, latitude: latitude_found}.merge(params)\n#   html.location(location_hash)\n# end\n\n\n\nm=map({id: :hgfh, longitude: 55.9876876, latitude: 33.987687, width: 333, height: 222,})\n# wait 3 do\np=map({id: :poilo, location: :auto, width: 333, height: 333, top: 333 , left: 333, zoom: 3})\n# end\nb=box\nb.touch(true) do\n  m.zoom(33)\n  # p.zoom(3)\n  # wait 2 do\n    p.pan({ left: 370, top: 190 })\n  # end\nend\n\n# m=map({id: :locator, location: :auto})\n\n# alert m.longitude\n\n\n",
+  "vr" => "# frozen_string_literal: true\n\nvr({width: 700,height: 390,path: 'medias/images/puydesancy.jpg', id: :tutu})\n",
+  "draw" => "# missing example for draw",
+  "input" => "# frozen_string_literal: true\nt = text({ left: 33, top: 33, data: 'data collected', id: :infos })\nb=box({drag: true, id: :the_b})\n# Important to trigger on 'return' add the parameter :  {trigger: :return}\ninp=b.input({ width: 166,\n              trigger: :up,\n              back: :orange,\n              shadow: {\n                id: :s2,\n                left: 3, top: 3, blur: 3,\n                invert: true,\n                red: 0, green: 0, blue: 0, alpha: 0.9\n              },\n              component: {size: 8},\n              text: { color: :black , top: 5, left: 6},\n              smooth: 3,\n              left: 66,\n              top: 33,\n              # height: 8,\n              default: 'type here'\n            }) do |val|\n\n  grab(:infos).data(val)\nend\n\ninp.top(12)\n\n  wait 1 do\n    inp.width(666)\n    wait 1 do\n      inp.holder.data('new data')\n    end\nend\n\n\nc=circle({top: 99})\nc.touch(true) do\n  alert b.fasten\nend\n\n\n",
+  "list" => "# frozen_string_literal: true\n\n\ndata_f = %w[initiate suspect prospect abandoned finished archived]\n\nd_d_l = box({ id: :the_ddl, width: 160 })\nd_d_l.touch(:down) do\n  grab(:view).drop_down({ data: data_f, }) do |params|\n    d_d_l.clear(true)\n    d_d_l.text(params)\n  end\nend\n\n",
+  "slider" => "# frozen_string_literal: true\n\nlabel = text({ data: 0, top: 400, left: 69, component: { size: 12 }, color: :gray })\n\naaa = grab(:intuition).slider({ id: :toto, range: { color: :yellow }, min: -12, max: 33, width: 333, value: 12, height: 25, left: 99, top: 350, color: :orange, cursor: { color: :orange, width: 25, height: 25 } }) do |value|\n  label.data(\"(\#{value})\")\nend\n\naa = grab(:intuition).slider({ orientation: :vertical, range: { color: :white }, value: 55, width: 55, height: 555, attach: :intuition, left: 555, top: 33, color: :red, cursor: { color: {alpha: 1, red: 0.12, green: 0.12, blue: 0.12}, width: 33, height: 66, smooth: 3 } }) do |value|\n  label.data(\"(\#{value})\")\nend\n\nb=box\nb.touch(true) do\n  aa.value(12)\n  aaa.value(-6)\nend\n",
+  "matrix" => "# #  frozen_string_literal: true\n#\nmatrix_zone = box({ width: 333, height: 333, drag: true, id: :the_box, color: {alpha: 0.4} })\n#\n# # matrix creation\nmain_matrix = matrix_zone.matrix({ id: :vie_0, rows: 8, columns: 8, spacing: 6, size: '100%' })\nmain_matrix.smooth(10)\nmain_matrix.color(:red)\n\n\n\n# #######################################################@\nmatrix_to_treat = main_matrix.cells\nmatrix_to_treat.color(:blue)\nmatrix_to_treat.smooth(6)\nmatrix_to_treat.shadow({\n                         id: :s1,\n                         left: 3, top: 3, blur: 6,\n                         invert: false,\n                         red: 0, green: 0, blue: 0, alpha: 0.6\n                       })\n# ###################\ncol_1 = color(:yellow)\ncol_2 = color({ red: 1, id: :red_col })\n\nwait 3 do\n  matrix_to_treat.paint({ gradient: [col_1.id, col_2.id], direction: :top })\nend\n#\n# ###################\n\ntest_cell = grab(:vie_0_2_3)\nwait 1 do\n  test_cell.color(:red)\n  test_cell.text('touch')\n  grab(:vie_0_background).color(:red)\nend\n\n\nc= circle({left: 399})\ntest_cell.touch(true) do\n  test_cell.alternate({ width: 33, color: :red }, { width: 66, color: :orange })\n  matrix_to_treat.paint({ gradient: [col_1.id, col_1.id], direction: :top })\n  other_col=test_cell.color(:green)\n  c.paint({ gradient: [col_1.id, col_2.id], direction: :left })\n  test_cell.paint({ gradient: [col_1.id, other_col.id], direction: :left })\nend\n\nwait 1 do\n  matrix_to_treat.width(33)\nend\nmatrix_to_treat.drag(true)\n# alert matrix_to_treat.id\nwait 2 do\n  grab(:vie_0_background).left(250)\n  grab(:vie_0_background).drag(true)\nend\nmatrix_to_treat.touch(:down) do |event|\n  # alert el.inspect\n  current_cell= grab(event[:target][:id].to_s)\n  current_cell.color(:blue)\n  current_cell.selected(true)\nend\nmatrix_to_treat.smooth(9)\nmain_matrix.color(:red)\nmatrix_to_treat.color(:yellow)\nwait 5 do\n  main_matrix.resize_matrix({width: 555, height: 555})\nend\n\nwait 7 do\nmain_matrix.display(false)\n  wait 1 do\n    main_matrix.display(true)\n    wait 1 do\n      main_matrix.delete(true)\n      wait 1 do\n        main_matrix = matrix_zone.matrix({ id: :vie_0, rows: 8, columns: 8, spacing: 6, size: '100%' })\n      end\n    end\n  #   main_matrix.color(:red)\n  end\nend\n\n# b=box\n# b.circle\n# b.delete(true)\n\n",
+  "application" => "# frozen_string_literal: true\n\na = application({\n                  id: :arp,\n                  margin: 3,\n                  spacing: 6\n                })\n\npage1_code = lambda do |back|\n  alert :kooly\nend\n\nverif = lambda do\n  b = box({ id: :ty, left: 90, top: 90 })\n  b.touch(true) do\n    alert grab(:mod_1).touch\n  end\nend\n\npage1 = {\n  id: :page1,\n  color: :cyan,\n  name: :accueil,\n  footer: { color: :green, height: 22 },\n  header: { color: :yellow },\n  left_side_bar: { color: :yellowgreen },\n  right_side_bar: { color: :blue },\n}\n\ncolor({ id: :titi, red: 1 })\npage2 = { id: :page2,\n          color: :white,\n          menu: false,\n          run: verif,\n          box: { id: :mod_1, left: 333, top: 123, touch: { down: true, code: page1_code } }\n}\n\npage0 = { id: :page0,\n          color: :purple,\n}\n\na.page(page0)\na.page(page1)\na.page({ id: :page3,\n         color: :red,\n         footer: { color: :green, height: 22 }\n       })\n\n\n\nmenu_f=a.menu\nmenus_found= menu_f.fasten # replace fasten for entries\nputs a.pages\nputs   \"pages => \#{a.pages}\"\nputs   \"menus_found => \#{menus_found}\"\n\nbloc_to_add= {height: 156, color: :green}\nbloc_to_add2= {height: 99, color: :blue}\nbloc_to_add3= {height: 333, color: :orange, subs:{contact: {width: 1, color: :black}, project: {width: 1}, calendar: {width: 0.5, color: :green}}}\n\n a.insert({page3: {block1: bloc_to_add , block2: bloc_to_add2, block3: bloc_to_add3}})\n\n\nwait 1 do\n  # how to remove blocks\n   a.extract({page3: :block1})\nend\n\npage_3=a.show(:page3)\n\nwait 1 do\n  page_3.color(:cyan)\n  page_3.box({top: 900})\nend\n\n\n# how access blocks\n# wait 3 do\n#   grab(:block2).color(:black)\n# end\n\n\nputs(grab(:project).inspect)\n\n",
+  "page" => "# missing example for page",
+  "show" => "# missing example for show",
+  "buttons" => "# frozen_string_literal: true\n\nbox({color: :gray, width: 666, height: 666})\nbox({ id: :the_box, drag: true, color: { alpha: 2 } })\n\n\nbut =buttons({\n          id: \"my_menu\",\n          depth: 9999,\n          attach: :the_box,\n          inactive: { text: { color: :gray }, width: 66, height: 12, spacing: 3, disposition: :horizontal,\n                      color: :orange, margin: { left: 33, top: 12 } },\n          active: { text: { color: :white, shadow: {} }, color: :blue, shadow: {} },\n        })\n\nc = text({ top: 99, left: 99, data: 'add buttons' })\n\nc.touch(:down) do\n  but.add_button(new_button: {\n    text: :button1,\n    code: lambda { puts :button1_touched }\n  })\n    but.add_button(new_button2: {\n      text: :button2,\n      code: lambda { puts :button1_touched }\n    })\n  but.add_button(new_button3: {\n    text: :button3,\n    code: lambda { puts :button1_touched }\n  })\n\n  wait 0.2 do\n    grab(:my_menu).remove_menu_item(:new_button2)\n  end\n\n  end\n\n\n\n\n\n\n# TODO: remove menu_item ,reset_menu, reorder, delete",
+  "box" => "# missing example for box",
+  "circle" => "# missing example for circle",
+}

data/vendor/assets/src/medias/utils/test.rb

@@ -0,0 +1 @@
+alert :hello

data/vendor/assets/src-tauri/Cargo.toml

@@ -11,12 +11,13 @@ rust-version = "1.57"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [build-dependencies]
-tauri-build = {version = "1.2", features = [] }
+tauri-build = { version = "2.0.0-rc", features = [] }
 
 [dependencies]
+tauri = { version = "2.0.0-rc", features =  ["devtools"] }
+tauri-plugin-shell = "2.0.0-rc"
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = {version = "1.7", features = ["api-all"] }
 midir = "0.10.0"
 
 [features]
@@ -26,3 +27,5 @@ default = [ "custom-protocol" ]
 # this feature is used used for production builds where `devPath` points to the filesystem
 # DO NOT remove this
 custom-protocol = [ "tauri/custom-protocol" ]
+[lib]
+crate-type = ["staticlib", "cdylib", "lib"]

data/vendor/assets/src-tauri/capabilities/default.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../gen/schemas/desktop-schema.json",
+  "identifier": "default",
+  "description": "Capability for the main window",
+  "windows": ["main"],
+  "permissions": [
+    "core:default",
+    "shell:allow-open"
+  ]
+}

data/vendor/assets/src-tauri/src/lib.rs

@@ -0,0 +1,14 @@
+// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
+#[tauri::command]
+fn greet(name: &str) -> String {
+    format!("Hello, {}! You've been greeted from Rust!", name)
+}
+
+#[cfg_attr(mobile, tauri::mobile_entry_point)]
+pub fn run() {
+    tauri::Builder::default()
+        .plugin(tauri_plugin_shell::init())
+        .invoke_handler(tauri::generate_handler![greet])
+        .run(tauri::generate_context!())
+        .expect("error while running tauri application");
+}

data/vendor/assets/src-tauri/src/main.rs

@@ -1,14 +1,13 @@
 use std::process::Command;
 use std::str;
 use std::fs;
+use std::io::Write;
+#[cfg(debug_assertions)]
+use tauri::Manager; // Import Manager only in dev mode
+// use tauri::Emitter; // Import mandatory to use window.emit
 
 mod midi;
 
-#[tauri::command]
-fn greet(name: &str) -> String {
-    format!("Hello, {}! You've been greeted from Rust!", name)
-}
-
 #[tauri::command]
 fn execute_command(command: &str) -> Result<String, String> {
     match Command::new("sh")
@@ -27,24 +26,36 @@ fn execute_command(command: &str) -> Result<String, String> {
     }
 }
 
+
+
 #[tauri::command]
 fn read_file(file_path: &str) -> Result<String, String> {
     let content = match fs::read_to_string(file_path) {
-        Ok(content) => content,
-        Err(_) => return Err("Failed to read file.".to_string()),
+        Ok(content) => {
+            content
+        }
+        Err(_) => {
+            return Err("Failed to read file.".to_string());
+        }
     };
     Ok(content)
 }
 
+
+
 #[tauri::command]
-fn write_file(file_path: &str, content: &str) -> Result<(), String> {
-    let path = std::path::Path::new(file_path);
-    match fs::write(path, content) {
-        Ok(_) => Ok(()),
-        Err(_) => Err("Failed to write to the file.".to_string()),
+fn write_file(file_path: String, content: String) -> Result<String, String> {
+    match fs::File::create(&file_path) {
+        Ok(mut file) => {
+            if file.write_all(content.as_bytes()).is_ok() {
+                Ok("file recorded".to_string())
+            } else {
+                Err("error: file not recorded".to_string())
+            }
+        }
+        Err(_) => Err("error: file not recorded".to_string()),
     }
 }
-
 #[tauri::command]
 fn list_directory_content(directory_path: String) -> Result<Vec<String>, String> {
     let path = std::path::Path::new(&directory_path);
@@ -72,8 +83,16 @@ fn start_midi(app_handle: tauri::AppHandle) {
 
 fn main() {
     tauri::Builder::default()
+        .setup(|_app| {
+            #[cfg(debug_assertions)] // Only run this block in dev mode
+            {
+                if let Some(window) = _app.get_webview_window("main") {
+                    window.open_devtools();
+                }
+            }
+            Ok(())
+        })
         .invoke_handler(tauri::generate_handler![
-            greet,
             execute_command,
             read_file,
             write_file,
@@ -82,19 +101,4 @@ fn main() {
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
-}
-
-
-// elementary
-
-// #[command]
-// fn do_something() {
-//     // Code pour faire quelque chose avec Elementary
-// }
-//
-// fn main() {
-//     tauri::Builder::default()
-//         .invoke_handler(tauri::generate_handler![start_elementary, do_something])
-//         .run(tauri::generate_context!())
-//         .expect("error while running tauri application");
-// }
+}