@hyperfixi/behaviors 2.3.0 → 2.4.0

package/dist/chunk-V2M4W3LO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/schemas/sortable.schema.ts"],"sourcesContent":["import type { BehaviorSchema } from './types';\n\n/**\n * Sortable Behavior Schema\n *\n * Drag-and-drop reordering of list items.\n * Apply to a container element; children become sortable.\n *\n * Note: This behavior fires lifecycle events but does NOT automatically\n * reorder DOM elements. Users must handle actual reordering in their\n * `sortable:move` event handlers.\n */\nexport const sortableSchema: BehaviorSchema = {\n  name: 'Sortable',\n  category: 'ui',\n  tier: 'common',\n  version: '1.0.0',\n  description: 'Makes child elements reorderable via drag-and-drop',\n  parameters: [\n    {\n      name: 'dragClass',\n      type: 'string',\n      optional: true,\n      default: 'sorting',\n      description: 'CSS class added to item during drag',\n    },\n  ],\n  events: [\n    { name: 'sortable:start', description: 'Fired when drag begins' },\n    {\n      name: 'sortable:move',\n      description: 'Fired during drag — handle this event to reorder DOM elements',\n    },\n    { name: 'sortable:end', description: 'Fired when drag completes' },\n  ],\n  requirements: ['Users must handle DOM reordering in sortable:move event handlers'],\n  source: `\nbehavior Sortable(dragClass)\n  init\n    if dragClass is undefined\n      set dragClass to \"sorting\"\n    end\n  end\n  on pointerdown(clientY) from me\n    set item to the closest <li/> to the target\n    if item is null\n      exit\n    end\n    halt the event\n    add .{dragClass} to item\n    trigger sortable:start on me\n    repeat until event pointerup from document\n      wait for pointermove(clientY) from document\n      trigger sortable:move on me\n    end\n    remove .{dragClass} from item\n    trigger sortable:end on me\n  end\nend`.trim(),\n};\n"],"mappings":";AAYO,IAAM,iBAAiC;AAAA,EAC5C,MAAM;AAAA,EACN,UAAU;AAAA,EACV,MAAM;AAAA,EACN,SAAS;AAAA,EACT,aAAa;AAAA,EACb,YAAY;AAAA,IACV;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,MACT,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,QAAQ;AAAA,IACN,EAAE,MAAM,kBAAkB,aAAa,yBAAyB;AAAA,IAChE;AAAA,MACE,MAAM;AAAA,MACN,aAAa;AAAA,IACf;AAAA,IACA,EAAE,MAAM,gBAAgB,aAAa,4BAA4B;AAAA,EACnE;AAAA,EACA,cAAc,CAAC,kEAAkE;AAAA,EACjF,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAsBL,KAAK;AACV;","names":[]}

package/dist/{chunk-U5GNXZUF.js → chunk-ZBSWTV6I.js}

