clay layout

scripts/mum.js

@@ -12,7 +12,6 @@ mum.inputs.lm = function () {
 };
 
 mum.base = {
-  pos: null, // If set, puts the cursor to this position before drawing the element
   offset: [0, 0], // Move x,y to the right and down before drawing
   padding: [0, 0], // Pad inwards after drawing, to prepare for the next element
   font: "fonts/c64.ttf",
@@ -102,6 +101,8 @@ function computeContainerSize(context)
     
 }
 
+
+
 mum.container = function(data, cb) {
   context_stack.push(context);
   data.__proto__ = mum.base;
@@ -290,16 +291,21 @@ mum.button = function (str, data = { padding: [4, 4], color: Color.black }) {
   end(data);
 };
 
-mum.window = function (fn, data = {}) {
+mum.window = function (pos = [0,0], size = game.size.slice(), config = {}, fn) {
-  if (pre(data)) return;
+  if (pre(config)) return;
 
   render.rectangle(cursor, cursor.add(data.size), data.color);
-  cursor.y += data.height;
+  config.pos = pos;
-  cursor = cursor.add(data.padding);
+  config.pos = config.add(config.padding);
   fn();
   end(data);
 };
 
+mum.hstack = function(data = {}, fn)
+{
+   
+}
+
 mum.ex_hud = function () {
   mum.label("TOP LEFT", { pos: [0, game.size.y], anchor: [0, 1] });
   mum.label("BOTTOM LEFT", { pos: [0, 0], anchor: [0, 0] });

source/engine/font.c

@@ -76,7 +76,7 @@ struct sFont *MakeFont(const char *fontfile, int height) {
 
   unsigned char *ttf_buffer = slurp_file(fontfile, NULL);
   if (!ttf_buffer) {
-    YughWarn("Could not find font at %s.");
+    YughWarn("Could not find font at %s.", fontfile);
     return NULL;
   }
   unsigned char *bitmap = malloc(packsize * packsize);
@@ -99,11 +99,10 @@ struct sFont *MakeFont(const char *fontfile, int height) {
   int ascent, descent, linegap;
 
   stbtt_GetFontVMetrics(&fontinfo, &ascent, &descent, &linegap);
-  float emscale = stbtt_ScaleForPixelHeight(&fontinfo, height);
+  float emscale = tbtt_ScaleForMappingEmToPixels(&fontinfo, height);
   newfont->ascent = ascent*emscale;
   newfont->descent = descent*emscale;
   newfont->linegap = linegap*emscale;
-  newfont->linegap = ((newfont->ascent - newfont->descent) - newfont->linegap);
   
   newfont->texture = malloc(sizeof(texture));
   newfont->texture->id = sg_make_image(&(sg_image_desc){
@@ -131,10 +130,6 @@ struct sFont *MakeFont(const char *fontfile, int height) {
     r.h = (glyph.y1-glyph.y0) / (float)packsize;
 
     newfont->Characters[c].Advance = glyph.xadvance; /* x distance from this char to the next */
-    newfont->Characters[c].Size[0] = (glyph.x1 - glyph.x0);
-    newfont->Characters[c].Size[1] = (glyph.y1 - glyph.y0);
-    newfont->Characters[c].Bearing[0] = glyph.xoff;
-    newfont->Characters[c].Bearing[1] = glyph.yoff2;
     newfont->Characters[c].rect = r;
   }
 
@@ -194,7 +189,7 @@ void sdrawCharacter(struct Character c, HMM_Vec2 cursor, float scale, struct rgb
 
   vert.pos.x = cursor.X + c.Bearing[0] * scale;
   vert.pos.y = cursor.Y - c.Bearing[1] * scale;
-  vert.wh.x = c.Size[0] * scale;
+  vert.wh.x = c.\Size[0] * scale;
   vert.wh.y = c.Size[1] * scale;
 
 //  if (vert.pos.x > frame.l || vert.pos.y > frame.t || (vert.pos.y + vert.wh.y) < frame.b || (vert.pos.x + vert.wh.x) < frame.l) return;

source/engine/font.h

@@ -12,19 +12,17 @@ extern sg_buffer text_ssbo;
 
 /// Holds all state information relevant to a character as loaded using FreeType
 struct Character {
-  float Size[2];     // Size of glyph
-  float Bearing[2];  // Offset from baseline to left/top of glyph
   int Advance; // Horizontal offset to advance to next glyph
-  int leftbearing;
+  float leftbearing; // X offset from cursor to render at
-  struct rect rect;
+  float topbearing; // Y offset from cursor to render at 
+  struct rect rect; // the rect on the font image to render from
 };
 
 struct sFont {
-  uint32_t fontTexture;
   uint32_t height; /* in pixels */
-  float ascent;
+  float ascent; // pixels
-  float descent;
+  float descent; // pixels
-  float linegap;
+  float linegap; //pixels
   struct Character Characters[256];
   sg_image texID;
   texture *texture;

source/engine/jsffi.c

@@ -42,6 +42,11 @@
 #include "gui.h"
 #include "timer.h"
 
+#include "mum.h"
+
+#define CLAY_IMPLEMENTATION
+#include "clay.h"
+
 #ifndef _WIN32
 #include <sys/resource.h>
 #endif
@@ -952,7 +957,7 @@ static int mat2type(int mat)
   return -1;
 }
 
-sg_vertex_layout_state js2layout(JSValue v)
+sg_vertex_layout_state js2vertex_layout(JSValue v)
 {
   sg_vertex_layout_state st = {0};
   JSValue inputs = js_getpropstr(js_getpropstr(v, "vs"), "inputs");
@@ -1017,7 +1022,7 @@ sg_blend_state js2blend(JSValue v)
 JSC_CCALL(render_make_pipeline,
   sg_pipeline_desc p = {0};
   p.shader = js2shader(argv[0]);
-  p.layout = js2layout(argv[0]);
+  p.layout = js2vertex_layout(argv[0]);
   p.primitive_type = js2number(js_getpropstr(argv[0], "primitive"));
   if (js2boolean(js_getpropstr(argv[0], "indexed")))
     p.index_type = SG_INDEXTYPE_UINT16;
@@ -3692,6 +3697,260 @@ static const JSCFunctionListEntry js_os_funcs[] = {
 
  
 
+///// CLAY STUFF
+// Primary ideas are CLAY_CONTAINER, CLAY_TEXT, CLAY_IMAGE, CLAY_SCROLL_CONTAINER, CLAY_BORDER_CONTAINER, and CLAY_FLOATING_CONTAINER
+
+/*
+  Clay_container -> layout
+  clay_text -> text
+  clay_image -> layout, image
+  scorll_container -> layout, scroll
+  floating_container -> layout, floating
+  border_container -> layout, border
+  
+  Layout config
+  {
+    sizing: {
+      width: min/max:percent, type grow:fill:percent:fixed
+      height: min/max:percent
+    }
+    padding: [x,y],
+    childGap: number,
+    layoutirection: horizontal:vertical
+    childAlignment: {
+      x: left/right/center,
+      y: top/bottom/center
+    }
+  }
+  
+  text config
+  {
+    fontSize: (height in pixels)
+    letterSpacing: pixels,
+    lineSpacing: pixels,
+    wrapMode: words:newlines:none
+  }
+  
+  image config
+  {
+    sourceDimensions
+  }
+  
+  floating config
+  {
+    offset: [x,y],
+    expand: [width, height],
+    zindex: number,
+    attachment: {
+      element: left_top:left_center:left_bottom:center_top:center_center:center_bottom:right_top:right_center:right_button,
+      parent: ""
+    },
+  }
+  
+  scroll config
+  {
+    horizontal: boolean,
+    vertical: boolean
+  }
+  
+  border config
+  {
+    left: {
+      width,
+      color
+    }
+    right: '',
+    top: '',
+    bottom:'',
+    betweenchildren: '',
+    corner_radius: {
+      topleft: number,
+      topright:'',
+      bottomleft:'',
+      bottomright:''
+    }
+  }
+  
+  and then render the commands
+  rencercmd: {
+    boundingbox: {x, y, width, height},
+    config: [config from element type],
+    text: text [this can probably be kept in the JS object as a ref]
+    commandType: none/rectangle/border/text/image/scissor_start/scissor_end
+  }
+*/
+
+static Clay_LayoutConfig js2layout(JSValue v)
+{
+  Clay_LayoutConfig config = {0};
+  config.sizing.width.type = (Clay__SizingType)js2number(js_getpropstr(v, "x_content"));
+  config.sizing.height.type = (Clay__SizingType)js2number(js_getpropstr(v, "y_content"));
+  
+  if (config.sizing.width.type == CLAY__SIZING_TYPE_PERCENT)
+    config.sizing.width.sizePercent = js2number(js_getpropstr(v, "x_percent"));
+  else {
+    HMM_Vec2 minmax = js2vec2(js_getpropstr(v, "x_minmax"));
+    config.sizing.width.sizeMinMax.min = minmax.x;
+    config.sizing.width.sizeMinMax.max = minmax.y;
+  }
+  
+  if (config.sizing.height.type == CLAY__SIZING_TYPE_PERCENT) 
+    config.sizing.height.sizePercent = js2number(js_getpropstr(v, "y_percent"));
+  else {
+    HMM_Vec2 minmax = js2vec2(js_getpropstr(v, "y_minmax"));
+    config.sizing.height.sizeMinMax.min = minmax.x;
+    config.sizing.height.sizeMinMax.max = minmax.y;
+  }
+
+  HMM_Vec2 padding = js2vec2(js_getpropstr(v, "padding"));
+  config.padding.x = padding.x;
+  config.padding.y = padding.y;
+  config.childGap = js2number(js_getpropstr(v, "child_gap"));
+  config.layoutDirection = (Clay_LayoutDirection)js2number(js_getpropstr(v, "layout_direction"));
+  config.childAlignment.x = (Clay_LayoutAlignmentX)(js2number(js_getpropstr(v, "child_align_x")));
+  config.childAlignment.y = (Clay_LayoutAlignmentY)(js2number(js_getpropstr(v, "child_align_y")));
+  
+  return config;
+}
+
+JSC_CCALL(clay_dimensions,
+  HMM_Vec2 dim = js2vec2(argv[0]);
+  Clay_SetLayoutDimensions((Clay_Dimensions) { dim.x, dim.y });
+)
+
+JSC_CCALL(clay_draw,
+  Clay_BeginLayout();
+  script_call_sym(argv[0], 0, NULL);
+  Clay_RenderCommandArray cmd = Clay_EndLayout();
+  
+  ret = JS_NewArray(js);
+  printf("there are %d commands here\n", cmd.length);
+  for (int i = 0; i < cmd.length; i++) {
+    Clay_RenderCommand cc = cmd.internalArray[i];
+    JSValue c = JS_NewObject(js);
+    JSValue bb = JS_NewObject(js);
+    js_setpropstr(bb, "x", number2js(cc.boundingBox.x));
+    js_setpropstr(bb, "y", number2js(cc.boundingBox.y));
+    js_setpropstr(bb, "width", number2js(cc.boundingBox.width));
+    js_setpropstr(bb, "height", number2js(cc.boundingBox.height));
+    js_setpropstr(c, "boundingbox", bb);
+    js_setprop_num(ret, i, c);
+    Clay_RectangleElementConfig *rect = cc.config.rectangleElementConfig;
+    js_setpropstr(c, "config", rect->js);
+  }
+)
+
+JSC_CCALL(clay_pointer,
+  HMM_Vec2 pos = js2vec2(argv[0]);
+  int down = js2boolean(argv[1]);
+  Clay_SetPointerState((Clay_Vector2) {pos.x,pos.y }, down);
+)
+
+JSC_CCALL(clay_updatescroll,
+  int drag = js2boolean(argv[0]);
+  HMM_Vec2 delta = js2vec2(argv[1]);
+  float dt = js2number(argv[2]);
+  Clay_UpdateScrollContainers(drag, (Clay_Vector2){delta.x,delta.y}, dt);
+)
+
+JSC_SCALL(clay_container,
+  Clay_LayoutConfig config = js2layout(argv[1]);
+  Clay_RectangleElementConfig rect = {0};
+  rect.js = JS_DupValue(js, argv[1]);
+Clay_String cstr;
+  cstr.length = strlen(str);
+  cstr.chars = str;
+//  Clay__OpenRectangleElement(Clay__HashString(cstr,0,0), &config, &rect);
+  Clay__OpenRectangleElement(CLAY_ID("TEST"), &config, &rect);
+  script_call_sym(argv[2], 0, NULL);
+  Clay__CloseElementWithChildren();
+)
+
+JSC_SCALL(clay_image,
+  Clay_LayoutConfig config = js2layout(argv[1]);
+  Clay_ImageElementConfig image = {0};
+  HMM_Vec2 dim = js2vec2(argv[2]);
+  image.sourceDimensions.width = dim.x;
+  image.sourceDimensions.height = dim.y;
+  Clay__OpenImageElement(CLAY_ID(str), &config, &image);
+  script_call_sym(argv[3], 0, NULL);  
+  Clay__CloseElementWithChildren();
+)
+
+JSC_SSCALL(clay_text,
+  Clay_TextElementConfig text = {0};
+  text.fontSize = js2number(js_getpropstr(argv[2], "font_size"));
+  text.letterSpacing = js2number(js_getpropstr(argv[2], "letter_spacing"));
+  text.lineHeight = js2number(js_getpropstr(argv[2], "line_spacing"));
+  text.wrapMode = (Clay_TextElementConfigWrapMode)js2number(js_getpropstr(argv[2], "wrap"));
+  text.font = js2font(js_getpropstr(argv[2], "font"));
+  Clay__OpenTextElement(CLAY_ID(str), CLAY_STRING(str2), &text);
+//  CLAY_TEXT(CLAY_ID(str), CLAY_STRING(str2), text)
+)
+
+JSC_SCALL(clay_scroll,
+  Clay_LayoutConfig config = js2layout(argv[1]);
+  Clay_ScrollElementConfig scroll = {0};
+  scroll.horizontal = js2boolean(js_getpropstr(argv[1], "scroll_horizontal"));
+  scroll.vertical = js2boolean(js_getpropstr(argv[1], "scroll_vertical"));
+  Clay__OpenScrollElement(CLAY_ID(str), &config, &scroll);
+  script_call_sym(argv[2], 0, NULL);
+  Clay__CloseElementWithChildren();  
+)
+
+static Clay_FloatingElementConfig js2floating(JSValue v)
+{
+  Clay_FloatingElementConfig clay = {0};
+  HMM_Vec2 offset = js2vec2(js_getpropstr(v, "offset"));
+  clay.offset.x = offset.x;
+  clay.offset.y = offset.y;
+  clay.zIndex = js2number(js_getpropstr(v, "zindex"));
+  HMM_Vec2 expand = js2vec2(js_getpropstr(v, "expand"));
+  clay.expand.width = expand.x;
+  clay.expand.height = expand.y;
+  clay.attachment.element = (Clay_FloatingAttachPointType)js2number(js_getpropstr(v, "element"));
+  clay.attachment.parent = (Clay_FloatingAttachPointType)js2number(js_getpropstr(v, "parent"));  
+  return clay;
+}
+
+JSC_SCALL(clay_floating,
+  Clay_LayoutConfig config = js2layout(argv[1]);
+  Clay_FloatingElementConfig floating = js2floating(argv[1]);
+  Clay__OpenFloatingElement(CLAY_ID(str), &config, &floating);
+  script_call_sym(argv[2], 0, NULL);
+  Clay__CloseElementWithChildren();  
+)
+
+static const JSCFunctionListEntry js_clay_funcs[] = {
+  MIST_FUNC_DEF(clay, dimensions, 1),
+  MIST_FUNC_DEF(clay, draw, 1),
+  MIST_FUNC_DEF(clay, pointer, 2),
+  MIST_FUNC_DEF(clay, updatescroll, 3),
+  MIST_FUNC_DEF(clay, container, 3),
+  MIST_FUNC_DEF(clay, image, 4),
+  MIST_FUNC_DEF(clay, text, 3),
+  MIST_FUNC_DEF(clay, scroll, 3),
+  MIST_FUNC_DEF(clay, floating, 3),
+};
+
+// Example measure text function
+static inline Clay_Dimensions MeasureText(Clay_String *text, Clay_TextElementConfig *config) {
+    // Clay_TextElementConfig contains members such as fontId, fontSize, letterSpacing etc
+    // Note: Clay_String->chars is not guaranteed to be null terminated
+    Clay_Dimensions size = {0};
+    float maxWidth = 0;
+    float lineWidth = 0;
+    
+    float height = config->font->height;
+    float scale = config->fontSize/height;
+    float lineHeight = config->font->ascent + config->font->descent + config->font->linegap;
+    lineHeight *= config->lineHeight * scale;
+    float letterSpacing = config->letterSpacing * scale;
+    
+    for (int i = 0; i < text->length; i++) {
+      
+    }
+}
 
 #include "steam.h"
 
@@ -3744,6 +4003,12 @@ void ffi_load() {
   QJSGLOBALCLASS(performance);
   QJSGLOBALCLASS(geometry);
   
+  uint64_t totalMemorySize = Clay_MinMemorySize();
+  Clay_Arena arena = Clay_CreateArenaWithCapacityAndMemory(totalMemorySize, malloc(totalMemorySize));
+  Clay_Initialize(arena, (Clay_Dimensions) { 1920, 1080 });
+  Clay_SetMeasureTextFunction(MeasureText);
+  QJSGLOBALCLASS(clay);
+
   QJSGLOBALCLASS(poly2d);
   
   JS_SetPropertyStr(js, prosperon, "version", str2js(PROSPERON_VER));

source/engine/mum.c

@@ -0,0 +1,256 @@
+#include "mum.h"
+
+#include "jsffi.h"
+
+#include "clay.h"
+#include "script.h"
+
+///// CLAY STUFF
+// Primary ideas are CLAY_CONTAINER, CLAY_TEXT, CLAY_IMAGE, CLAY_SCROLL_CONTAINER, CLAY_BORDER_CONTAINER, and CLAY_FLOATING_CONTAINER
+
+/*
+  Clay_container -> layout
+  clay_text -> text
+  clay_image -> layout, image
+  scorll_container -> layout, scroll
+  floating_container -> layout, floating
+  border_container -> layout, border
+  
+  Layout config
+  {
+    sizing: {
+      width: min/max:percent, type grow:fill:percent:fixed
+      height: min/max:percent
+    }
+    padding: [x,y],
+    childGap: number,
+    layoutirection: horizontal:vertical
+    childAlignment: {
+      x: left/right/center,
+      y: top/bottom/center
+    }
+  }
+  
+  text config
+  {
+    fontSize: (height in pixels)
+    letterSpacing: pixels,
+    lineSpacing: pixels,
+    wrapMode: words:newlines:none
+  }
+  
+  image config
+  {
+    sourceDimensions
+  }
+  
+  floating config
+  {
+    offset: [x,y],
+    expand: [width, height],
+    zindex: number,
+    attachment: {
+      element: left_top:left_center:left_bottom:center_top:center_center:center_bottom:right_top:right_center:right_button,
+      parent: ""
+    },
+  }
+  
+  scroll config
+  {
+    horizontal: boolean,
+    vertical: boolean
+  }
+  
+  border config
+  {
+    left: {
+      width,
+      color
+    }
+    right: '',
+    top: '',
+    bottom:'',
+    betweenchildren: '',
+    corner_radius: {
+      topleft: number,
+      topright:'',
+      bottomleft:'',
+      bottomright:''
+    }
+  }
+  
+  
+  and then render the commands
+  rencercmd: {
+    boundingbox: {x, y, width, height},
+    config: [config from element type],
+    text: text [this can probably be kept in the JS object as a ref]
+    commandType: none/rectangle/border/text/image/scissor_start/scissor_end
+  }
+*/
+/*
+static Clay_ChildAlignment js2childAlignment(JSValue v)
+{
+  Clay_ChildAlignment clay = {};
+  clay.x = (Clay_LayoutAlignmentX)js2number(js_getpropstr(v, "x"));
+  clay.y = (Clay_LayoutAlignmentY)js2number(js_getpropstr(v, "y"));
+  return clay;
+}
+
+static Clay_SizingAxis js2claysizingaxis(JSValue v)
+{
+  Clay_SizingAxis clay = {0};
+  clay.type = (Clay__SizingType)js2number(js_getpropstr(v, "type"));
+  if (clay.type == CLAY__SIZING_TYPE_PERCENT)
+    clay.sizePercent = js2number(js_getpropstr(v, "percent"));
+  else {
+    HMM_Vec2 minmax = js2vec2(js_getpropstr(v, "minmax"));
+    clay.sizeMinMax.min = minmax.x;
+    clay.sizeMinMax.max = minmax.y;
+  }
+  return clay;
+}
+
+static Clay_Sizing js2claysizing(JSValue v)
+{
+  Clay_Sizing clay = {0};
+  clay.width = js2claysizingaxis(js_getpropstr(v, "width"));
+  clay.height = js2claysizingaxis(js_getpropstr(v, "height"));  
+  return clay;
+}
+
+static Clay_LayoutConfig js2layout(JSValue v)
+{
+  Clay_LayoutConfig config = {0};
+  config.sizing =js2claysizing(js_getpropstr(v, "sizing"));
+  HMM_Vec2 padding = js2vec2(js_getpropstr(v, "padding"));
+  config.padding.x = padding.x;
+  config.padding.y = padding.y;
+  config.childGap = js2number(js_getpropstr(v, "child_gap"));
+  config.layoutDirection = (Clay_LayoutDirection)js2number(js_getpropstr(v, "layout_direction"));
+  config.childAlignment = js2childAlignment(js_getpropstr(v, "child_alignment"));
+  
+  return config;
+}
+
+JSC_CCALL(clay_dimensions,
+  HMM_Vec2 dim = js2vec2(argv[0]);
+  Clay_SetLayoutDimensions((Clay_Dimensions) { dim.x, dim.y });
+)
+
+JSC_CCALL(clay_draw,
+  Clay_BeginLayout();
+  script_call_sym(argv[1], 0, NULL);
+  Clay_RenderCommandArray cmd = Clay_EndLayout();
+  
+  ret = JS_NewArray(js);
+  for (int i = 0; i < cmd.length; i++) {
+  }
+)
+
+JSC_CCALL(clay_pointer,
+  HMM_Vec2 pos = js2vec2(argv[0]);
+  int down = js2boolean(argv[1]);
+  Clay_SetPointerState((Clay_Vector2) {pos.x,pos.y }, down);
+)
+
+JSC_CCALL(clay_updatescroll,
+  int drag = js2boolean(argv[0]);
+  HMM_Vec2 delta = js2vec2(argv[1]);
+  float dt = js2number(argv[2]);
+  Clay_UpdateScrollContainers(drag, (Clay_Vector2){delta.x,delta.y}, dt);
+)
+
+JSC_SCALL(clay_container,
+  Clay_LayoutConfig config = js2layout(argv[1]);
+  printf("got here\n");
+  Clay__OpenContainerElement(CLAY_ID(str), &config);
+  script_call_sym(argv[2], 0, NULL);
+  Clay__CloseElementWithChildren();
+)
+
+JSC_SCALL(clay_image,
+  Clay_LayoutConfig config = js2layout(argv[1]);
+  Clay_ImageElementConfig image = {0};
+  HMM_Vec2 dim = js2vec2(argv[2]);
+  image.sourceDimensions.width = dim.x;
+  image.sourceDimensions.height = dim.y;
+  Clay__OpenImageElement(CLAY_ID(str), &config, &image);
+  script_call_sym(argv[3], 0, NULL);  
+  Clay__CloseElementWithChildren();
+)
+
+JSC_SSCALL(clay_text,
+  Clay_TextElementConfig text = {0};
+  text.fontSize = js2number(js_getpropstr(argv[2], "font_size"));
+  text.letterSpacing = js2number(js_getpropstr(argv[2], "letter_spacing"));
+  text.lineHeight = js2number(js_getpropstr(argv[2], "line_spacing"));
+  text.wrapMode = (Clay_TextElementConfigWrapMode)js2number(js_getpropstr(argv[2], "wrap"));
+  Clay__OpenTextElement(CLAY_ID(str), CLAY_STRING(str2), &text);
+//  CLAY_TEXT(CLAY_ID(str), CLAY_STRING(str2), text)
+)
+
+JSC_SCALL(clay_scroll,
+  Clay_LayoutConfig config = js2layout(argv[1]);
+  Clay_ScrollElementConfig scroll = {0};
+  scroll.horizontal = js2boolean(js_getpropstr(argv[1], "scroll_horizontal"));
+  scroll.vertical = js2boolean(js_getpropstr(argv[1], "scroll_vertical"));
+  Clay__OpenScrollElement(CLAY_ID(str), &config, &scroll);
+  script_call_sym(argv[2], 0, NULL);
+  Clay__CloseElementWithChildren();  
+)
+
+static Clay_FloatingElementConfig js2floating(JSValue v)
+{
+  Clay_FloatingElementConfig clay = {0};
+  HMM_Vec2 offset = js2vec2(js_getpropstr(v, "offset"));
+  clay.offset.x = offset.x;
+  clay.offset.y = offset.y;
+  clay.zIndex = js2number(js_getpropstr(v, "zindex"));
+  HMM_Vec2 expand = js2vec2(js_getpropstr(v, "expand"));
+  clay.expand.width = expand.x;
+  clay.expand.height = expand.y;
+  clay.attachment.element = (Clay_FloatingAttachPointType)js2number(js_getpropstr(v, "element"));
+  clay.attachment.parent = (Clay_FloatingAttachPointType)js2number(js_getpropstr(v, "parent"));  
+  return clay;
+}
+
+JSC_SCALL(clay_floating,
+  Clay_LayoutConfig config = js2layout(argv[1]);
+  Clay_FloatingElementConfig floating = js2floating(argv[1]);
+  Clay__OpenFloatingElement(CLAY_ID(str), &config, &floating);
+  script_call_sym(argv[2], 0, NULL);
+  Clay__CloseElementWithChildren();  
+)
+
+static const JSCFunctionListEntry js_clay_funcs[] = {
+  MIST_FUNC_DEF(clay, dimensions, 1),
+  MIST_FUNC_DEF(clay, draw, 2),
+  MIST_FUNC_DEF(clay, pointer, 2),
+  MIST_FUNC_DEF(clay, updatescroll, 3),
+  MIST_FUNC_DEF(clay, container, 3),
+  MIST_FUNC_DEF(clay, image, 4),
+  MIST_FUNC_DEF(clay, text, 3),
+  MIST_FUNC_DEF(clay, scroll, 3),
+  MIST_FUNC_DEF(clay, floating, 3)
+};
+
+// Example measure text function
+static inline Clay_Dimensions MeasureText(Clay_String *text, Clay_TextElementConfig *config) {
+    // Clay_TextElementConfig contains members such as fontId, fontSize, letterSpacing etc
+    // Note: Clay_String->chars is not guaranteed to be null terminated
+}
+
+JSValue clay_init(JSContext *js)
+{
+  uint64_t totalMemorySize = Clay_MinMemorySize();
+  Clay_Arena arena = Clay_CreateArenaWithCapacityAndMemory(totalMemorySize, malloc(totalMemorySize));
+  Clay_Initialize(arena, (Clay_Dimensions) { 1920, 1080 });
+  Clay_SetMeasureTextFunction(MeasureText);
+  
+  JSValue clay = JS_NewObject(js);
+  JS_SetPropertyFunctionList(js, clay, js_clay_funcs, countof(js_clay_funcs));
+  
+  return clay;
+}
+*/

source/engine/mum.h

@@ -0,0 +1,8 @@
+#ifndef MUM_H
+#define MUM_H
+
+#include "jsffi.h"
+
+JSValue clay_init(JSContext *js);
+
+#endif