atome 0.5.7.6.0 → 0.5.7.6.5

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

@@ -0,0 +1,945 @@
+example={
+  particles: {
+    creator: {
+      example: nil,
+      infos: nil,
+      aim: nil
+    },
+    aid: {
+      example: '# 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',
+      infos: 'Usage information for aid.',
+      aim: 'The aim of aid is derived from its functionality.'
+    },
+    connection: {
+      example: nil,
+      infos: nil,
+      aim: nil
+    },
+    message: {
+      example: '# # frozen_string_literal: true\nb=box\n\nb.touch(:down) do\n   A.message({ action: :authentication, data: { table: :user, particles: { email: \'tre@tre.tre\', password: \'poipoi\' } } }) do |response|\n    alert "=> \#{response}"\n  end\nend\n\n#\n#\n# # # 1 login attempt\n\nwait 1 do\n  A.message({ action: :authentication, data: { table: :user, particles: { email: \'tre@tre.tre\', password:  \'poipoi\' } } }) do |response|\n    alert "=> \#{response}"\n  end\n  wait 1 do\n    A.message({ action: :authentication, data: { table: :user, particles: { email: \'tre@tre.tre\', password:  \'poipoi\' } } }) do |response|\n      alert "=> \#{response}"\n    end\n  end\nend\n#\n# 2 account creation attempt\n# wait 1 do\n#   A.message({ action: :account_creation, data: { email: \'tre@tre.tre\', password: \'poipoi\', user_id: \'Nico\' }  }) do |response|\n#     puts response\n#   end\n#\n# end\n\n# string=hello\n#\n# puts JS.global.sha256(string.to_s)\n',
+      infos: 'Usage information for message.',
+      aim: 'The aim of message is derived from its functionality.'
+    },
+    int8: {
+      example: '# 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',
+      infos: 'Usage information for int8.',
+      aim: 'The aim of int8 is derived from its functionality.'
+    },
+    language: {
+      example: '# 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',
+      infos: 'Usage information for language.',
+      aim: 'The aim of language is derived from its functionality.'
+    },
+    controller: {
+      example: nil,
+      infos: nil,
+      aim: nil
+    },
+    smooth: {
+      example: '#  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',
+      infos: 'Usage information for smooth.',
+      aim: 'The aim of smooth is derived from its functionality.'
+    },
+    blur: {
+      example: '# 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',
+      infos: 'Usage information for blur.',
+      aim: 'The aim of blur is derived from its functionality.'
+    },
+    touch: {
+      example: '#  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',
+      infos: 'Usage information for touch.',
+      aim: 'The aim of touch is derived from its functionality.'
+    },
+    play: {
+      example: '# 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',
+      infos: 'Usage information for play.',
+      aim: 'The aim of play is derived from its functionality.'
+    },
+    pause: {
+      example: "# frozen_string_literal: true\n\n\nvideo({id: :video, path: 'medias/videos/avengers.mp4', width: 300, height: 222 })\nwaveform_container=box({id: 'thumbnails-container', top: 190,width: 666, height: 39, color: :gray})\nwaveform_container.draw({width: 666, height: 33,  id: :thumbnails})\nwaveform_container.box({id: 'progress', width: 3, height: '100%', color: :red})\n\n\nbox({id: :file, top: 666, left: 12, width: 300, height: 40, smooth: 9, color: { red: 0.3, green: 0.3, blue: 0.3 } })\nbox({id: :load_file, top: 777, left: 12, width: 300, height: 40, smooth: 9, color: { red: 0.3, green: 0.3, blue: 0.3 } })\n\n\n  JS.eval <<~JS\n\nconst video = document.getElementById('video');\n\n\t\tconst thumbnailsCanvas = document.getElementById('thumbnails');\n\t\tconst thumbnailsCtx = thumbnailsCanvas.getContext('2d');\n\t\tconst progress = document.getElementById('progress');\n\t\t// const loadFileButton = document.getElementById('load-file');\n\t\t// const fileInput = document.getElementById('file-input');\n\t\tlet isDragging = false;\n\n\t\t// Charger la vidéo par défaut\n\t\tvideo.addEventListener('loadeddata', () => {\n\t\t\tdrawThumbnails(12);\n\t\t});\n\n\t\tvideo.addEventListener('timeupdate', () => {\n\t\t\tconst progressPosition = (video.currentTime / video.duration) * thumbnailsCanvas.clientWidth;\n\t\t\tprogress.style.left = `${progressPosition}px`;\n\t\t});\n\n\t\t// Drag and Drop Events\n\t\t// loadFileButton.addEventListener('dragover', (event) => {\n\t\t// \tevent.preventDefault();\n\t\t// \tloadFileButton.classList.add('dragover');\n\t\t// });\n        //\n\t\t// loadFileButton.addEventListener('dragleave', () => {\n\t\t// \tloadFileButton.classList.remove('dragover');\n\t\t// });\n        //\n\t\t// loadFileButton.addEventListener('drop', (event) => {\n\t\t// \tevent.preventDefault();\n\t\t// \tloadFileButton.classList.remove('dragover');\n\t\t// \tconst file = event.dataTransfer.files[0];\n\t\t// \tif (file && file.type.startsWith('video/')) {\n\t\t// \t\tloadVideoFile(file);\n\t\t// \t}\n\t\t// });\n\n\t\t// loadFileButton.addEventListener('click', () => {\n\t\t// \tfileInput.click();\n\t\t// });\n        //\n\t\t// fileInput.addEventListener('change', (event) => {\n\t\t// \tconst file = event.target.files[0];\n\t\t// \tif (file) {\n\t\t// \t\tloadVideoFile(file);\n\t\t// \t}\n\t\t// });\n\n\t\tasync function loadVideoFile(file) {\n\t\t\ttry {\n\t\t\t\tconst objectURL = URL.createObjectURL(file);\n\t\t\t\tvideo.src = objectURL;\n\t\t\t\tvideo.load(); // Reload the video to apply the new source\n\t\t\t} catch (error) {\n\t\t\t\tconsole.error('Error loading video file:', error);\n\t\t\t}\n\t\t}\n\n\t\tfunction drawThumbnails(maxImages) {\n\t\t\tconst samples = Math.min(maxImages, maxImages);\n\t\t\tconst interval = video.duration / samples;\n\t\t\tconst videoAspectRatio = video.videoWidth / video.videoHeight;\n\n\t\t\t// Adjust the canvas height based on the video's aspect ratio\n\t\t\tconst canvasWidth = thumbnailsCanvas.width;\n\t\t\tconst canvasHeight = canvasWidth / videoAspectRatio / maxImages;\n\t\t\tthumbnailsCanvas.height = canvasHeight;\n\n\t\t\tvideo.pause();\n\t\t\tvideo.currentTime = 0;\n\n\t\t\tlet i = 0;\n\t\t\tconst captureFrames = () => {\n\t\t\t\tif (i >= samples) return;\n\n\t\t\t\tvideo.currentTime = i * interval;\n\n\t\t\t\tvideo.addEventListener('seeked', function capture() {\n\t\t\t\t\tconst width = canvasWidth / samples;\n\t\t\t\t\tconst height = canvasHeight;\n\n\t\t\t\t\tthumbnailsCtx.drawImage(video, i * width, 0, width, height);\n\n\t\t\t\t\tvideo.removeEventListener('seeked', capture);\n\t\t\t\t\ti++;\n\t\t\t\t\tcaptureFrames();\n\t\t\t\t});\n\t\t\t};\n\t\t\tcaptureFrames();\n\t\t}\n\n\t\tthumbnailsCanvas.addEventListener('mousedown', (event) => {\n\t\t\tvideo.pause();\n\t\t\tisDragging = true;\n\t\t\thandleScrub(event);\n\t\t});\n\n\t\t// Attach mouseup event to the document to ensure it is captured even if mouse leaves the canvas\n\t\tdocument.addEventListener('mouseup', (event) => {\n\t\t\tvideo.play();\n\t\t\tif (isDragging) {\n\t\t\t\tisDragging = false;\n\t\t\t}\n\t\t});\n\n\t\tthumbnailsCanvas.addEventListener('mousemove', (event) => {\n\t\t\tif (isDragging) {\n\t\t\t\thandleScrub(event);\n\t\t\t}\n\t\t});\n\n\t\tfunction handleScrub(event) {\n\t\t\tconst rect = thumbnailsCanvas.getBoundingClientRect();\n\t\t\tconst scrubX = event.clientX - rect.left;\n\t\t\tconst newTime = (scrubX / thumbnailsCanvas.clientWidth) * video.duration;\n\t\t\tvideo.currentTime = newTime;\n\t\t}\n\n\n  JS\n\n\n\n",
+      infos: 'Usage information for pause.',
+      aim: 'The aim of pause is derived from its functionality.'
+    },
+    time: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for time.',
+      aim: 'The aim of time is derived from its functionality.'
+    },
+    on: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for on.',
+      aim: 'The aim of on is derived from its functionality.'
+    },
+    fullscreen: {
+      example: '#  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 })',
+      infos: 'Usage information for fullscreen.',
+      aim: 'The aim of fullscreen is derived from its functionality.'
+    },
+    mute: {
+      example: nil,
+      infos: nil,
+      aim: nil
+    },
+    drag: {
+      example: '# 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',
+      infos: 'Usage information for drag.',
+      aim: 'The aim of drag is derived from its functionality.'
+    },
+    drop: {
+      example: "#  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",
+      infos: 'Usage information for drop.',
+      aim: 'The aim of drop is derived from its functionality.'
+    },
+    over: {
+      example: '#  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',
+      infos: 'Usage information for over.',
+      aim: 'The aim of over is derived from its functionality.'
+    },
+    targets: {
+      example: '# # 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',
+      infos: 'Usage information for targets.',
+      aim: 'The aim of targets is derived from its functionality.'
+    },
+    start: {
+      example: "# 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",
+      infos: 'Usage information for start.',
+      aim: 'The aim of start is derived from its functionality.'
+    },
+    stop: {
+      example: '#  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',
+      infos: 'Usage information for stop.',
+      aim: 'The aim of stop is derived from its functionality.'
+    },
+    begin: {
+      example: '# # 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',
+      infos: 'Usage information for begin.',
+      aim: 'The aim of begin is derived from its functionality.'
+    },
+    end: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for end.',
+      aim: 'The aim of end is derived from its functionality.'
+    },
+    duration: {
+      example: "# frozen_string_literal: true\n\n\nvideo({id: :video, path: 'medias/videos/avengers.mp4', width: 300, height: 222 })\nwaveform_container=box({id: 'thumbnails-container', top: 190,width: 666, height: 39, color: :gray})\nwaveform_container.draw({width: 666, height: 33,  id: :thumbnails})\nwaveform_container.box({id: 'progress', width: 3, height: '100%', color: :red})\n\n\nbox({id: :file, top: 666, left: 12, width: 300, height: 40, smooth: 9, color: { red: 0.3, green: 0.3, blue: 0.3 } })\nbox({id: :load_file, top: 777, left: 12, width: 300, height: 40, smooth: 9, color: { red: 0.3, green: 0.3, blue: 0.3 } })\n\n\n  JS.eval <<~JS\n\nconst video = document.getElementById('video');\n\n\t\tconst thumbnailsCanvas = document.getElementById('thumbnails');\n\t\tconst thumbnailsCtx = thumbnailsCanvas.getContext('2d');\n\t\tconst progress = document.getElementById('progress');\n\t\t// const loadFileButton = document.getElementById('load-file');\n\t\t// const fileInput = document.getElementById('file-input');\n\t\tlet isDragging = false;\n\n\t\t// Charger la vidéo par défaut\n\t\tvideo.addEventListener('loadeddata', () => {\n\t\t\tdrawThumbnails(12);\n\t\t});\n\n\t\tvideo.addEventListener('timeupdate', () => {\n\t\t\tconst progressPosition = (video.currentTime / video.duration) * thumbnailsCanvas.clientWidth;\n\t\t\tprogress.style.left = `${progressPosition}px`;\n\t\t});\n\n\t\t// Drag and Drop Events\n\t\t// loadFileButton.addEventListener('dragover', (event) => {\n\t\t// \tevent.preventDefault();\n\t\t// \tloadFileButton.classList.add('dragover');\n\t\t// });\n        //\n\t\t// loadFileButton.addEventListener('dragleave', () => {\n\t\t// \tloadFileButton.classList.remove('dragover');\n\t\t// });\n        //\n\t\t// loadFileButton.addEventListener('drop', (event) => {\n\t\t// \tevent.preventDefault();\n\t\t// \tloadFileButton.classList.remove('dragover');\n\t\t// \tconst file = event.dataTransfer.files[0];\n\t\t// \tif (file && file.type.startsWith('video/')) {\n\t\t// \t\tloadVideoFile(file);\n\t\t// \t}\n\t\t// });\n\n\t\t// loadFileButton.addEventListener('click', () => {\n\t\t// \tfileInput.click();\n\t\t// });\n        //\n\t\t// fileInput.addEventListener('change', (event) => {\n\t\t// \tconst file = event.target.files[0];\n\t\t// \tif (file) {\n\t\t// \t\tloadVideoFile(file);\n\t\t// \t}\n\t\t// });\n\n\t\tasync function loadVideoFile(file) {\n\t\t\ttry {\n\t\t\t\tconst objectURL = URL.createObjectURL(file);\n\t\t\t\tvideo.src = objectURL;\n\t\t\t\tvideo.load(); // Reload the video to apply the new source\n\t\t\t} catch (error) {\n\t\t\t\tconsole.error('Error loading video file:', error);\n\t\t\t}\n\t\t}\n\n\t\tfunction drawThumbnails(maxImages) {\n\t\t\tconst samples = Math.min(maxImages, maxImages);\n\t\t\tconst interval = video.duration / samples;\n\t\t\tconst videoAspectRatio = video.videoWidth / video.videoHeight;\n\n\t\t\t// Adjust the canvas height based on the video's aspect ratio\n\t\t\tconst canvasWidth = thumbnailsCanvas.width;\n\t\t\tconst canvasHeight = canvasWidth / videoAspectRatio / maxImages;\n\t\t\tthumbnailsCanvas.height = canvasHeight;\n\n\t\t\tvideo.pause();\n\t\t\tvideo.currentTime = 0;\n\n\t\t\tlet i = 0;\n\t\t\tconst captureFrames = () => {\n\t\t\t\tif (i >= samples) return;\n\n\t\t\t\tvideo.currentTime = i * interval;\n\n\t\t\t\tvideo.addEventListener('seeked', function capture() {\n\t\t\t\t\tconst width = canvasWidth / samples;\n\t\t\t\t\tconst height = canvasHeight;\n\n\t\t\t\t\tthumbnailsCtx.drawImage(video, i * width, 0, width, height);\n\n\t\t\t\t\tvideo.removeEventListener('seeked', capture);\n\t\t\t\t\ti++;\n\t\t\t\t\tcaptureFrames();\n\t\t\t\t});\n\t\t\t};\n\t\t\tcaptureFrames();\n\t\t}\n\n\t\tthumbnailsCanvas.addEventListener('mousedown', (event) => {\n\t\t\tvideo.pause();\n\t\t\tisDragging = true;\n\t\t\thandleScrub(event);\n\t\t});\n\n\t\t// Attach mouseup event to the document to ensure it is captured even if mouse leaves the canvas\n\t\tdocument.addEventListener('mouseup', (event) => {\n\t\t\tvideo.play();\n\t\t\tif (isDragging) {\n\t\t\t\tisDragging = false;\n\t\t\t}\n\t\t});\n\n\t\tthumbnailsCanvas.addEventListener('mousemove', (event) => {\n\t\t\tif (isDragging) {\n\t\t\t\thandleScrub(event);\n\t\t\t}\n\t\t});\n\n\t\tfunction handleScrub(event) {\n\t\t\tconst rect = thumbnailsCanvas.getBoundingClientRect();\n\t\t\tconst scrubX = event.clientX - rect.left;\n\t\t\tconst newTime = (scrubX / thumbnailsCanvas.clientWidth) * video.duration;\n\t\t\tvideo.currentTime = newTime;\n\t\t}\n\n\n  JS\n\n\n\n",
+      infos: 'Usage information for duration.',
+      aim: 'The aim of duration is derived from its functionality.'
+    },
+    mass: {
+      example: '# # 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',
+      infos: 'Usage information for mass.',
+      aim: 'The aim of mass is derived from its functionality.'
+    },
+    damping: {
+      example: '# # 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',
+      infos: 'Usage information for damping.',
+      aim: 'The aim of damping is derived from its functionality.'
+    },
+    stiffness: {
+      example: '# # 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',
+      infos: 'Usage information for stiffness.',
+      aim: 'The aim of stiffness is derived from its functionality.'
+    },
+    velocity: {
+      example: '# # 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',
+      infos: 'Usage information for velocity.',
+      aim: 'The aim of velocity is derived from its functionality.'
+    },
+    ease: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for ease.',
+      aim: 'The aim of ease is derived from its functionality.'
+    },
+    keyboard: {
+      example: '#  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',
+      infos: 'Usage information for keyboard.',
+      aim: 'The aim of keyboard is derived from its functionality.'
+    },
+    resize: {
+      example: '#  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',
+      infos: 'Usage information for resize.',
+      aim: 'The aim of resize is derived from its functionality.'
+    },
+    overflow: {
+      example: '#  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: nil; } \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',
+      infos: 'Usage information for overflow.',
+      aim: 'The aim of overflow is derived from its functionality.'
+    },
+    animate: {
+      example: '# # 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',
+      infos: 'Usage information for animate.',
+      aim: 'The aim of animate is derived from its functionality.'
+    },
+    width: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for width.',
+      aim: 'The aim of width is derived from its functionality.'
+    },
+    height: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for height.',
+      aim: 'The aim of height is derived from its functionality.'
+    },
+    size: {
+      example: '#  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',
+      infos: 'Usage information for size.',
+      aim: 'The aim of size is derived from its functionality.'
+    },
+    attach: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for attach.',
+      aim: 'The aim of attach is derived from its functionality.'
+    },
+    fasten: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for fasten.',
+      aim: 'The aim of fasten is derived from its functionality.'
+    },
+    unfasten: {
+      example: '#  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',
+      infos: 'Usage information for unfasten.',
+      aim: 'The aim of unfasten is derived from its functionality.'
+    },
+    detach: {
+      example: '#  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',
+      infos: 'Usage information for detach.',
+      aim: 'The aim of detach is derived from its functionality.'
+    },
+    apply: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for apply.',
+      aim: 'The aim of apply is derived from its functionality.'
+    },
+    affect: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for affect.',
+      aim: 'The aim of affect is derived from its functionality.'
+    },
+    collect: {
+      example: '#  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 :nil\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 = :nil\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',
+      infos: 'Usage information for collect.',
+      aim: 'The aim of collect is derived from its functionality.'
+    },
+    real: {
+      example: '# frozen_string_literal: true\n\n\n\naudio({id: :audio})\nwaveform_container=box({id: \'waveform-container\', width: 666, height: 270, color: :gray})\nwaveform_container.draw({width: 666, height: 270,  id: :waveform})\nwaveform_container.box({id: \'progress\', width: 3, height: \'100%\', color: :red})\n\ndraw({width: 666, height: 270, top: 280,color: :orange, id: :realtime})\n\n\nbox({id: :load_file, top: 666, left: 12, width: 300, height: 40, smooth: 9, color: { red: 0.3, green: 0.3, blue: 0.3 } })\nbox({id: :file_input, top: 777, left: 12, width: 300, height: 40, smooth: 9, color: { red: 0.3, green: 0.3, blue: 0.3 } })\n\n\n\nJS.eval <<~JS\nconst audio = document.getElementById(\'audio\');\n\t\tconst waveformCanvas = document.getElementById(\'waveform\');\n\t\tconst waveformCtx = waveformCanvas.getContext(\'2d\');\n\t\tconst realtimeCanvas = document.getElementById(\'realtime\');\n\t\tconst realtimeCtx = realtimeCanvas.getContext(\'2d\');\n\t\tconst progress = document.getElementById(\'progress\');\n\t\tconst loadFileButton = document.getElementById(\'load_file\');\n\t\tconst fileInput = document.getElementById(\'file_input\');\n\t\tlet isDragging = false;\n\n\t\tconst audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n\t\tconst analyser = audioCtx.createAnalyser();\n\t\tanalyser.fftSize = 2048;\n\n\t\tconst source = audioCtx.createMediaElementSource(audio);\n\t\tsource.connect(analyser);\n\t\tanalyser.connect(audioCtx.destination);\n\n\t\t// Charger le fichier audio par défaut\n\t\tloadDefaultAudio();\n\n\t\tfunction loadDefaultAudio() {\n\t\t\tfetch(\'medias/audios/riff.m4a\')\n\t\t\t\t.then(response => response.arrayBuffer())\n\t\t\t\t.then(data => audioCtx.decodeAudioData(data))\n\t\t\t\t.then(buffer => {\n\t\t\t\t\tdrawWaveform(buffer);\n\t\t\t\t\taudio.src = \'medias/audios/riff.m4a\';\n\t\t\t\t});\n\t\t}\n\n\t\t// Drag and Drop Events\n\t\tloadFileButton.addEventListener(\'dragover\', (event) => {\n\t\t\tevent.preventDefault();\n\t\t\tloadFileButton.classList.add(\'dragover\');\n\t\t});\n\n\t\tloadFileButton.addEventListener(\'dragleave\', () => {\n\t\t\tloadFileButton.classList.remove(\'dragover\');\n\t\t});\n\n\t\tloadFileButton.addEventListener(\'drop\', (event) => {\n\t\t\tevent.preventDefault();\n\t\t\tloadFileButton.classList.remove(\'dragover\');\n\t\t\tconst file = event.dataTransfer.files[0];\n\t\t\tif (file && file.type.startsWith(\'audio/\')) {\n\t\t\t\tloadAudioFile(file);\n\t\t\t}\n\t\t});\n\n\t\tloadFileButton.addEventListener(\'click\', () => {\n\t\t\tfileInput.click();\n\t\t});\n\n\t\tfileInput.addEventListener(\'change\', (event) => {\n\t\t\tconst file = event.target.files[0];\n\t\t\tif (file) {\n\t\t\t\tloadAudioFile(file);\n\t\t\t}\n\t\t});\n\n\t\tasync function loadAudioFile(file) {\n\t\t\ttry {\n\t\t\t\tconst arrayBuffer = await file.arrayBuffer();\n\t\t\t\tconst buffer = await audioCtx.decodeAudioData(arrayBuffer);\n\n\t\t\t\tconst objectURL = URL.createObjectURL(file);\n\t\t\t\taudio.src = objectURL;\n\n\t\t\t\tdrawWaveform(buffer);\n\t\t\t} catch (error) {\n\t\t\t\tconsole.error(\'Error loading file:\', error);\n\t\t\t}\n\t\t}\n\n\t\tfunction drawWaveform(buffer) {\n\t\t\tconst rawData = buffer.getChannelData(0);\n\t\t\tconst samples = waveformCanvas.width;\n\t\t\tconst blockSize = Math.floor(rawData.length / samples);\n\t\t\tconst filteredData = [];\n\n\t\t\tfor (let i = 0; i < samples; i++) {\n\t\t\t\tlet blockStart = blockSize * i;\n\t\t\t\tlet sum = 0;\n\t\t\t\tfor (let j = 0; j < blockSize; j++) {\n\t\t\t\t\tsum += Math.abs(rawData[blockStart + j]);\n\t\t\t\t}\n\t\t\t\tfilteredData.push(sum / blockSize);\n\t\t\t}\n\n\t\t\tconst width = waveformCanvas.width;\n\t\t\tconst height = waveformCanvas.height;\n\n\t\t\twaveformCtx.clearRect(0, 0, width, height);\n\t\t\twaveformCtx.fillStyle = \'black\';\n\n\t\t\tconst barWidth = width / samples;\n\t\t\tlet x = 0;\n\n\t\t\tconst maxVal = Math.max(...filteredData);\n\n\t\t\tfor (let i = 0; i < samples; i++) {\n\t\t\t\tconst v = (filteredData[i] / maxVal) * height;\n\t\t\t\tconst y = (height - v) / 2;\n\n\t\t\t\twaveformCtx.fillRect(x, y, barWidth, v);\n\n\t\t\t\tx += barWidth;\n\t\t\t}\n\t\t}\n\n\t\tfunction drawRealtimeWaveform() {\n\t\t\tconst width = realtimeCanvas.width;\n\t\t\tconst height = realtimeCanvas.height;\n\t\t\tconst bufferLength = analyser.frequencyBinCount;\n\t\t\tconst dataArray = new Uint8Array(bufferLength);\n\n\t\t\trealtimeCtx.clearRect(0, 0, width, height);\n\n\t\t\tanalyser.getByteTimeDomainData(dataArray);\n\n\t\t\trealtimeCtx.fillStyle = \'lightgray\';\n\t\t\trealtimeCtx.fillRect(0, 0, width, height);\n\n\t\t\trealtimeCtx.lineWidth = 1;\n\t\t\trealtimeCtx.strokeStyle = \'blue\';\n\t\t\trealtimeCtx.beginPath();\n\n\t\t\tconst sliceWidth = width / bufferLength;\n\t\t\tlet x = 0;\n\n\t\t\tfor (let i = 0; i < bufferLength; i++) {\n\t\t\t\tconst v = dataArray[i] / 128.0;\n\t\t\t\tconst y = v * height / 2;\n\n\t\t\t\tif (i === 0) {\n\t\t\t\t\trealtimeCtx.moveTo(x, y);\n\t\t\t\t} else {\n\t\t\t\t\trealtimeCtx.lineTo(x, y);\n\t\t\t\t}\n\n\t\t\t\tx += sliceWidth;\n\t\t\t}\n\n\t\t\trealtimeCtx.lineTo(realtimeCanvas.width, realtimeCanvas.height / 2);\n\t\t\trealtimeCtx.stroke();\n\n\t\t\trequestAnimationFrame(drawRealtimeWaveform);\n\t\t}\n\n\t\tdrawRealtimeWaveform();\n\n\t\taudio.addEventListener(\'timeupdate\', () => {\n\t\t\tconst progressPosition = (audio.currentTime / audio.duration) * waveformCanvas.clientWidth;\n\t\t\tprogress.style.left = `${progressPosition}px`;\n\t\t});\n\n\t\taudio.addEventListener(\'play\', () => {\n\t\t\tif (audioCtx.state === \'suspended\') {\n\t\t\t\taudioCtx.resume();\n\t\t\t}\n\t\t});\n\n\t\twaveformCanvas.addEventListener(\'mousedown\', (event) => {\n\t\t\taudio.pause();\n\t\t\tisDragging = true;\n\t\t\thandleScrub(event);\n\t\t});\n\n\t\tdocument.addEventListener(\'mouseup\', (event) => {\n\t\t\taudio.play();\n\t\t\tif (isDragging) {\n\t\t\t\tisDragging = false;\n\t\t\t\tconsole.log("Mouseup event detected. Dragging stopped.");\n\t\t\t}\n\t\t});\n\n\t\twaveformCanvas.addEventListener(\'mousemove\', (event) => {\n\t\t\tif (isDragging) {\n\t\t\t\thandleScrub(event);\n\t\t\t}\n\t\t});\n\n\t\tfunction handleScrub(event) {\n\t\t\tconst rect = waveformCanvas.getBoundingClientRect();\n\t\t\tconst scrubX = event.clientX - rect.left;\n\t\t\tconsole.log(`Mouse X: ${scrubX}, Canvas Width: ${waveformCanvas.clientWidth}`);\n\t\t\tconst newTime = (scrubX / waveformCanvas.clientWidth) * audio.duration;\n\t\t\taudio.currentTime = newTime;\n\t\t}\nJS',
+      infos: 'Usage information for real.',
+      aim: 'The aim of real is derived from its functionality.'
+    },
+    type: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for type.',
+      aim: 'The aim of type is derived from its functionality.'
+    },
+    id: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for id.',
+      aim: 'The aim of id is derived from its functionality.'
+    },
+    name: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for name.',
+      aim: 'The aim of name is derived from its functionality.'
+    },
+    active: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for active.',
+      aim: 'The aim of active is derived from its functionality.'
+    },
+    markup: {
+      example: '#  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: nil; } \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',
+      infos: 'Usage information for markup.',
+      aim: 'The aim of markup is derived from its functionality.'
+    },
+    bundle: {
+      example: '#  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 :nil\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 = :nil\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',
+      infos: 'Usage information for bundle.',
+      aim: 'The aim of bundle is derived from its functionality.'
+    },
+    data: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for data.',
+      aim: 'The aim of data is derived from its functionality.'
+    },
+    category: {
+      example: '# 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',
+      infos: 'Usage information for category.',
+      aim: 'The aim of category is derived from its functionality.'
+    },
+    selection: {
+      example: '#  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',
+      infos: 'Usage information for selection.',
+      aim: 'The aim of selection is derived from its functionality.'
+    },
+    selected: {
+      example: '#  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',
+      infos: 'Usage information for selected.',
+      aim: 'The aim of selected is derived from its functionality.'
+    },
+    format: {
+      example: '# 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',
+      infos: 'Usage information for format.',
+      aim: 'The aim of format is derived from its functionality.'
+    },
+    alien: {
+      example: nil,
+      infos: nil,
+      aim: nil
+    },
+    email: {
+      example: '# # frozen_string_literal: true\nb=box\n\nb.touch(:down) do\n   A.message({ action: :authentication, data: { table: :user, particles: { email: \'tre@tre.tre\', password: \'poipoi\' } } }) do |response|\n    alert "=> \#{response}"\n  end\nend\n\n#\n#\n# # # 1 login attempt\n\nwait 1 do\n  A.message({ action: :authentication, data: { table: :user, particles: { email: \'tre@tre.tre\', password:  \'poipoi\' } } }) do |response|\n    alert "=> \#{response}"\n  end\n  wait 1 do\n    A.message({ action: :authentication, data: { table: :user, particles: { email: \'tre@tre.tre\', password:  \'poipoi\' } } }) do |response|\n      alert "=> \#{response}"\n    end\n  end\nend\n#\n# 2 account creation attempt\n# wait 1 do\n#   A.message({ action: :account_creation, data: { email: \'tre@tre.tre\', password: \'poipoi\', user_id: \'Nico\' }  }) do |response|\n#     puts response\n#   end\n#\n# end\n\n# string=hello\n#\n# puts JS.global.sha256(string.to_s)\n',
+      infos: 'Usage information for email.',
+      aim: 'The aim of email is derived from its functionality.'
+    },
+    cells: {
+      example: "# #  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",
+      infos: 'Usage information for cells.',
+      aim: 'The aim of cells is derived from its functionality.'
+    },
+    component: {
+      example: '#  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',
+      infos: 'Usage information for component.',
+      aim: 'The aim of component is derived from its functionality.'
+    },
+    edit: {
+      example: '#  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',
+      infos: 'Usage information for edit.',
+      aim: 'The aim of edit is derived from its functionality.'
+    },
+    style: {
+      example: '#  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: nil; } \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',
+      infos: 'Usage information for style.',
+      aim: 'The aim of style is derived from its functionality.'
+    },
+    hide: {
+      example: nil,
+      infos: nil,
+      aim: nil
+    },
+    remove: {
+      example: '# 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',
+      infos: 'Usage information for remove.',
+      aim: 'The aim of remove is derived from its functionality.'
+    },
+    classes: {
+      example: nil,
+      infos: nil,
+      aim: nil
+    },
+    remove_classes: {
+      example: nil,
+      infos: nil,
+      aim: nil
+    },
+    definition: {
+      example: '#  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 })',
+      infos: 'Usage information for definition.',
+      aim: 'The aim of definition is derived from its functionality.'
+    },
+    gradient: {
+      example: '# 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',
+      infos: 'Usage information for gradient.',
+      aim: 'The aim of gradient is derived from its functionality.'
+    },
+    thickness: {
+      example: '# 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',
+      infos: 'Usage information for thickness.',
+      aim: 'The aim of thickness is derived from its functionality.'
+    },
+    pattern: {
+      example: '# 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',
+      infos: 'Usage information for pattern.',
+      aim: 'The aim of pattern is derived from its functionality.'
+    },
+    fill: {
+      example: '# frozen_string_literal: true\n\n\n\naudio({id: :audio})\nwaveform_container=box({id: \'waveform-container\', width: 666, height: 270, color: :gray})\nwaveform_container.draw({width: 666, height: 270,  id: :waveform})\nwaveform_container.box({id: \'progress\', width: 3, height: \'100%\', color: :red})\n\ndraw({width: 666, height: 270, top: 280,color: :orange, id: :realtime})\n\n\nbox({id: :load_file, top: 666, left: 12, width: 300, height: 40, smooth: 9, color: { red: 0.3, green: 0.3, blue: 0.3 } })\nbox({id: :file_input, top: 777, left: 12, width: 300, height: 40, smooth: 9, color: { red: 0.3, green: 0.3, blue: 0.3 } })\n\n\n\nJS.eval <<~JS\nconst audio = document.getElementById(\'audio\');\n\t\tconst waveformCanvas = document.getElementById(\'waveform\');\n\t\tconst waveformCtx = waveformCanvas.getContext(\'2d\');\n\t\tconst realtimeCanvas = document.getElementById(\'realtime\');\n\t\tconst realtimeCtx = realtimeCanvas.getContext(\'2d\');\n\t\tconst progress = document.getElementById(\'progress\');\n\t\tconst loadFileButton = document.getElementById(\'load_file\');\n\t\tconst fileInput = document.getElementById(\'file_input\');\n\t\tlet isDragging = false;\n\n\t\tconst audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n\t\tconst analyser = audioCtx.createAnalyser();\n\t\tanalyser.fftSize = 2048;\n\n\t\tconst source = audioCtx.createMediaElementSource(audio);\n\t\tsource.connect(analyser);\n\t\tanalyser.connect(audioCtx.destination);\n\n\t\t// Charger le fichier audio par défaut\n\t\tloadDefaultAudio();\n\n\t\tfunction loadDefaultAudio() {\n\t\t\tfetch(\'medias/audios/riff.m4a\')\n\t\t\t\t.then(response => response.arrayBuffer())\n\t\t\t\t.then(data => audioCtx.decodeAudioData(data))\n\t\t\t\t.then(buffer => {\n\t\t\t\t\tdrawWaveform(buffer);\n\t\t\t\t\taudio.src = \'medias/audios/riff.m4a\';\n\t\t\t\t});\n\t\t}\n\n\t\t// Drag and Drop Events\n\t\tloadFileButton.addEventListener(\'dragover\', (event) => {\n\t\t\tevent.preventDefault();\n\t\t\tloadFileButton.classList.add(\'dragover\');\n\t\t});\n\n\t\tloadFileButton.addEventListener(\'dragleave\', () => {\n\t\t\tloadFileButton.classList.remove(\'dragover\');\n\t\t});\n\n\t\tloadFileButton.addEventListener(\'drop\', (event) => {\n\t\t\tevent.preventDefault();\n\t\t\tloadFileButton.classList.remove(\'dragover\');\n\t\t\tconst file = event.dataTransfer.files[0];\n\t\t\tif (file && file.type.startsWith(\'audio/\')) {\n\t\t\t\tloadAudioFile(file);\n\t\t\t}\n\t\t});\n\n\t\tloadFileButton.addEventListener(\'click\', () => {\n\t\t\tfileInput.click();\n\t\t});\n\n\t\tfileInput.addEventListener(\'change\', (event) => {\n\t\t\tconst file = event.target.files[0];\n\t\t\tif (file) {\n\t\t\t\tloadAudioFile(file);\n\t\t\t}\n\t\t});\n\n\t\tasync function loadAudioFile(file) {\n\t\t\ttry {\n\t\t\t\tconst arrayBuffer = await file.arrayBuffer();\n\t\t\t\tconst buffer = await audioCtx.decodeAudioData(arrayBuffer);\n\n\t\t\t\tconst objectURL = URL.createObjectURL(file);\n\t\t\t\taudio.src = objectURL;\n\n\t\t\t\tdrawWaveform(buffer);\n\t\t\t} catch (error) {\n\t\t\t\tconsole.error(\'Error loading file:\', error);\n\t\t\t}\n\t\t}\n\n\t\tfunction drawWaveform(buffer) {\n\t\t\tconst rawData = buffer.getChannelData(0);\n\t\t\tconst samples = waveformCanvas.width;\n\t\t\tconst blockSize = Math.floor(rawData.length / samples);\n\t\t\tconst filteredData = [];\n\n\t\t\tfor (let i = 0; i < samples; i++) {\n\t\t\t\tlet blockStart = blockSize * i;\n\t\t\t\tlet sum = 0;\n\t\t\t\tfor (let j = 0; j < blockSize; j++) {\n\t\t\t\t\tsum += Math.abs(rawData[blockStart + j]);\n\t\t\t\t}\n\t\t\t\tfilteredData.push(sum / blockSize);\n\t\t\t}\n\n\t\t\tconst width = waveformCanvas.width;\n\t\t\tconst height = waveformCanvas.height;\n\n\t\t\twaveformCtx.clearRect(0, 0, width, height);\n\t\t\twaveformCtx.fillStyle = \'black\';\n\n\t\t\tconst barWidth = width / samples;\n\t\t\tlet x = 0;\n\n\t\t\tconst maxVal = Math.max(...filteredData);\n\n\t\t\tfor (let i = 0; i < samples; i++) {\n\t\t\t\tconst v = (filteredData[i] / maxVal) * height;\n\t\t\t\tconst y = (height - v) / 2;\n\n\t\t\t\twaveformCtx.fillRect(x, y, barWidth, v);\n\n\t\t\t\tx += barWidth;\n\t\t\t}\n\t\t}\n\n\t\tfunction drawRealtimeWaveform() {\n\t\t\tconst width = realtimeCanvas.width;\n\t\t\tconst height = realtimeCanvas.height;\n\t\t\tconst bufferLength = analyser.frequencyBinCount;\n\t\t\tconst dataArray = new Uint8Array(bufferLength);\n\n\t\t\trealtimeCtx.clearRect(0, 0, width, height);\n\n\t\t\tanalyser.getByteTimeDomainData(dataArray);\n\n\t\t\trealtimeCtx.fillStyle = \'lightgray\';\n\t\t\trealtimeCtx.fillRect(0, 0, width, height);\n\n\t\t\trealtimeCtx.lineWidth = 1;\n\t\t\trealtimeCtx.strokeStyle = \'blue\';\n\t\t\trealtimeCtx.beginPath();\n\n\t\t\tconst sliceWidth = width / bufferLength;\n\t\t\tlet x = 0;\n\n\t\t\tfor (let i = 0; i < bufferLength; i++) {\n\t\t\t\tconst v = dataArray[i] / 128.0;\n\t\t\t\tconst y = v * height / 2;\n\n\t\t\t\tif (i === 0) {\n\t\t\t\t\trealtimeCtx.moveTo(x, y);\n\t\t\t\t} else {\n\t\t\t\t\trealtimeCtx.lineTo(x, y);\n\t\t\t\t}\n\n\t\t\t\tx += sliceWidth;\n\t\t\t}\n\n\t\t\trealtimeCtx.lineTo(realtimeCanvas.width, realtimeCanvas.height / 2);\n\t\t\trealtimeCtx.stroke();\n\n\t\t\trequestAnimationFrame(drawRealtimeWaveform);\n\t\t}\n\n\t\tdrawRealtimeWaveform();\n\n\t\taudio.addEventListener(\'timeupdate\', () => {\n\t\t\tconst progressPosition = (audio.currentTime / audio.duration) * waveformCanvas.clientWidth;\n\t\t\tprogress.style.left = `${progressPosition}px`;\n\t\t});\n\n\t\taudio.addEventListener(\'play\', () => {\n\t\t\tif (audioCtx.state === \'suspended\') {\n\t\t\t\taudioCtx.resume();\n\t\t\t}\n\t\t});\n\n\t\twaveformCanvas.addEventListener(\'mousedown\', (event) => {\n\t\t\taudio.pause();\n\t\t\tisDragging = true;\n\t\t\thandleScrub(event);\n\t\t});\n\n\t\tdocument.addEventListener(\'mouseup\', (event) => {\n\t\t\taudio.play();\n\t\t\tif (isDragging) {\n\t\t\t\tisDragging = false;\n\t\t\t\tconsole.log("Mouseup event detected. Dragging stopped.");\n\t\t\t}\n\t\t});\n\n\t\twaveformCanvas.addEventListener(\'mousemove\', (event) => {\n\t\t\tif (isDragging) {\n\t\t\t\thandleScrub(event);\n\t\t\t}\n\t\t});\n\n\t\tfunction handleScrub(event) {\n\t\t\tconst rect = waveformCanvas.getBoundingClientRect();\n\t\t\tconst scrubX = event.clientX - rect.left;\n\t\t\tconsole.log(`Mouse X: ${scrubX}, Canvas Width: ${waveformCanvas.clientWidth}`);\n\t\t\tconst newTime = (scrubX / waveformCanvas.clientWidth) * audio.duration;\n\t\t\taudio.currentTime = newTime;\n\t\t}\nJS',
+      infos: 'Usage information for fill.',
+      aim: 'The aim of fill is derived from its functionality.'
+    },
+    opacity: {
+      example: "# 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",
+      infos: 'Usage information for opacity.',
+      aim: 'The aim of opacity is derived from its functionality.'
+    },
+    exchange: {
+      example: '# 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',
+      infos: 'Usage information for exchange.',
+      aim: 'The aim of exchange is derived from its functionality.'
+    },
+    red: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for red.',
+      aim: 'The aim of red is derived from its functionality.'
+    },
+    green: {
+      example: '#  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',
+      infos: 'Usage information for green.',
+      aim: 'The aim of green is derived from its functionality.'
+    },
+    blue: {
+      example: '# 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',
+      infos: 'Usage information for blue.',
+      aim: 'The aim of blue is derived from its functionality.'
+    },
+    alpha: {
+      example: '#  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',
+      infos: 'Usage information for alpha.',
+      aim: 'The aim of alpha is derived from its functionality.'
+    },
+    diffusion: {
+      example: '# 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',
+      infos: 'Usage information for diffusion.',
+      aim: 'The aim of diffusion is derived from its functionality.'
+    },
+    clean: {
+      example: '# 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',
+      infos: 'Usage information for clean.',
+      aim: 'The aim of clean is derived from its functionality.'
+    },
+    insert: {
+      example: '# 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',
+      infos: 'Usage information for insert.',
+      aim: 'The aim of insert is derived from its functionality.'
+    },
+    sort: {
+      example: '#  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 :nil\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 = :nil\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',
+      infos: 'Usage information for sort.',
+      aim: 'The aim of sort is derived from its functionality.'
+    },
+    inside: {
+      example: '# 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',
+      infos: 'Usage information for inside.',
+      aim: 'The aim of inside is derived from its functionality.'
+    },
+    margin: {
+      example: '#  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: nil; } \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',
+      infos: 'Usage information for margin.',
+      aim: 'The aim of margin is derived from its functionality.'
+    },
+    value: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for value.',
+      aim: 'The aim of value is derived from its functionality.'
+    },
+    behavior: {
+      example: "# 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",
+      infos: 'Usage information for behavior.',
+      aim: 'The aim of behavior is derived from its functionality.'
+    },
+    orientation: {
+      example: '# 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',
+      infos: 'Usage information for orientation.',
+      aim: 'The aim of orientation is derived from its functionality.'
+    },
+    align: {
+      example: '#  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: nil; } \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',
+      infos: 'Usage information for align.',
+      aim: 'The aim of align is derived from its functionality.'
+    },
+    actor: {
+      example: '# 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}"',
+      infos: 'Usage information for actor.',
+      aim: 'The aim of actor is derived from its functionality.'
+    },
+    role: {
+      example: '# 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}"',
+      infos: 'Usage information for role.',
+      aim: 'The aim of role is derived from its functionality.'
+    },
+    password: {
+      example: '# # frozen_string_literal: true\nb=box\n\nb.touch(:down) do\n   A.message({ action: :authentication, data: { table: :user, particles: { email: \'tre@tre.tre\', password: \'poipoi\' } } }) do |response|\n    alert "=> \#{response}"\n  end\nend\n\n#\n#\n# # # 1 login attempt\n\nwait 1 do\n  A.message({ action: :authentication, data: { table: :user, particles: { email: \'tre@tre.tre\', password:  \'poipoi\' } } }) do |response|\n    alert "=> \#{response}"\n  end\n  wait 1 do\n    A.message({ action: :authentication, data: { table: :user, particles: { email: \'tre@tre.tre\', password:  \'poipoi\' } } }) do |response|\n      alert "=> \#{response}"\n    end\n  end\nend\n#\n# 2 account creation attempt\n# wait 1 do\n#   A.message({ action: :account_creation, data: { email: \'tre@tre.tre\', password: \'poipoi\', user_id: \'Nico\' }  }) do |response|\n#     puts response\n#   end\n#\n# end\n\n# string=hello\n#\n# puts JS.global.sha256(string.to_s)\n',
+      infos: 'Usage information for password.',
+      aim: 'The aim of password is derived from its functionality.'
+    },
+    left: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for left.',
+      aim: 'The aim of left is derived from its functionality.'
+    },
+    right: {
+      example: '#  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: nil; } \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',
+      infos: 'Usage information for right.',
+      aim: 'The aim of right is derived from its functionality.'
+    },
+    top: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for top.',
+      aim: 'The aim of top is derived from its functionality.'
+    },
+    bottom: {
+      example: '#  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: nil; } \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',
+      infos: 'Usage information for bottom.',
+      aim: 'The aim of bottom is derived from its functionality.'
+    },
+    rotate: {
+      example: '#  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: nil; } \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',
+      infos: 'Usage information for rotate.',
+      aim: 'The aim of rotate is derived from its functionality.'
+    },
+    direction: {
+      example: '# frozen_string_literal: true\n\n\n\na = application({\n                  id: :arp,\n                  margin: 3,\n                })\n\npage1_code = lambda do\n  b = box({ id: :ty, left: 90, top: 90, color: :black })\n  b.touch(true) do\n    b.color(:red)\n  end\nend\n\npage1 = {\n  run: page1_code,\n  menu: false,\n  id: :page1,\n  color: { red: 0.5, green: 0.5, blue: 0.5 },\n  name: :accueil,\n  # footer: { color: :green, height: 22 },\n  header: { color: { red: 0.3, green: 0.3, blue: 0.3 }, height: 90, shadow: { blur: 12, left: 0, top: 0 } },\n\n}\n\na.page(page1)\nc = a.show(:page1)\nc.color(:orange)\nheader = grab(:arp_content_header)\nheader.color(:orange)\n# header.height(66)\n# header.subs({ "contact" => { "width" => "33%" }, "project" => { "width" => "33%" }, "calendar" => { "width" => "33%" } })\n\nbloc_to_add = { height: 33, color: :cyan }\nbloc_to_add2 = { height: 99, color: :blue }\nbloc_to_add3 = { height: 133, color: :red }\nbloc_to_add4 = { height: 33, color: :gray }\n###########@\ngrab(:page1).blocks({ direction: :vertical, color: :blue, height: 55, spacing: 6,\n                      blocks: { block1: bloc_to_add, block2: bloc_to_add2, block3: bloc_to_add3 } })\n\ngrab(:block1).blocks({ direction: :horizontal, color: :orange, spacing: 66, width: 120, top: 0,\n                       blocks: { block12: bloc_to_add4, block22: bloc_to_add2, block32: bloc_to_add3 }, distribute: true })\n',
+      infos: 'Usage information for direction.',
+      aim: 'The aim of direction is derived from its functionality.'
+    },
+    depth: {
+      example: '#  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 :nil\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 = :nil\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',
+      infos: 'Usage information for depth.',
+      aim: 'The aim of depth is derived from its functionality.'
+    },
+    position: {
+      example: '# 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',
+      infos: 'Usage information for position.',
+      aim: 'The aim of position is derived from its functionality.'
+    },
+    organise: {
+      example: nil,
+      infos: nil,
+      aim: nil
+    },
+    spacing: {
+      example: '# frozen_string_literal: true\n\n\n\na = application({\n                  id: :arp,\n                  margin: 3,\n                })\n\npage1_code = lambda do\n  b = box({ id: :ty, left: 90, top: 90, color: :black })\n  b.touch(true) do\n    b.color(:red)\n  end\nend\n\npage1 = {\n  run: page1_code,\n  menu: false,\n  id: :page1,\n  color: { red: 0.5, green: 0.5, blue: 0.5 },\n  name: :accueil,\n  # footer: { color: :green, height: 22 },\n  header: { color: { red: 0.3, green: 0.3, blue: 0.3 }, height: 90, shadow: { blur: 12, left: 0, top: 0 } },\n\n}\n\na.page(page1)\nc = a.show(:page1)\nc.color(:orange)\nheader = grab(:arp_content_header)\nheader.color(:orange)\n# header.height(66)\n# header.subs({ "contact" => { "width" => "33%" }, "project" => { "width" => "33%" }, "calendar" => { "width" => "33%" } })\n\nbloc_to_add = { height: 33, color: :cyan }\nbloc_to_add2 = { height: 99, color: :blue }\nbloc_to_add3 = { height: 133, color: :red }\nbloc_to_add4 = { height: 33, color: :gray }\n###########@\ngrab(:page1).blocks({ direction: :vertical, color: :blue, height: 55, spacing: 6,\n                      blocks: { block1: bloc_to_add, block2: bloc_to_add2, block3: bloc_to_add3 } })\n\ngrab(:block1).blocks({ direction: :horizontal, color: :orange, spacing: 66, width: 120, top: 0,\n                       blocks: { block12: bloc_to_add4, block22: bloc_to_add2, block32: bloc_to_add3 }, distribute: true })\n',
+      infos: 'Usage information for spacing.',
+      aim: 'The aim of spacing is derived from its functionality.'
+    },
+    display: {
+      example: '#  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: nil; } \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',
+      infos: 'Usage information for display.',
+      aim: 'The aim of display is derived from its functionality.'
+    },
+    layout: {
+      example: '# frozen_string_literal: true\n# v1.0\nb=box\nmargin = 12\nb2=box({top: below(b, margin)})\nb3=box({top: below(b2, margin)})\nb4=box({top: below(b3, margin)})\nbox({top: below(b4, margin)})\ni=0\n\n# Global Purpose:\n# The code demonstrates Atome\'s capabilities to:\n# - Create complex dynamic structures: vertical stacking and horizontal alignment with repeated elements.\n# - Handle mixed units (fixed and relative) for positioning, showcasing flexibility in designing adaptive layouts.\n# - Simplify visual prototyping by using simple methods like \'below\' and \'after\' for consistent placement without external calculations.\n# If integrated into a demonstration or project, this code could explain these concepts to developers or test Atome\'s engine flexibility.\n\ndef infos\n  "The code demonstrates Atome\'s capabilities to:\\n" \\\n    "- Create complex dynamic structures: vertical stacking and horizontal alignment with repeated elements.\\n" \\\n    "- Handle mixed units (fixed and relative) for positioning, showcasing flexibility in designing adaptive layouts.\\n" \\\n    "- Simplify visual prototyping by using simple methods like \'below\' and \'after\' for consistent placement without external calculations.\\n" \\\n    "If integrated into a demonstration or project, this code could explain these concepts to developers or test Atome\'s engine flexibility."\nend\n\nb = circle(left: 333, top: 333)\nmargin = "2%"\n# margin = 120\ni = 0\n\nwhile i < 10 do\n  #below first params is the object after which we place the objet, the second the margin\n  # here in percent and the third is the reference object used for the percent\n  # b = circle({top: below(b, margin, grab(:view)), left: b.left})\n  # b = circle({top: :auto,bottom: above(b, margin, grab(:view)), left: b.left})\n  b = circle({top: b.top,left: after(b, margin, grab(:view))})\n  # b = circle({left: :auto,right: before(b, margin, grab(:view))})\n  i += 1\nend\n',
+      infos: 'Usage information for layout.',
+      aim: 'The aim of layout is derived from its functionality.'
+    },
+    center: {
+      example: '#  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: nil; } \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',
+      infos: 'Usage information for center.',
+      aim: 'The aim of center is derived from its functionality.'
+    },
+    increment: {
+      example: '# 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',
+      infos: 'Usage information for increment.',
+      aim: 'The aim of increment is derived from its functionality.'
+    },
+    longitude: {
+      example: '#  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',
+      infos: 'Usage information for longitude.',
+      aim: 'The aim of longitude is derived from its functionality.'
+    },
+    latitude: {
+      example: '#  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',
+      infos: 'Usage information for latitude.',
+      aim: 'The aim of latitude is derived from its functionality.'
+    },
+    location: {
+      example: "# 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    \t window.\#{cal_name} = new tui.Calendar('#\#{cal_id}', {\n    \t\tdefaultView: 'month',\n    \t\tusageStatistics: false,\n    \t\tmonth: {\n    \t\t\tstartDayOfWeek: 0,\n    \t\t},\n    \t\tweek: {\n    \t\t\tshowTimezoneCollapseButton: true,\n    \t\t\ttimezones: [{ timezoneOffset: 0, displayLabel: 'UTC', tooltip: 'UTC' }],\n    \t\t},\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      \t function changeCalendarView(view) {\n      \tconst validViews = ['day', 'week', 'month'];\n      \tif (!validViews.includes(view)) {\n      \t\tconsole.error(`Vue non valide: ${view}. Les vues valides sont: ${validViews.join(', ')}`);\n      \t\treturn;\n      \t}\n      \twindow.\#{cal_name}.changeView(view);\n      }\n      \tchangeCalendarView('\#{view_mode}');\n\n      \t// 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      \t\t{\n      \t\t\tid: '\#{new_event[:id]}',\n      \t\t\tcalendarId: '\#{new_event[:calendarId]}',\n      \t\t\ttitle: '\#{new_event[:title]}',\n      \t\t\tcategory: '\#{new_event[:category]}',\n      \t\t\tdueDateClass: '\#{new_event[:dueDateClass]}',\n      \t\t\tstart: '\#{new_event[:start]}',\n      \t\t\tend: '\#{new_event[:end]}',\n      \t\t},\n      \t]);\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(\t{\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",
+      infos: 'Usage information for location.',
+      aim: 'The aim of location is derived from its functionality.'
+    },
+    zoom: {
+      example: '#  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',
+      infos: 'Usage information for zoom.',
+      aim: 'The aim of zoom is derived from its functionality.'
+    },
+    pan: {
+      example: '#  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',
+      infos: 'Usage information for pan.',
+      aim: 'The aim of pan is derived from its functionality.'
+    },
+    markers: {
+      example: "# frozen_string_literal: true\n\nnew({molecule: :chronology}) do |params|\n  chr=box({width: '100%', height: 333, color: :white, smooth: 9})\n  chr_id=chr.id\n  JS.eval <<~JS\n // Create a dataset with items\n        var items = new vis.DataSet({\n            type: { start: 'ISODate', end: 'ISODate' }\n        });\n\n        // Add items to the DataSet\n        items.add([\n            {id: 1, content: 'item 1<br>start', start: '2014-01-23'},\n            {id: 2, content: 'item 2', start: '2014-01-18'},\n            {id: 3, content: 'item 3', start: '2014-01-21', end: '2014-01-24'},\n            {id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'},\n            {id: 5, content: 'item 5', start: '2014-01-28', type: 'point'},\n            {id: 'kjhdkfjghdkjfgh', content: 'item 6', start: '2014-01-26'}\n        ]);\n\n        // Log changes to the console\n        items.on('*', function (event, properties) {\n            console.log(event, properties.items);\n        });\n\n    var container = document.getElementById('\#{chr_id}');\n\n\n    var options = {\n    start: '2014-01-10',\n    end: '2014-02-10',\n    height: '300px',\n\n    // Allow selecting multiple items using ctrl+click, shift+click, or hold.\n    multiselect: true,\n\n    // Allow manipulation of items\n    editable: true,\n\n    showCurrentTime: true,\n\n    // Disable snapping to grid/markers\n    snap: null\n};\n\n        var timeline = new vis.Timeline(container, items, options);\n\n        setTimeout(() => {\n            items.update({id: 1, content: 'Updated Event 1'});\n            console.log('Event 1 content updated!');\n        }, 2000);\n\n        // Modify the content and add an `end` date when clicking on an event\n        timeline.on('click', function (properties) {\n            const itemId = properties.item;\n\n            if (itemId) {\n                const item = items.get(itemId);\n\n                // Check if the item has an `end` date, if not, add one\n                if (!item.end) {\n                    // Set the `end` date to 2 days after the `start` date\n                    let endDate = new Date(item.start);\n                    endDate.setDate(endDate.getDate() + 2);\n\n                    items.update({id: itemId, end: endDate.toISOString()});\n                    console.log(`Event ${itemId} extended! New end date: ${endDate}`);\n                }\n\n                // Update the content of the item\n                items.update({id: itemId, content: 'Updated Content'});\n                console.log(`Event ${itemId} content updated!`);\n            } else {\n                console.log('Click outside of any event');\n            }\n        });\n    JS\n\nend\n\n\n\n\nchronology({})\n",
+      infos: 'Usage information for markers.',
+      aim: 'The aim of markers is derived from its functionality.'
+    },
+    renderers: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for renderers.',
+      aim: 'The aim of renderers is derived from its functionality.'
+    },
+    code: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for code.',
+      aim: 'The aim of code is derived from its functionality.'
+    },
+    run: {
+      example: '# 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 == :nil\n    back.display(:block)\n  else\n    back.display(:nil)\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"',
+      infos: 'Usage information for run.',
+      aim: 'The aim of run is derived from its functionality.'
+    },
+    target: {
+      example: '#  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: nil; } \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',
+      infos: 'Usage information for target.',
+      aim: 'The aim of target is derived from its functionality.'
+    },
+    delete: {
+      example: '#  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 :nil\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 = :nil\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',
+      infos: 'Usage information for delete.',
+      aim: 'The aim of delete is derived from its functionality.'
+    },
+    clear: {
+      example: '# 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',
+      infos: 'Usage information for clear.',
+      aim: 'The aim of clear is derived from its functionality.'
+    },
+    path: {
+      example: "#  frozen_string_literal: true\n\nimage(:red_planet)\nimage({path: 'medias/images/logos/atome.svg', width: 33})\n",
+      infos: 'Usage information for path.',
+      aim: 'The aim of path is derived from its functionality.'
+    },
+    schedule: {
+      example: '# 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',
+      infos: 'Usage information for schedule.',
+      aim: 'The aim of schedule is derived from its functionality.'
+    },
+    cursor: {
+      example: '#  frozen_string_literal: true\n\nb = text({ id: :toto, left: 0, data: :inspect, depth: 12 })\n\nc = text({ id: :the_c, left: 190, data: \'stop inspect\', depth: 12 })\nbox({ left: 120, top: 120, width: 333, height: 333, id: :helper })\n\nclass Atome\n\n  def follow_cursor(div_id, item_to_be_monitored, &proc)\n    @inspector_active = true\n    last_collided_element = nil\n\n    JS.global[:document].addEventListener(\'mousemove\', @mousemove_listener = proc do |native_event|\n      next unless @inspector_active\n      event = Native(native_event)\n      element = JS.global[:document].getElementById(div_id)\n      width = element[:offsetWidth].to_i\n      height = element[:offsetHeight].to_i\n\n      left = event[:clientX].to_i - (width / 2)\n      top = event[:clientY].to_i - (height / 2)\n\n      element[:style][:left] = "\#{left}px"\n      element[:style][:top] = "\#{top}px"\n\n      last_collided_element = check_collision(element, item_to_be_monitored, last_collided_element,&proc)\n    end)\n\n    JS.global[:document].addEventListener(\'touchmove\', @touchmove_listener = proc do |native_event|\n      next unless @inspector_active\n      event = Native(native_event)\n\n      touch = event[:touches][0]\n      element = JS.global[:document].getElementById(div_id)\n      width = element[:offsetWidth].to_i\n      height = element[:offsetHeight].to_i\n\n      left = touch[:clientX].to_i - (width / 2)\n      top = touch[:clientY].to_i - (height / 2)\n\n      element[:style][:left] = "\#{left}px"\n      element[:style][:top] = "\#{top}px"\n\n      last_collided_element = check_collision(element, item_to_be_monitored, last_collided_element)\n    end)\n  end\n\n  def unbind_inspector(div_id)\n    @inspector_active = false\n    JS.global[:console].log("Inspector disabled for element: \#{div_id}")\n  end\n\n  # private\n\n  def check_collision(follow_div, item_to_be_monitored, last_collided_element,&proc)\n    ids_to_check = item_to_be_monitored\n\n    ids_to_check.each do |id|\n      element = JS.global[:document].getElementById(id.to_s)\n\n      if element && is_colliding(follow_div, element)\n        if last_collided_element != element[:id]\n          proc.call(element[:id].to_s.to_sym) unless element[:id] == follow_div[:id]\n          return element[:id] # Return the current collided element\n        else\n          return last_collided_element # Return the same element if it\'s still the same\n        end\n      end\n    end\n\n    return nil # Return nil if no collision is detected\n  end\n\n  def is_colliding(div1, div2)\n    rect1 = div1.getBoundingClientRect()\n    rect2 = div2.getBoundingClientRect()\n\n    rect1_right = rect1[:right].to_f\n    rect1_left = rect1[:left].to_f\n    rect1_bottom = rect1[:bottom].to_f\n    rect1_top = rect1[:top].to_f\n\n    rect2_right = rect2[:right].to_f\n    rect2_left = rect2[:left].to_f\n    rect2_bottom = rect2[:bottom].to_f\n    rect2_top = rect2[:top].to_f\n\n    !(rect1_right < rect2_left ||\n      rect1_left > rect2_right ||\n      rect1_bottom < rect2_top ||\n      rect1_top > rect2_bottom)\n  end\n\n  def inspection(active)\n    if active\n      circle({ width: 15, height: 15, left: 99,\n               color: {red: 0.7, green: 0.7,blue: 0.7,alpha: 0.3},\n               id: :inspector_satellite,\n               shadow: {alpha: 0.7, blur: 9}})\n      follow_cursor(\'inspector_satellite\', fasten) do |id|\n        puts "collision detected with element: \#{id}"\n        current_obj=grab(id)\n        puts current_obj.infos\n      end\n    else\n      unbind_inspector(:inspector_satellite)\n      grab(:inspector_satellite).delete(true)\n    end\n  end\nend\n\n########\nevents_list = []\nUniverse.particle_list.each do |particle, content|\n  if content[:category] == :event\n    events_list << particle\n  end\nend\n\nb.touch(true) do\n  grab(:view).inspection(true)\nend\n\nc.touch(true) do\n  grab(:view).inspection(false)\nend\n\n##############################\n',
+      infos: 'Usage information for cursor.',
+      aim: 'The aim of cursor is derived from its functionality.'
+    },
+    preset: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for preset.',
+      aim: 'The aim of preset is derived from its functionality.'
+    },
+    relations: {
+      example: '# frozen_string_literal: true\n\n#  here is how to setup a hierarchy within atome using a more simple way than fasten and attach .simply adding atome inside another atome. here is a example to do to so : b = box({ id: :the_box })\nb=box\n# the line below will create a circle inside the box b\nc = b.circle({ id: :the_circle })\n# we can add any atome inside another atome, below we add a text inside de th box b\nt = b.text({ data: :hello, left: 200, id: :the_cirle })\n# theres no limit in the depht of atome, we can create an image inside the text, exemple:\nt.image({ path: \'medias/images/logos/atome.svg\', width: 33 })\n\n# note that creating a hierarchy this way automatically\n\n# Note that when you create a hierarchy in this way, it automatically creates a relationship by populating the \'attach\' and \'fasten\' properties. So, if you enter:\n\n\nputs "b attach : \#{b.attach}" # prints [:view] in the console as it is fasten to the view atom\nputs "b fasten :\#{b.fasten}" # prints [:the_circle, :the_cirle] in the console\n\nputs "c attach: \#{c.attach}" # prints [:the_box] in the console\nputs "c fasten: \#{c.fasten}" # prints [:box_14] in the console as there\'s no child',
+      infos: 'Usage information for relations.',
+      aim: 'The aim of relations is derived from its functionality.'
+    },
+    tag: {
+      example: '#  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: nil; } \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',
+      infos: 'Usage information for tag.',
+      aim: 'The aim of tag is derived from its functionality.'
+    },
+    web: {
+      example: '# 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',
+      infos: 'Usage information for web.',
+      aim: 'The aim of web is derived from its functionality.'
+    },
+    unit: {
+      example: '# frozen_string_literal: true\n# v1.0\nb=box\nmargin = 12\nb2=box({top: below(b, margin)})\nb3=box({top: below(b2, margin)})\nb4=box({top: below(b3, margin)})\nbox({top: below(b4, margin)})\ni=0\n\n# Global Purpose:\n# The code demonstrates Atome\'s capabilities to:\n# - Create complex dynamic structures: vertical stacking and horizontal alignment with repeated elements.\n# - Handle mixed units (fixed and relative) for positioning, showcasing flexibility in designing adaptive layouts.\n# - Simplify visual prototyping by using simple methods like \'below\' and \'after\' for consistent placement without external calculations.\n# If integrated into a demonstration or project, this code could explain these concepts to developers or test Atome\'s engine flexibility.\n\ndef infos\n  "The code demonstrates Atome\'s capabilities to:\\n" \\\n    "- Create complex dynamic structures: vertical stacking and horizontal alignment with repeated elements.\\n" \\\n    "- Handle mixed units (fixed and relative) for positioning, showcasing flexibility in designing adaptive layouts.\\n" \\\n    "- Simplify visual prototyping by using simple methods like \'below\' and \'after\' for consistent placement without external calculations.\\n" \\\n    "If integrated into a demonstration or project, this code could explain these concepts to developers or test Atome\'s engine flexibility."\nend\n\nb = circle(left: 333, top: 333)\nmargin = "2%"\n# margin = 120\ni = 0\n\nwhile i < 10 do\n  #below first params is the object after which we place the objet, the second the margin\n  # here in percent and the third is the reference object used for the percent\n  # b = circle({top: below(b, margin, grab(:view)), left: b.left})\n  # b = circle({top: :auto,bottom: above(b, margin, grab(:view)), left: b.left})\n  b = circle({top: b.top,left: after(b, margin, grab(:view))})\n  # b = circle({left: :auto,right: before(b, margin, grab(:view))})\n  i += 1\nend\n',
+      infos: 'Usage information for unit.',
+      aim: 'The aim of unit is derived from its functionality.'
+    },
+    login: {
+      example: '# # frozen_string_literal: true\nb=box\n\nb.touch(:down) do\n   A.message({ action: :authentication, data: { table: :user, particles: { email: \'tre@tre.tre\', password: \'poipoi\' } } }) do |response|\n    alert "=> \#{response}"\n  end\nend\n\n#\n#\n# # # 1 login attempt\n\nwait 1 do\n  A.message({ action: :authentication, data: { table: :user, particles: { email: \'tre@tre.tre\', password:  \'poipoi\' } } }) do |response|\n    alert "=> \#{response}"\n  end\n  wait 1 do\n    A.message({ action: :authentication, data: { table: :user, particles: { email: \'tre@tre.tre\', password:  \'poipoi\' } } }) do |response|\n      alert "=> \#{response}"\n    end\n  end\nend\n#\n# 2 account creation attempt\n# wait 1 do\n#   A.message({ action: :account_creation, data: { email: \'tre@tre.tre\', password: \'poipoi\', user_id: \'Nico\' }  }) do |response|\n#     puts response\n#   end\n#\n# end\n\n# string=hello\n#\n# puts JS.global.sha256(string.to_s)\n',
+      infos: 'Usage information for login.',
+      aim: 'The aim of login is derived from its functionality.'
+    },
+    hypertext: {
+      example: '#  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: nil; } \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',
+      infos: 'Usage information for hypertext.',
+      aim: 'The aim of hypertext is derived from its functionality.'
+    },
+    hyperedit: {
+      example: '#  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: nil; } \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',
+      infos: 'Usage information for hyperedit.',
+      aim: 'The aim of hyperedit is derived from its functionality.'
+    },
+    terminal: {
+      example: '# frozen_string_literal: true\nA.terminal(\'pwd\') do |data|\n  text "terminal response  :\\n \#{data}"\nend\n\n# alert A.inspect',
+      infos: 'Usage information for terminal.',
+      aim: 'The aim of terminal is derived from its functionality.'
+    },
+    read: {
+      example: '# 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',
+      infos: 'Usage information for read.',
+      aim: 'The aim of read is derived from its functionality.'
+    },
+    browse: {
+      example: '# # 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',
+      infos: 'Usage information for browse.',
+      aim: 'The aim of browse is derived from its functionality.'
+    },
+    copies: {
+      example: '#  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 :nil\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 = :nil\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',
+      infos: 'Usage information for copies.',
+      aim: 'The aim of copies is derived from its functionality.'
+    },
+    temporary: {
+      example: '# #  frozen_string_literal: true\n#\n# new({ 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 :nil\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#         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#       ############## 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\n# end\n# new({ particle: :visible })\n# new({ renderer: :html, method: :visible }) do |params|\n#   if params == false\n#     params = :nil\n#   elsif params == true\n#     params = :block\n#   end\n#   html.visible(params)\n# end\n# new({ particle: :position }) do\n# end\n# new({ method: :position, type: :integer, renderer: :html }) do |params|\n#   html.style(:position, params)\n# end\n#\n# b = box({ color: :red })\n#\n# b.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 })\n# end\n# ############## Builder #############\n# c = circle({ left: 333 })\n# fake_array = []\n# i = 0\n# while i < 32 do\n#   fake_array << i\n#   i += 1\n# end\n# c.touch(true) do\n#   c.display({ mode: :grid, data: fake_array,width: 333, height: 333 })\n# end\n# ############# Generator #############\n# gen = generator({ id: :genesis, build: { top: 66, copies: 1 } })\n# gen.build({ id: :bundler, copies: 32, tag: { group: :to_grid }, color: :red, width: 33, height: 44, left: 123, smooth: 9, blur: 3, attach: [:view] })\n# grab(:bundler_1).color(:blue)\n#\n# color({ id: :the_orange, red: 1, green: 0.4 })\n#\n# atome_to_grid = tagged({ group: :to_grid })\n# the_group = group({ collected: atome_to_grid })\n#\n# the_group.touch(true) do |i|\n#   color(:green)\n# end\n# # wait 0.3 do\n# the_group.left(633)\n# wait 1 do\n#   grab(:view).display({ mode: :grid, data: fake_array })\n# end\n# #\n#\n#\n#\n#\n\n\n#############\nnew({ atome: :generator }) do |params|\n  # we remove build and store it in a temporary particle  as it has to be added after atome creation\n  build = params.delete(:build)\n  params[:temporary] = { build: build }\nend\nnew({ post: :generator }) do |params|\n  build_plans = params[:temporary][:build]\n  # alert  build_plans\n  # grab(params[:id]).build(build_plans)\nend\n\nnew ({ particle: :build, store: false }) do |params|\n  # we get the id or generate it for the new builder\n  if params[:id]\n    byild_id = params[:id]\n  else\n    byild_id = "auto_build_\#{Universe.atomes.length}"\n    params[:id] = byild_id\n  end\n  # now we create a hash if it doesnt already exist\n  # if it exist we feed the hash\n  if build\n    build[byild_id] = params\n  else\n    #\n    build_hash = { byild_id => params }\n    store({ \'build\': build_hash })\n  end\n  #\n  # now we\'ll created the wanted atomes\n  # here are the default params\n  default_styles = { type: :shape, renderers: [:html], width: 66, height: 66, color: :gray, left: 12, top: 12, copies: 0, attach: :view }\n  params = default_styles.merge(params)\n  color_found = color(params[:color])\n  left_pos = params[:left]\n  top_pos = params[:top]\n  atomes({}) unless atomes\n\n  params[:id] = identity_generator(params[:type]) unless params[:id]\n  atomes[params[:id]] = []\n\n  params[:copies].downto(0) do |index|\n    item_number = params[:copies] - index\n    bundle_id = if params[:id]\n                  "\#{params[:id]}_\#{item_number}"\n                else\n                  "\#{params[:id]}_\#{item_number}"\n                end\n    copied_items_params = params.dup\n    copied_items_params[:id] = bundle_id\n    # alert copied_items_params\n    copy = Atome.new(copied_items_params)\n    copy.attach(copied_items_params[:attach])\n    copy.apply([color_found.id])\n    copy.left(((copy.width + left_pos) * item_number) + left_pos)\n    copy.top(((copy.height + top_pos) * item_number) + top_pos)\n    atomes[params[:id]] << bundle_id\n  end\nend\n\n\ndef duplicate(ids)\n  ids.each do |id_passed|\n\n    atome_passed=grab(id_passed)\n    # atome_passed.particles.delete(:left)\n    # we remove fasten\n    particle_to_remove=[:id, :broadcast, :history,:callback, :html_object, :store_allow,:fasten]\n    particles_found=atome_passed.particles.dup\n    particles_found.delete_if { |key, value| particle_to_remove.include?(key) }\n    particles_found[:id]=identity_generator(particles_found[:type])\n    collected_particles={}\n    particles_found.each  do |particle_found, value_found|\n      collected_particles[particle_found]=value_found\n    end\n    ordered_keys = [:renderers, :id, :type, :attach]\n    ordered_particles = ordered_keys.map { |k| [k, collected_particles[k]] }.to_h\n\n    other_part = collected_particles.reject { |k, _| ordered_keys.include?(k) }\n    # merge the parts  to obtain an re-ordered hash\n    ordered_particles = ordered_particles.merge(other_part)\n\n    # alert ordered_particles\n    nw_atome= Atome.new(ordered_particles)\n\n    wait 2 do\n      nw_atome.left(333)\n    end\n    # Atome.new({"renderers"=>["html"], "id"=>nil, "type"=>"shape", "attach"=>["view"], "tag"=>{}, "fasten"=>["text_15"], "unit"=>{}, "collected"=>{}, "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"=>[]}}, "touch"=>{"tap"=>true}, "touch_code"=>{"touch"=>:jhjh}})\n    # Atome.new({"renderers"=>["html"], "id"=>:jgjhg, "type"=>"shape", "attach"=>["view"], "tag"=>{}, "fasten"=>["text_15"], "unit"=>{}, "collected"=>{}, "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"=>[]}}, "touch"=>{"tap"=>true}, "touch_code"=>{"touch"=>:jhjh}})\n  end\nend\n\nb=box\nc=b.circle\nc.text(:hello)\nb.touch(true) do\n  puts @id\nend\nb.clones([{ left: 300, top: 300, color: :blue, entangled: [:width, :fasten, :height] },\n          { left: 600, top: 366, color: :green, entangled: [:left, :height] }])\n\n# duplicate([b.id])\n\n\n# Atome.new( { renderers: [:html], attach: [:view],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# model={shape}\n\ngen = generator({ id: :genesis, build: {top: 66, copies: 1} })\n# gen.build({ id: :bundler, copies: 32, color: :red, width: 33, height: 44,  left: 123, smooth: 9, blur: 3, attach: [:view] })\n# grab(:bundler_1).color(:blue)',
+      infos: 'Usage information for temporary.',
+      aim: 'The aim of temporary is derived from its functionality.'
+    },
+    atomes: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for atomes.',
+      aim: 'The aim of atomes is derived from its functionality.'
+    },
+    match: {
+      example: '#  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',
+      infos: 'Usage information for match.',
+      aim: 'The aim of match is derived from its functionality.'
+    },
+    invert: {
+      example: '# 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',
+      infos: 'Usage information for invert.',
+      aim: 'The aim of invert is derived from its functionality.'
+    },
+    option: {
+      example: '# 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',
+      infos: 'Usage information for option.',
+      aim: 'The aim of option is derived from its functionality.'
+    },
+    duplicate: {
+      example: "# frozen_string_literal: true\n\nnew({ particle: :find }) do |params|\n  puts params\n\nend\n\nb = box\n# alert 'use category top assign class then port hybrid.html to atom'\n16.times do |index|\n  width_found = b.width\n  b.duplicate({ left: b.left + index * (width_found + 45), top: 0, category: :matrix })\nend\n\ndef calculate_dynamic_value(particle)\n  500\nend\n\nb.find(\n  condition: [{\n                operator: :and,\n                rules: [\n                  {\n                    property: :left,\n                    comparison: :gt,\n                    value: { type: :dynamic, content:[22] }\n                  },\n                  {\n                    operator: :or,\n                    rules: [\n                      {\n                        property: :width,\n                        comparison: :eq,\n                        value: { type: :static, content: 50 }\n                      },\n                      {\n                        property: :width,\n                        comparison: :eq,\n                        value: { type: :static, content: 100 }\n                      }\n                    ],\n                    pre_validate: true\n                  },\n\n                ]\n              },\n              {\n                operator: :or,\n                rules: [\n                  {\n                    property: :rotate,\n                    comparison: :gt,\n                    value: { type: :static, content: 20 }\n                  }\n                ]\n              }]\n) do\n  puts 'items found'\nend\n\n\nUniverse.user_atomes.each do |atome_id|\n  atome_found = hook(atome_id)\n  if atome_found.type == :shape\n    atome_found.color(:orange)\n    atome_found.smooth(200)\n    atome_found.top(200)\n  end\nend\n\n\nrandom_found =Universe.user_atomes.sample(7)\nrandom_found.each do |atome_id|\n  atome_found = hook(atome_id)\n  if atome_found.type == :shape\n    atome_found.top(rand(600))\n    atome_found.width(rand(120))\n    atome_found.height(rand(120))\n    atome_found.smooth(rand(120))\n    atome_found.color(:red)\n  end\nend\n\nrandom_found =Universe.user_atomes.sample(9)\nrandom_found.each do |atome_id|\n  atome_found = hook(atome_id)\n  if atome_found.type == :shape\n    atome_found.left(rand(700))\n    atome_found.width(rand(120))\n    atome_found.height(rand(120))\n    atome_found.smooth(rand(120))\n    atome_found.color(:blue)\n  end\nend\n\n# List of Comparison Operators\n# :eq (Equal To)\n# Description: Checks if the value is equal to the specified value.\n# Usage: { comparison_operator: :eq, value: 100 } would match if the property's value is exactly 100.\n# :gt (Greater Than)\n# Description: Checks if the value is greater than the specified value.\n# Usage: { comparison_operator: :gt, value: 30 } would match if the property's value is greater than 30.\n# :lt (Less Than)\n# Description: Checks if the value is less than the specified value.\n# Usage: { comparison_operator: :lt, value: 50 } would match if the property's value is less than 50.\n# :gte (Greater Than or Equal To)\n# Description: Checks if the value is greater than or equal to the specified value.\n# Usage: { comparison_operator: :gte, value: 20 } would match if the property's value is 20 or more.\n# :lte (Less Than or Equal To)\n# Description: Checks if the value is less than or equal to the specified value.\n# Usage: { comparison_operator: :lte, value: 60 } would match if the property's value is 60 or less.\n# :neq (Not Equal To)\n# Description: Checks if the value is not equal to the specified value.\n# Usage: { comparison_operator: :neq, value: 45 } would match if the property's value is anything other than 45.\n# :in (In a Set Of)\n# Description: Checks if the value is within a specified set of values.\n# Usage: { comparison_operator: :in, value: [1, 2, 3] } would match if the property's value is either 1, 2, or 3.\n# :nin (Not in a Set Of)\n# Description: Checks if the value is not within a specified set of values.\n# Usage: { comparison_operator: :nin, value: [10, 20, 30] } would match if the property's value is anything other than 10, 20, or 30.\n\n# example :\n\n# b.find(\n#   condition: {\n#     operator: :and,\n#     rules: [\n#       {\n#         property: :left,\n#         comparison: :gt,\n#         value: { type: :dynamic, content: -> { calculate_dynamic_value('left') }, cache: true }\n#       },\n#       {\n#         operator: :or,\n#         rules: [\n#           {\n#             property: :width,\n#             comparison: :eq,\n#             value: { type: :static, content: 50 }\n#           },\n#           {\n#             operator: :and,\n#             rules: [\n#               {\n#                 property: :width,\n#                 comparison: :eq,\n#                 value: { type: :static, content: 100 }\n#               },\n#               # ...\n#             ]\n#           }\n#         ],\n#         pre_validate: true\n#       },\n#       # ...\n#     ]\n#   }\n# )",
+      infos: 'Usage information for duplicate.',
+      aim: 'The aim of duplicate is derived from its functionality.'
+    },
+    copy: {
+      example: '# 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',
+      infos: 'Usage information for copy.',
+      aim: 'The aim of copy is derived from its functionality.'
+    },
+    paste: {
+      example: "# frozen_string_literal: true\n\nb = box\nc = circle\nt = text('touch me')\n\nb.copy([c.id, b.id, t.id])\nb.copy(b.id)\n\nwait 1 do\n  c.paste([0, 2])\n  wait 1 do\n    t.paste(0)\n  end\n\nend\n\nt.touch(true) do\n  copies = t.paste(0)\n  copies.each do |atome_paste|\n    wait 1 do\n      grab(atome_paste).color(:red)\n    end\n  end\nend\n",
+      infos: 'Usage information for paste.',
+      aim: 'The aim of paste is derived from its functionality.'
+    },
+    backup: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for backup.',
+      aim: 'The aim of backup is derived from its functionality.'
+    },
+    import: {
+      example: '#  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',
+      infos: 'Usage information for import.',
+      aim: 'The aim of import is derived from its functionality.'
+    },
+    compute: {
+      example: '# 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',
+      infos: 'Usage information for compute.',
+      aim: 'The aim of compute is derived from its functionality.'
+    },
+    get: {
+      example: '#  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: nil; } \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',
+      infos: 'Usage information for get.',
+      aim: 'The aim of get is derived from its functionality.'
+    },
+    css: {
+      example: '#  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',
+      infos: 'Usage information for css.',
+      aim: 'The aim of css is derived from its functionality.'
+    },
+    holder: {
+      example: "# 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",
+      infos: 'Usage information for holder.',
+      aim: 'The aim of holder is derived from its functionality.'
+    },
+    executor: {
+      example: '# 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',
+      infos: 'Usage information for executor.',
+      aim: 'The aim of executor is derived from its functionality.'
+    },
+    tick: {
+      example: '#  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 :nil\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 = :nil\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',
+      infos: 'Usage information for tick.',
+      aim: 'The aim of tick is derived from its functionality.'
+    },
+    storage: {
+      example: '# 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',
+      infos: 'Usage information for storage.',
+      aim: 'The aim of storage is derived from its functionality.'
+    },
+    state: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for state.',
+      aim: 'The aim of state is derived from its functionality.'
+    },
+    record: {
+      example: '# frozen_string_literal: true\n\nnew ({particle: :trigger})\n\na=circle\na.trigger({record: true})\n\n\n### wad JS\nbb=box({left: 333})\nbb.text(:wadjs)\n\n\n\n## Midi test\n\njs_midi_code = <<~JAVASCRIPT\nasync function startMidi() {\n    try {\n        await window.__TAURI__.invoke(\'start_midi\');\n        console.log(\'MIDI listener started\');\n    } catch (error) {\n        console.error(\'Failed to start MIDI listener\', error);\n    }\n}\n\nfunction listenForMidiEvents() {\n    window.__TAURI__.event.listen(\'midi-event\', event => {\n        console.log(\'MIDI Event found:\', event.payload);\n    });\n}\n\nstartMidi();\nlistenForMidiEvents();\n\nJAVASCRIPT\nif Atome::host == \'tauri\'\n  JS.eval(js_midi_code)\nend\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\n\nsynthesis_code = <<~JAVASCRIPT\nconst synth = window.speechSynthesis;\nconst utterance1 = new SpeechSynthesisUtterance("Bonjour, comment allez-vous ?");\n  utterance1.lang = \'fr-FR\';\nconst utterance2 = new SpeechSynthesisUtterance("hello, how are you ?");\n utterance2.lang = \'en-US\';\nsynth.speak(utterance1);\nsynth.speak(utterance2);\nconst utterance3 = new SpeechSynthesisUtterance("Hola, ¿cómo estás?");\nutterance3.lang = \'es-ES\';\nsynth.speak(utterance3);\nJAVASCRIPT\n\nbcb=box({top: 90})\n\nbcb.touch(true) do\n  JS.eval(synthesis_code)\nend\n\n\n\n\n######\ncbc=box({top: 90, left: 90})\ntext({data: :result, id: :result, top: 90, left: 190})\n\nrecogniction_code = <<~JAVASCRIPT\nlet recognition;\nlet recognitionTimeout;\n\nif (!(\'webkitSpeechRecognition\' in window)) {\n  alert(\'Votre navigateur ne supporte pas la Web Speech API.\');\n  return;\n}\n\nrecognition = new webkitSpeechRecognition();\nrecognition.lang = \'fr-FR\'; // Langue française\nrecognition.interimResults = false; // Résultats intérimaires (partiels) désactivés\nrecognition.maxAlternatives = 1; // Nombre maximum d\'alternatives\n\nrecognition.onstart = function() {\n  console.log(\'Reconnaissance vocale démarrée.\');\n};\n\nrecognition.onresult = function(event) {\n  console.log(\'Résultat obtenu.\');\n  const result = event.results[0][0].transcript;\n  console.log(\'Vous avez dit : \' + result);\n  document.getElementById(\'result\').innerText = result;\n};\n\nrecognition.onerror = function(event) {\n  console.error(\'Erreur de reconnaissance vocale : \', event.error);\n  switch(event.error) {\n    case \'no-speech\':\n      console.log(\'Aucune parole détectée.\');\n      break;\n    case \'audio-capture\':\n      console.log(\'Microphone non détecté.\');\n      break;\n    case \'not-allowed\':\n      console.log(\'Permission de microphone refusée.\');\n      break;\n    default:\n      console.log(\'Erreur inconnue.\');\n      break;\n  }\n  clearTimeout(recognitionTimeout); // Annule le timeout en cas d\'erreur\n};\n\nrecognition.onend = function() {\n  console.log(\'Reconnaissance vocale terminée.\');\n  clearTimeout(recognitionTimeout); // Nettoyage du timeout à la fin de la reconnaissance\n};\n\n// Fonction pour démarrer la reconnaissance avec gestion des timeout\nfunction startRecognition() {\n  try {\n    recognition.start();\n    console.log(\'Reconnaissance vocale démarrée.\');\n    recognitionTimeout = setTimeout(() => {\n      console.log(\'Timeout atteint, arrêt de la reconnaissance.\');\n      recognition.stop();\n    }, 10000); // Timeout de 10 secondes\n  } catch (e) {\n    console.error(\'Erreur lors du démarrage de la reconnaissance : \', e.message);\n  }\n}\n\nstartRecognition();\nJAVASCRIPT\n\ncbc.touch(true) do\n  JS.eval(recogniction_code)\n\nend\n',
+      infos: 'Usage information for record.',
+      aim: 'The aim of record is derived from its functionality.'
+    },
+    preview: {
+      example: '# 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',
+      infos: 'Usage information for preview.',
+      aim: 'The aim of preview is derived from its functionality.'
+    },
+    meteo: {
+      example: "#  frozen_string_literal: true\n\nb = box\nb.meteo('chamalieres') do |params|\n  text({ data: params[:main][:temp] })\n  puts params\nend\n\n",
+      infos: 'Usage information for meteo.',
+      aim: 'The aim of meteo is derived from its functionality.'
+    },
+  },
+  atomes: {
+    editor: {
+      example: '# 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 == :nil\n    back.display(:block)\n  else\n    back.display(:nil)\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"',
+      infos: 'Usage information for editor.',
+      aim: 'The aim of editor is derived from its functionality.'
+    },
+    color: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for color.',
+      aim: 'The aim of color is derived from its functionality.'
+    },
+    image: {
+      example: "#  frozen_string_literal: true\n\nimage(:red_planet)\nimage({path: 'medias/images/logos/atome.svg', width: 33})\n",
+      infos: 'Usage information for image.',
+      aim: 'The aim of image is derived from its functionality.'
+    },
+    video: {
+      example: '# 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',
+      infos: 'Usage information for video.',
+      aim: 'The aim of video is derived from its functionality.'
+    },
+    www: {
+      example: '#  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)',
+      infos: 'Usage information for www.',
+      aim: 'The aim of www is derived from its functionality.'
+    },
+    shadow: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for shadow.',
+      aim: 'The aim of shadow is derived from its functionality.'
+    },
+    border: {
+      example: '# 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',
+      infos: 'Usage information for border.',
+      aim: 'The aim of border is derived from its functionality.'
+    },
+    raw: {
+      example: "# frozen_string_literal: true\n\n\nvideo({id: :video, path: 'medias/videos/avengers.mp4', width: 300, height: 222 })\nwaveform_container=box({id: 'thumbnails-container', top: 190,width: 666, height: 39, color: :gray})\nwaveform_container.draw({width: 666, height: 33,  id: :thumbnails})\nwaveform_container.box({id: 'progress', width: 3, height: '100%', color: :red})\n\n\nbox({id: :file, top: 666, left: 12, width: 300, height: 40, smooth: 9, color: { red: 0.3, green: 0.3, blue: 0.3 } })\nbox({id: :load_file, top: 777, left: 12, width: 300, height: 40, smooth: 9, color: { red: 0.3, green: 0.3, blue: 0.3 } })\n\n\n  JS.eval <<~JS\n\nconst video = document.getElementById('video');\n\n\t\tconst thumbnailsCanvas = document.getElementById('thumbnails');\n\t\tconst thumbnailsCtx = thumbnailsCanvas.getContext('2d');\n\t\tconst progress = document.getElementById('progress');\n\t\t// const loadFileButton = document.getElementById('load-file');\n\t\t// const fileInput = document.getElementById('file-input');\n\t\tlet isDragging = false;\n\n\t\t// Charger la vidéo par défaut\n\t\tvideo.addEventListener('loadeddata', () => {\n\t\t\tdrawThumbnails(12);\n\t\t});\n\n\t\tvideo.addEventListener('timeupdate', () => {\n\t\t\tconst progressPosition = (video.currentTime / video.duration) * thumbnailsCanvas.clientWidth;\n\t\t\tprogress.style.left = `${progressPosition}px`;\n\t\t});\n\n\t\t// Drag and Drop Events\n\t\t// loadFileButton.addEventListener('dragover', (event) => {\n\t\t// \tevent.preventDefault();\n\t\t// \tloadFileButton.classList.add('dragover');\n\t\t// });\n        //\n\t\t// loadFileButton.addEventListener('dragleave', () => {\n\t\t// \tloadFileButton.classList.remove('dragover');\n\t\t// });\n        //\n\t\t// loadFileButton.addEventListener('drop', (event) => {\n\t\t// \tevent.preventDefault();\n\t\t// \tloadFileButton.classList.remove('dragover');\n\t\t// \tconst file = event.dataTransfer.files[0];\n\t\t// \tif (file && file.type.startsWith('video/')) {\n\t\t// \t\tloadVideoFile(file);\n\t\t// \t}\n\t\t// });\n\n\t\t// loadFileButton.addEventListener('click', () => {\n\t\t// \tfileInput.click();\n\t\t// });\n        //\n\t\t// fileInput.addEventListener('change', (event) => {\n\t\t// \tconst file = event.target.files[0];\n\t\t// \tif (file) {\n\t\t// \t\tloadVideoFile(file);\n\t\t// \t}\n\t\t// });\n\n\t\tasync function loadVideoFile(file) {\n\t\t\ttry {\n\t\t\t\tconst objectURL = URL.createObjectURL(file);\n\t\t\t\tvideo.src = objectURL;\n\t\t\t\tvideo.load(); // Reload the video to apply the new source\n\t\t\t} catch (error) {\n\t\t\t\tconsole.error('Error loading video file:', error);\n\t\t\t}\n\t\t}\n\n\t\tfunction drawThumbnails(maxImages) {\n\t\t\tconst samples = Math.min(maxImages, maxImages);\n\t\t\tconst interval = video.duration / samples;\n\t\t\tconst videoAspectRatio = video.videoWidth / video.videoHeight;\n\n\t\t\t// Adjust the canvas height based on the video's aspect ratio\n\t\t\tconst canvasWidth = thumbnailsCanvas.width;\n\t\t\tconst canvasHeight = canvasWidth / videoAspectRatio / maxImages;\n\t\t\tthumbnailsCanvas.height = canvasHeight;\n\n\t\t\tvideo.pause();\n\t\t\tvideo.currentTime = 0;\n\n\t\t\tlet i = 0;\n\t\t\tconst captureFrames = () => {\n\t\t\t\tif (i >= samples) return;\n\n\t\t\t\tvideo.currentTime = i * interval;\n\n\t\t\t\tvideo.addEventListener('seeked', function capture() {\n\t\t\t\t\tconst width = canvasWidth / samples;\n\t\t\t\t\tconst height = canvasHeight;\n\n\t\t\t\t\tthumbnailsCtx.drawImage(video, i * width, 0, width, height);\n\n\t\t\t\t\tvideo.removeEventListener('seeked', capture);\n\t\t\t\t\ti++;\n\t\t\t\t\tcaptureFrames();\n\t\t\t\t});\n\t\t\t};\n\t\t\tcaptureFrames();\n\t\t}\n\n\t\tthumbnailsCanvas.addEventListener('mousedown', (event) => {\n\t\t\tvideo.pause();\n\t\t\tisDragging = true;\n\t\t\thandleScrub(event);\n\t\t});\n\n\t\t// Attach mouseup event to the document to ensure it is captured even if mouse leaves the canvas\n\t\tdocument.addEventListener('mouseup', (event) => {\n\t\t\tvideo.play();\n\t\t\tif (isDragging) {\n\t\t\t\tisDragging = false;\n\t\t\t}\n\t\t});\n\n\t\tthumbnailsCanvas.addEventListener('mousemove', (event) => {\n\t\t\tif (isDragging) {\n\t\t\t\thandleScrub(event);\n\t\t\t}\n\t\t});\n\n\t\tfunction handleScrub(event) {\n\t\t\tconst rect = thumbnailsCanvas.getBoundingClientRect();\n\t\t\tconst scrubX = event.clientX - rect.left;\n\t\t\tconst newTime = (scrubX / thumbnailsCanvas.clientWidth) * video.duration;\n\t\t\tvideo.currentTime = newTime;\n\t\t}\n\n\n  JS\n\n\n\n",
+      infos: 'Usage information for raw.',
+      aim: 'The aim of raw is derived from its functionality.'
+    },
+    shape: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for shape.',
+      aim: 'The aim of shape is derived from its functionality.'
+    },
+    code: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for code.',
+      aim: 'The aim of code is derived from its functionality.'
+    },
+    audio: {
+      example: '#  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',
+      infos: 'Usage information for audio.',
+      aim: 'The aim of audio is derived from its functionality.'
+    },
+    element: {
+      example: '#  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',
+      infos: 'Usage information for element.',
+      aim: 'The aim of element is derived from its functionality.'
+    },
+    animation: {
+      example: '# # 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',
+      infos: 'Usage information for animation.',
+      aim: 'The aim of animation is derived from its functionality.'
+    },
+    group: {
+      example: '#  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 :nil\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 = :nil\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',
+      infos: 'Usage information for group.',
+      aim: 'The aim of group is derived from its functionality.'
+    },
+    text: {
+      example: '#  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',
+      infos: 'Usage information for text.',
+      aim: 'The aim of text is derived from its functionality.'
+    },
+    human: {
+      example: '# #  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\'',
+      infos: 'Usage information for human.',
+      aim: 'The aim of human is derived from its functionality.'
+    },
+    machine: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for machine.',
+      aim: 'The aim of machine is derived from its functionality.'
+    },
+    paint: {
+      example: '# 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',
+      infos: 'Usage information for paint.',
+      aim: 'The aim of paint is derived from its functionality.'
+    },
+    vector: {
+      example: "# 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",
+      infos: 'Usage information for vector.',
+      aim: 'The aim of vector is derived from its functionality.'
+    },
+    table: {
+      example: '# # frozen_string_literal: true\nb=box\n\nb.touch(:down) do\n   A.message({ action: :authentication, data: { table: :user, particles: { email: \'tre@tre.tre\', password: \'poipoi\' } } }) do |response|\n    alert "=> \#{response}"\n  end\nend\n\n#\n#\n# # # 1 login attempt\n\nwait 1 do\n  A.message({ action: :authentication, data: { table: :user, particles: { email: \'tre@tre.tre\', password:  \'poipoi\' } } }) do |response|\n    alert "=> \#{response}"\n  end\n  wait 1 do\n    A.message({ action: :authentication, data: { table: :user, particles: { email: \'tre@tre.tre\', password:  \'poipoi\' } } }) do |response|\n      alert "=> \#{response}"\n    end\n  end\nend\n#\n# 2 account creation attempt\n# wait 1 do\n#   A.message({ action: :account_creation, data: { email: \'tre@tre.tre\', password: \'poipoi\', user_id: \'Nico\' }  }) do |response|\n#     puts response\n#   end\n#\n# end\n\n# string=hello\n#\n# puts JS.global.sha256(string.to_s)\n',
+      infos: 'Usage information for table.',
+      aim: 'The aim of table is derived from its functionality.'
+    },
+    atomized: {
+      example: '#  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: nil; } \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',
+      infos: 'Usage information for atomized.',
+      aim: 'The aim of atomized is derived from its functionality.'
+    },
+    map: {
+      example: '#  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',
+      infos: 'Usage information for map.',
+      aim: 'The aim of map is derived from its functionality.'
+    },
+    vr: {
+      example: "# frozen_string_literal: true\n\nvr({width: 700,height: 390,path: 'medias/images/puydesancy.jpg', id: :tutu})\n",
+      infos: 'Usage information for vr.',
+      aim: 'The aim of vr is derived from its functionality.'
+    },
+    draw: {
+      example: "# frozen_string_literal: true\n\n\nvideo({id: :video, path: 'medias/videos/avengers.mp4', width: 300, height: 222 })\nwaveform_container=box({id: 'thumbnails-container', top: 190,width: 666, height: 39, color: :gray})\nwaveform_container.draw({width: 666, height: 33,  id: :thumbnails})\nwaveform_container.box({id: 'progress', width: 3, height: '100%', color: :red})\n\n\nbox({id: :file, top: 666, left: 12, width: 300, height: 40, smooth: 9, color: { red: 0.3, green: 0.3, blue: 0.3 } })\nbox({id: :load_file, top: 777, left: 12, width: 300, height: 40, smooth: 9, color: { red: 0.3, green: 0.3, blue: 0.3 } })\n\n\n  JS.eval <<~JS\n\nconst video = document.getElementById('video');\n\n\t\tconst thumbnailsCanvas = document.getElementById('thumbnails');\n\t\tconst thumbnailsCtx = thumbnailsCanvas.getContext('2d');\n\t\tconst progress = document.getElementById('progress');\n\t\t// const loadFileButton = document.getElementById('load-file');\n\t\t// const fileInput = document.getElementById('file-input');\n\t\tlet isDragging = false;\n\n\t\t// Charger la vidéo par défaut\n\t\tvideo.addEventListener('loadeddata', () => {\n\t\t\tdrawThumbnails(12);\n\t\t});\n\n\t\tvideo.addEventListener('timeupdate', () => {\n\t\t\tconst progressPosition = (video.currentTime / video.duration) * thumbnailsCanvas.clientWidth;\n\t\t\tprogress.style.left = `${progressPosition}px`;\n\t\t});\n\n\t\t// Drag and Drop Events\n\t\t// loadFileButton.addEventListener('dragover', (event) => {\n\t\t// \tevent.preventDefault();\n\t\t// \tloadFileButton.classList.add('dragover');\n\t\t// });\n        //\n\t\t// loadFileButton.addEventListener('dragleave', () => {\n\t\t// \tloadFileButton.classList.remove('dragover');\n\t\t// });\n        //\n\t\t// loadFileButton.addEventListener('drop', (event) => {\n\t\t// \tevent.preventDefault();\n\t\t// \tloadFileButton.classList.remove('dragover');\n\t\t// \tconst file = event.dataTransfer.files[0];\n\t\t// \tif (file && file.type.startsWith('video/')) {\n\t\t// \t\tloadVideoFile(file);\n\t\t// \t}\n\t\t// });\n\n\t\t// loadFileButton.addEventListener('click', () => {\n\t\t// \tfileInput.click();\n\t\t// });\n        //\n\t\t// fileInput.addEventListener('change', (event) => {\n\t\t// \tconst file = event.target.files[0];\n\t\t// \tif (file) {\n\t\t// \t\tloadVideoFile(file);\n\t\t// \t}\n\t\t// });\n\n\t\tasync function loadVideoFile(file) {\n\t\t\ttry {\n\t\t\t\tconst objectURL = URL.createObjectURL(file);\n\t\t\t\tvideo.src = objectURL;\n\t\t\t\tvideo.load(); // Reload the video to apply the new source\n\t\t\t} catch (error) {\n\t\t\t\tconsole.error('Error loading video file:', error);\n\t\t\t}\n\t\t}\n\n\t\tfunction drawThumbnails(maxImages) {\n\t\t\tconst samples = Math.min(maxImages, maxImages);\n\t\t\tconst interval = video.duration / samples;\n\t\t\tconst videoAspectRatio = video.videoWidth / video.videoHeight;\n\n\t\t\t// Adjust the canvas height based on the video's aspect ratio\n\t\t\tconst canvasWidth = thumbnailsCanvas.width;\n\t\t\tconst canvasHeight = canvasWidth / videoAspectRatio / maxImages;\n\t\t\tthumbnailsCanvas.height = canvasHeight;\n\n\t\t\tvideo.pause();\n\t\t\tvideo.currentTime = 0;\n\n\t\t\tlet i = 0;\n\t\t\tconst captureFrames = () => {\n\t\t\t\tif (i >= samples) return;\n\n\t\t\t\tvideo.currentTime = i * interval;\n\n\t\t\t\tvideo.addEventListener('seeked', function capture() {\n\t\t\t\t\tconst width = canvasWidth / samples;\n\t\t\t\t\tconst height = canvasHeight;\n\n\t\t\t\t\tthumbnailsCtx.drawImage(video, i * width, 0, width, height);\n\n\t\t\t\t\tvideo.removeEventListener('seeked', capture);\n\t\t\t\t\ti++;\n\t\t\t\t\tcaptureFrames();\n\t\t\t\t});\n\t\t\t};\n\t\t\tcaptureFrames();\n\t\t}\n\n\t\tthumbnailsCanvas.addEventListener('mousedown', (event) => {\n\t\t\tvideo.pause();\n\t\t\tisDragging = true;\n\t\t\thandleScrub(event);\n\t\t});\n\n\t\t// Attach mouseup event to the document to ensure it is captured even if mouse leaves the canvas\n\t\tdocument.addEventListener('mouseup', (event) => {\n\t\t\tvideo.play();\n\t\t\tif (isDragging) {\n\t\t\t\tisDragging = false;\n\t\t\t}\n\t\t});\n\n\t\tthumbnailsCanvas.addEventListener('mousemove', (event) => {\n\t\t\tif (isDragging) {\n\t\t\t\thandleScrub(event);\n\t\t\t}\n\t\t});\n\n\t\tfunction handleScrub(event) {\n\t\t\tconst rect = thumbnailsCanvas.getBoundingClientRect();\n\t\t\tconst scrubX = event.clientX - rect.left;\n\t\t\tconst newTime = (scrubX / thumbnailsCanvas.clientWidth) * video.duration;\n\t\t\tvideo.currentTime = newTime;\n\t\t}\n\n\n  JS\n\n\n\n",
+      infos: 'Usage information for draw.',
+      aim: 'The aim of draw is derived from its functionality.'
+    },
+  },
+  molecules: {
+    input: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for input.',
+      aim: 'The aim of input is derived from its functionality.'
+    },
+    list: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for list.',
+      aim: 'The aim of list is derived from its functionality.'
+    },
+    slider: {
+      example: "# 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",
+      infos: 'Usage information for slider.',
+      aim: 'The aim of slider is derived from its functionality.'
+    },
+    matrix: {
+      example: '# 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',
+      infos: 'Usage information for matrix.',
+      aim: 'The aim of matrix is derived from its functionality.'
+    },
+    application: {
+      example: '# 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',
+      infos: 'Usage information for application.',
+      aim: 'The aim of application is derived from its functionality.'
+    },
+    page: {
+      example: '#  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: nil; } \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',
+      infos: 'Usage information for page.',
+      aim: 'The aim of page is derived from its functionality.'
+    },
+    show: {
+      example: '# frozen_string_literal: true\n# v1.0\nb=box\nmargin = 12\nb2=box({top: below(b, margin)})\nb3=box({top: below(b2, margin)})\nb4=box({top: below(b3, margin)})\nbox({top: below(b4, margin)})\ni=0\n\n# Global Purpose:\n# The code demonstrates Atome\'s capabilities to:\n# - Create complex dynamic structures: vertical stacking and horizontal alignment with repeated elements.\n# - Handle mixed units (fixed and relative) for positioning, showcasing flexibility in designing adaptive layouts.\n# - Simplify visual prototyping by using simple methods like \'below\' and \'after\' for consistent placement without external calculations.\n# If integrated into a demonstration or project, this code could explain these concepts to developers or test Atome\'s engine flexibility.\n\ndef infos\n  "The code demonstrates Atome\'s capabilities to:\\n" \\\n    "- Create complex dynamic structures: vertical stacking and horizontal alignment with repeated elements.\\n" \\\n    "- Handle mixed units (fixed and relative) for positioning, showcasing flexibility in designing adaptive layouts.\\n" \\\n    "- Simplify visual prototyping by using simple methods like \'below\' and \'after\' for consistent placement without external calculations.\\n" \\\n    "If integrated into a demonstration or project, this code could explain these concepts to developers or test Atome\'s engine flexibility."\nend\n\nb = circle(left: 333, top: 333)\nmargin = "2%"\n# margin = 120\ni = 0\n\nwhile i < 10 do\n  #below first params is the object after which we place the objet, the second the margin\n  # here in percent and the third is the reference object used for the percent\n  # b = circle({top: below(b, margin, grab(:view)), left: b.left})\n  # b = circle({top: :auto,bottom: above(b, margin, grab(:view)), left: b.left})\n  b = circle({top: b.top,left: after(b, margin, grab(:view))})\n  # b = circle({left: :auto,right: before(b, margin, grab(:view))})\n  i += 1\nend\n',
+      infos: 'Usage information for show.',
+      aim: 'The aim of show is derived from its functionality.'
+    },
+    buttons: {
+      example: '# 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',
+      infos: 'Show how to apply color to atomes',
+      aim: 'The aim of buttons is derived from its functionality.'
+    },
+    editor: {
+      example: '# 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 == :nil\n    back.display(:block)\n  else\n    back.display(:nil)\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"',
+      infos: 'Usage information for editor.',
+      aim: 'The aim of editor is derived from its functionality.'
+    },
+  },
+  presets: {
+    box: {
+      example: "# frozen_string_literal: true\n\n# basic usage:\n# # we create a basic empty atome\na=Atome.new\n# we add a bunch particles\na.renderers([:html])\na.id(:my_shape)\na.type(:shape)\na.width(33)\na.height(33)\na.top(33)\na.left(33)\na.attach(:view)\n# we can now add a color the atome using  apply  used to apply an atome onto another (please note that color is also an atome not a particle)\n# in this case  we apply the color atome name box_color this a default color created by the system\na.apply([:box_color])\n\nwait 2 do\n  # a bit less efficient and a bit more processor intensive solution is to use the box preset, that render a box too\n  b=box\n  # we can add a color atome onto the new atome my_shape. as stated before for some atome types such as color, shadows ,the relation between the two atomes won't be attach and fasten but  apply and affect instead the atome color with the particle red onto the\n  b.color(:red)\nend\n",
+      infos: 'Usage information for box.',
+      aim: 'The aim of box is derived from its functionality.'
+    },
+    circle: {
+      example: '# 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',
+      infos: 'Usage information for circle.',
+      aim: 'The aim of circle is derived from its functionality.'
+    },
+  },
+}