@@ -6,13 +6,6 @@ var resizableSchema = {
   version: "1.0.0",
   description: "Makes elements resizable by dragging",
   parameters: [
-    {
-      name: "handle",
-      type: "selector",
-      optional: true,
-      default: "me",
-      description: "CSS selector for the resize handle (defaults to the element itself)"
-    },
     {
       name: "minWidth",
       type: "number",
@@ -48,25 +41,8 @@ var resizableSchema = {
     { name: "resizable:end", description: "Fired when resize completes" }
   ],
   source: `
-behavior Resizable(handle, minWidth, minHeight, maxWidth, maxHeight)
-  init
-    if handle is undefined
-      set handle to me
-    end
-    if minWidth is undefined
-      set minWidth to 50
-    end
-    if minHeight is undefined
-      set minHeight to 50
-    end
-    if maxWidth is undefined
-      set maxWidth to 9999
-    end
-    if maxHeight is undefined
-      set maxHeight to 9999
-    end
-  end
-  on pointerdown(clientX, clientY) from handle
+behavior Resizable(minWidth, minHeight, maxWidth, maxHeight)
+  on pointerdown(clientX, clientY) from me
     halt the event
     trigger resizable:start
     measure width
@@ -76,13 +52,15 @@ behavior Resizable(handle, minWidth, minHeight, maxWidth, maxHeight)
     set startX to clientX
     set startY to clientY
     repeat until event pointerup from document
-      wait for pointermove(clientX, clientY) or pointerup from document
-      js(startWidth, startHeight, clientX, clientY, startX, startY, minWidth, maxWidth, minHeight, maxHeight, me)
-        var nw = Math.max(minWidth, Math.min(maxWidth, startWidth + (clientX - startX)));
-        var nh = Math.max(minHeight, Math.min(maxHeight, startHeight + (clientY - startY)));
-        me.style.width = nw + 'px';
-        me.style.height = nh + 'px';
-      end
+      wait for pointermove(clientX, clientY) from document
+      set newWidth to startWidth + clientX - startX
+      set newHeight to startHeight + clientY - startY
+      if newWidth < minWidth then set newWidth to minWidth end
+      if newWidth > maxWidth then set newWidth to maxWidth end
+      if newHeight < minHeight then set newHeight to minHeight end
+      if newHeight > maxHeight then set newHeight to maxHeight end
+      set my style.width to newWidth + "px"
+      set my style.height to newHeight + "px"
       trigger resizable:resize
     end
     trigger resizable:end
@@ -94,4 +72,4 @@ end
 export {
   resizableSchema
 };
-//# sourceMappingURL=chunk-U5GNXZUF.js.map
+//# sourceMappingURL=chunk-ZBSWTV6I.js.map

package/dist/chunk-ZBSWTV6I.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/schemas/resizable.schema.ts"],"sourcesContent":["import type { BehaviorSchema } from './types';\n\n/**\n * Resizable Behavior Schema\n *\n * Makes elements resizable by dragging edges or corners.\n * Supports minimum/maximum dimensions and resize handles.\n */\nexport const resizableSchema: BehaviorSchema = {\n  name: 'Resizable',\n  category: 'ui',\n  tier: 'optional',\n  version: '1.0.0',\n  description: 'Makes elements resizable by dragging',\n  parameters: [\n    {\n      name: 'minWidth',\n      type: 'number',\n      optional: true,\n      default: 50,\n      description: 'Minimum width in pixels',\n    },\n    {\n      name: 'minHeight',\n      type: 'number',\n      optional: true,\n      default: 50,\n      description: 'Minimum height in pixels',\n    },\n    {\n      name: 'maxWidth',\n      type: 'number',\n      optional: true,\n      default: 9999,\n      description: 'Maximum width in pixels',\n    },\n    {\n      name: 'maxHeight',\n      type: 'number',\n      optional: true,\n      default: 9999,\n      description: 'Maximum height in pixels',\n    },\n  ],\n  events: [\n    { name: 'resizable:start', description: 'Fired when resize begins' },\n    { name: 'resizable:resize', description: 'Fired during resize' },\n    { name: 'resizable:end', description: 'Fired when resize completes' },\n  ],\n  source: `\nbehavior Resizable(minWidth, minHeight, maxWidth, maxHeight)\n  on pointerdown(clientX, clientY) from me\n    halt the event\n    trigger resizable:start\n    measure width\n    set startWidth to it\n    measure height\n    set startHeight to it\n    set startX to clientX\n    set startY to clientY\n    repeat until event pointerup from document\n      wait for pointermove(clientX, clientY) from document\n      set newWidth to startWidth + clientX - startX\n      set newHeight to startHeight + clientY - startY\n      if newWidth < minWidth then set newWidth to minWidth end\n      if newWidth > maxWidth then set newWidth to maxWidth end\n      if newHeight < minHeight then set newHeight to minHeight end\n      if newHeight > maxHeight then set newHeight to maxHeight end\n      set my style.width to newWidth + \"px\"\n      set my style.height to newHeight + \"px\"\n      trigger resizable:resize\n    end\n    trigger resizable:end\n  end\nend\n`.trim(),\n};\n"],"mappings":";AAQO,IAAM,kBAAkC;AAAA,EAC7C,MAAM;AAAA,EACN,UAAU;AAAA,EACV,MAAM;AAAA,EACN,SAAS;AAAA,EACT,aAAa;AAAA,EACb,YAAY;AAAA,IACV;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,MACT,aAAa;AAAA,IACf;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,MACT,aAAa;AAAA,IACf;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,MACT,aAAa;AAAA,IACf;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,MACT,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,QAAQ;AAAA,IACN,EAAE,MAAM,mBAAmB,aAAa,2BAA2B;AAAA,IACnE,EAAE,MAAM,oBAAoB,aAAa,sBAAsB;AAAA,IAC/D,EAAE,MAAM,iBAAiB,aAAa,8BAA8B;AAAA,EACtE;AAAA,EACA,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0BR,KAAK;AACP;","names":[]}

package/dist/index.cjs

@@ -399,13 +399,6 @@ var init_sortable_schema = __esm({
       version: "1.0.0",
       description: "Makes child elements reorderable via drag-and-drop",
       parameters: [
-        {
-          name: "handle",
-          type: "selector",
-          optional: true,
-          default: "none",
-          description: "CSS selector for drag handles within items"
-        },
         {
           name: "dragClass",
           type: "string",
@@ -424,32 +417,25 @@ var init_sortable_schema = __esm({
       ],
       requirements: ["Users must handle DOM reordering in sortable:move event handlers"],
       source: `
-behavior Sortable(handle, dragClass)
+behavior Sortable(dragClass)
   init
     if dragClass is undefined
       set dragClass to "sorting"
     end
   end
   on pointerdown(clientY) from me
-    js(me, handle, event)
-      var target = event.target;
-      var item = target.closest("li");
-      if (!item || !me.contains(item)) return false;
-      if (handle && !target.closest(handle)) return false;
-      event.preventDefault();
-      event.stopPropagation();
-      return true;
-    end
-    if it is false
+    set item to the closest <li/> to the target
+    if item is null
       exit
     end
-    add .{dragClass} to me
+    halt the event
+    add .{dragClass} to item
     trigger sortable:start on me
     repeat until event pointerup from document
       wait for pointermove(clientY) from document
       trigger sortable:move on me
     end
-    remove .{dragClass} from me
+    remove .{dragClass} from item
     trigger sortable:end on me
   end
 end`.trim()
@@ -507,7 +493,7 @@ async function registerSortable(hyperfixi) {
   const syntheticNode = {
     type: "behavior",
     name: "Sortable",
-    parameters: ["handle", "dragClass"],
+    parameters: ["dragClass"],
     eventHandlers: [],
     imperativeInstaller: installSortable
   };
@@ -545,13 +531,6 @@ var init_resizable_schema = __esm({
       version: "1.0.0",
       description: "Makes elements resizable by dragging",
       parameters: [
-        {
-          name: "handle",
-          type: "selector",
-          optional: true,
-          default: "me",
-          description: "CSS selector for the resize handle (defaults to the element itself)"
-        },
         {
           name: "minWidth",
           type: "number",
@@ -587,25 +566,8 @@ var init_resizable_schema = __esm({
         { name: "resizable:end", description: "Fired when resize completes" }
       ],
       source: `
-behavior Resizable(handle, minWidth, minHeight, maxWidth, maxHeight)
-  init
-    if handle is undefined
-      set handle to me
-    end
-    if minWidth is undefined
-      set minWidth to 50
-    end
-    if minHeight is undefined
-      set minHeight to 50
-    end
-    if maxWidth is undefined
-      set maxWidth to 9999
-    end
-    if maxHeight is undefined
-      set maxHeight to 9999
-    end
-  end
-  on pointerdown(clientX, clientY) from handle
+behavior Resizable(minWidth, minHeight, maxWidth, maxHeight)
+  on pointerdown(clientX, clientY) from me
     halt the event
     trigger resizable:start
     measure width
@@ -615,13 +577,15 @@ behavior Resizable(handle, minWidth, minHeight, maxWidth, maxHeight)
     set startX to clientX
     set startY to clientY
     repeat until event pointerup from document
-      wait for pointermove(clientX, clientY) or pointerup from document
-      js(startWidth, startHeight, clientX, clientY, startX, startY, minWidth, maxWidth, minHeight, maxHeight, me)
-        var nw = Math.max(minWidth, Math.min(maxWidth, startWidth + (clientX - startX)));
-        var nh = Math.max(minHeight, Math.min(maxHeight, startHeight + (clientY - startY)));
-        me.style.width = nw + 'px';
-        me.style.height = nh + 'px';
-      end
+      wait for pointermove(clientX, clientY) from document
+      set newWidth to startWidth + clientX - startX
+      set newHeight to startHeight + clientY - startY
+      if newWidth < minWidth then set newWidth to minWidth end
+      if newWidth > maxWidth then set newWidth to maxWidth end
+      if newHeight < minHeight then set newHeight to minHeight end
+      if newHeight > maxHeight then set newHeight to maxHeight end
+      set my style.width to newWidth + "px"
+      set my style.height to newHeight + "px"
       trigger resizable:resize
     end
     trigger resizable:end
@@ -687,7 +651,7 @@ async function registerResizable(hyperfixi) {
   const syntheticNode = {
     type: "behavior",
     name: "Resizable",
-    parameters: ["handle", "minWidth", "minHeight", "maxWidth", "maxHeight"],
+    parameters: [],
     eventHandlers: [],
     imperativeInstaller: installResizable
   };