phlex-reactive 0.16.2 → 0.16.4

data/app/javascript/phlex/reactive/runtime.js

@@ -1751,9 +1751,28 @@ function keyFilterMatches(filter, event, keyMappings) {
 // its bare keydown hears every key, and this check alone picks the chord.
 // (Stimulus typecasts a digit shortcut, "1", to a number: hence String().)
 const shortcutKeys = (spec) => (spec && typeof spec === "object" ? spec.keys : String(spec))
+// Issue #429: the keydowns a shortcut prevented itself. A key another handler
+// already claimed (the drag feature's Escape cancelling a drag, an
+// element-bound keydown binding) is not the shortcut's — unless it says so,
+// `handled: true` — but a shortcut's OWN preventDefault does not count: two
+// shortcuts on one chord both run. Nor does early.js's, made for a shortcut
+// whose root had not connected: it adds the event to this same set (shared
+// through the early state), and its replay reads as not prevented. (So while
+// such a root is on the page, early.js's capture-phase preventDefault lands
+// before a drag's, and that Escape still runs the shortcuts on its chord — as
+// before #429: a preventDefault cannot tell who came second.)
+const shortcutPrevented = () => (earlyState().prevented ??= new WeakSet())
+// A trigger's preventDefault, a shortcut's remembered as its own (only when
+// nothing prevented the key first: handled: true on a handled key does not
+// make it the next shortcut's).
+function preventTrigger(event, shortcut) {
+  if (shortcut != null && !event.defaultPrevented) shortcutPrevented().add(event)
+  event.preventDefault()
+}
 // A shortcut record keeps a bare `on: "keydown"`, so bindingMatches lets every
 // keydown through and this check, per record, picks the chord that fired.
 function shortcutApplies(spec, event, keyMappings) {
+  if (event.defaultPrevented && spec?.handled !== true && !shortcutPrevented().has(event)) return false
   const target = event.target
   if (spec?.inEditable !== true && (target?.isContentEditable || /^(input|textarea|select)$/.test(target?.localName)))
     return false
@@ -2474,7 +2493,9 @@ function earlyReplayEvent(event, el, win) {
     submitter: event.submitter,
     bubbles: event.bubbles,
     timeStamp: event.timeStamp,
-    defaultPrevented: event.defaultPrevented,
+    // Not when early.js prevented it for a shortcut (issue #429): a shortcut
+    // skips only a key some OTHER handler prevented first.
+    defaultPrevented: event.defaultPrevented && !shortcutPrevented().has(event),
     preventDefault() {},
     stopPropagation() {},
     stopImmediatePropagation() {},
@@ -3255,7 +3276,8 @@ export default class extends Controller {
     // A shortcut (issue #357) IS prevented: its key filter has already narrowed
     // the window binding to one chord the page claims (mod+s must not also open
     // the browser's save dialog).
-    if ((shortcut != null || !windowBound) && !this.#keepsNativeToggle(optimistic, target)) event.preventDefault()
+    if ((shortcut != null || !windowBound) && !this.#keepsNativeToggle(optimistic, target))
+      preventTrigger(event, shortcut)
 
     // A reactive_lazy(on:) shell's trigger (issue #276) goes through the one
     // materialize entry point, which dedupes it against the observer, the
@@ -3374,8 +3396,12 @@ export default class extends Controller {
     // Held past this event's dispatch: cancel its native default NOW, by
     // dispatch()'s own rule, or a submit/link would act before the request.
     const { shortcut, window: windowBound, optimistic } = event.params
+    // A shortcut that does not apply (the other twin, a field, a key handled
+    // first) is neither prevented nor held, as dispatch() would leave it.
+    if (shortcut != null && !shortcutApplies(shortcut, event, this.application?.schema?.keyMappings)) return
     const target = event.currentTarget ?? event.target
-    if ((shortcut != null || !windowBound) && !this.#keepsNativeToggle(optimistic, target)) event.preventDefault()
+    if ((shortcut != null || !windowBound) && !this.#keepsNativeToggle(optimistic, target))
+      preventTrigger(event, shortcut)
     heldForwards.set(root, [...(heldForwards.get(root) ?? []), [event, target]])
     const data = root.dataset
     if (data.reactiveDormant) {
@@ -3463,7 +3489,7 @@ export default class extends Controller {
     // (possibly async) confirm gate below — a native default can't wait for a
     // pending dialog (same ordering as dispatch()).
     // A shortcut (issue #357) is prevented: it is one chord the page claims.
-    if (shortcut != null || !windowBound) event.preventDefault()
+    if (shortcut != null || !windowBound) preventTrigger(event, shortcut)
 
     // Resolve the effective confirm message — static string, or the conditional
     // Hash form (issue #179) evaluated over collected fields (a promise of it

data/lib/phlex/reactive/component/drag.rb

@@ -9,7 +9,8 @@ module Phlex
       # Draggable regions (issue #416): a box that moves and resizes inside a
       # frame, or a point that moves inside it, with the result in fields as
       # fractions of the frame — 0..1 on each axis, so a resize, a responsive
-      # layout or a morph changes nothing about them.
+      # layout or a morph changes nothing about them. With scale: 100 the
+      # fields hold percentages instead (issue #428).
       #
       #   div(**mix(reactive_frame, class: "relative")) do
       #     img(src: @photo.url, alt: "", class: "block w-full")
@@ -67,14 +68,17 @@ module Phlex
         #   aspect:    a Numeric ratio (16/9r), or the name of a field holding one
         #              ("16:9", "1.5", or "" for free), read at drag start
         #   min:       the smallest width/height, a fraction of the frame
+        #   scale:     what the fields hold: the fraction times this (100: percent,
+        #              2 decimals); value:, the style and the action's params stay fractions
         #   action:    sent once on release, with x/y/width/height params
         #   busy:      on(busy:)'s vocabulary, applied while that action is pending
         #   messages:  the live-region words, merged over DRAG_MESSAGES
-        def reactive_box(fields:, value:, aspect: nil, min: 0.05, action: nil, busy: nil, messages: nil)
+        def reactive_box(fields:, value:, aspect: nil, min: 0.05, scale: 1, action: nil, busy: nil, messages: nil)
           fields = drag_fields!(:reactive_box, fields, BOX_KEYS)
           value = drag_value!(:reactive_box, value, BOX_KEYS)
           drag_inside_frame!(value)
           data = { reactive_box: fields.to_json, reactive_box_min: drag_min!(min) }
+          drag_scale!(:reactive_box, scale, data)
           drag_aspect!(aspect, data) unless aspect.nil?
           drag_action!(:reactive_box, action, busy, data)
           data[:reactive_box_messages] = drag_messages!(:reactive_box, messages)
@@ -99,12 +103,14 @@ module Phlex
 
         # A point (its centre) that moves inside the frame — or, with within:,
         # inside the element it sits in that matches the selector (a box): its
-        # fractions are then of that element, and it moves with it.
-        def reactive_point(fields:, value:, within: nil, action: nil, busy: nil, messages: nil)
+        # fractions are then of that element, and it moves with it. scale: is
+        # reactive_box's.
+        def reactive_point(fields:, value:, within: nil, scale: 1, action: nil, busy: nil, messages: nil)
           fields = drag_fields!(:reactive_point, fields, POINT_KEYS)
           value = drag_value!(:reactive_point, value, POINT_KEYS)
           data = { reactive_point: fields.to_json }
           data[:reactive_point_within] = drag_within!(within) unless within.nil?
+          drag_scale!(:reactive_point, scale, data)
           drag_action!(:reactive_point, action, busy, data)
           data[:reactive_point_messages] = drag_messages!(:reactive_point, messages)
           style = "position: absolute; left: #{drag_percent(value[:x])}; top: #{drag_percent(value[:y])}; " \
@@ -180,6 +186,22 @@ module Phlex
             "reactive_box min: must be a fraction of the frame above 0 and at most 1 (e.g. 0.05), got #{min.inspect}"
         end
 
+        # Issue #428: the fields' scale, written only when it is not 1, so a
+        # region without scale: renders as it always did. The browser reads it
+        # as a Float, so one that is Infinity (10**400) or 0 (1/10**400) as a
+        # Float is refused, like a Float that is.
+        def drag_scale!(helper, scale, data)
+          float = scale.to_f if scale.is_a?(Numeric) && scale.real?
+          unless float&.finite? && float.positive?
+            raise ArgumentError,
+              "#{helper} scale: must be a positive finite Numeric (100: percent), got #{scale.inspect}"
+          end
+          return if scale == 1
+
+          # (A Rational would render as "1000/3", which the browser cannot read.)
+          data[:"#{helper}_scale"] = scale.is_a?(Integer) || scale.is_a?(Float) ? scale : float
+        end
+
         def drag_aspect!(aspect, data)
           if aspect.is_a?(Numeric) && aspect.real? && aspect.positive? && aspect.finite?
             data[:reactive_box_ratio] = aspect.to_f

data/lib/phlex/reactive/component/helpers.rb

@@ -313,10 +313,13 @@ module Phlex
         # runs the one for its platform). Unlike a plain window binding, the
         # client prevents the chord's native default, and it skips the chord
         # while focus is in an input, textarea, select or contenteditable
-        # (native text undo keeps working) unless the Hash form opts in. It
-        # decides event:, window: and outside:, so passing one raises.
+        # (native text undo keeps working) unless the Hash form opts in. A
+        # keydown another handler already prevented (the drag's Escape
+        # cancelling a drag) is skipped too, unless `handled: true` (issue
+        # #429). It decides event:, window: and outside:, so passing one raises.
         #   span(**on(:undo, shortcut: "mod+z"))
         #   span(**on(:close, shortcut: { keys: "esc", in_editable: true }))
+        #   span(**on(:leave, shortcut: { keys: "esc", handled: true }))
         #
         # `optimistic:` (issue #98) — a small, ALWAYS-REVERSIBLE vocabulary of
         # COSMETIC hints the client applies the instant the trigger fires and
@@ -741,7 +744,18 @@ module Phlex
         # exactly one of field/input: per call — the field form stays the
         # blessed default:
         #   reactive_filter(input: "#user_tags_query")
-        def reactive_filter(field = nil, input: nil, option: nil, group: nil, empty: nil)
+        #
+        # Issue #425: `match:` picks where the query must sit in the haystack —
+        # :substring (anywhere, the default), :prefix (at its start) or
+        # :word_start (at its start, or right after whitespace or one of
+        # - ' ( ) , . /). A long alphabetical list (countries, cities, people)
+        # wants :word_start, so "n" keeps Nantes and New York, not every name
+        # with an n in it. `fold: true` folds diacritics on BOTH sides before
+        # comparing, so "zur" finds Zürich and "zür" still does. The defaults
+        # emit nothing, so an existing filter's wire is byte-identical:
+        #   reactive_filter(:q, match: :word_start, fold: true)
+        def reactive_filter(field = nil, input: nil, option: nil, group: nil, empty: nil,
+                            match: :substring, fold: false)
           # nil-presence, NOT truthiness: `input: cond && "#sel"` with cond false
           # must fail loudly in filter_selector! below (a boolean is never a
           # selector), never slip into the field branch and emit a dead binding.
@@ -768,6 +782,10 @@ module Phlex
           # byte-stable wire and always-emit an attribute the client would then query).
           data[:reactive_filter_group] = filter_selector!(:group, group) if group
           data[:reactive_filter_empty] = filter_selector!(:empty, empty) if empty
+          # match:/fold: too (issue #425): the defaults emit nothing.
+          mode = filter_match!(match)
+          data[:reactive_filter_match] = mode.to_s unless mode == :substring
+          data[:reactive_filter_fold] = "true" if fold
 
           { data: }
         end
@@ -1427,8 +1445,24 @@ module Phlex
         LEGACY_SHOW_PREDICATE_KEYS = %i[equals not in gte gt lte lt].freeze
         LEGACY_SHOW_CONNECTIVE_KEYS = %i[all any].freeze
 
+        # reactive_filter's match: modes (issue #425), in the order the error names them.
+        FILTER_MATCH_MODES = %i[substring prefix word_start].freeze
+        private_constant :FILTER_MATCH_MODES
+
         private
 
+        # reactive_filter's match: (issue #425), a Symbol or a String naming one
+        # of FILTER_MATCH_MODES (the reactive_persist storage: precedent).
+        # Anything else raises at render: the client would fall back to
+        # substring matching and the list would narrow the wrong way.
+        def filter_match!(match)
+          mode = match.to_sym if match.is_a?(Symbol) || match.is_a?(String)
+          return mode if FILTER_MATCH_MODES.include?(mode)
+
+          raise ArgumentError,
+            "reactive_filter match: must be one of #{FILTER_MATCH_MODES.join(", ")}, got #{match.inspect}"
+        end
+
         # A reactive_filter/reactive_listnav selector, validated non-blank and
         # stringified (issue #163). A blank selector is a dead binding — the
         # client would silently match nothing — so it fails loudly at render,

data/lib/phlex/reactive/component/identity.rb

@@ -10,7 +10,7 @@ module Phlex
       #
       # THE token hot path. Both memos below are bare defined?/||= fast paths
       # ON PURPOSE: a render must never pay a per-read generation compare
-      # (issue #115 invariant, .claude/rules/performance.md). Coherence comes
+      # (issue #115 invariant, AGENTS.md → Performance). Coherence comes
       # from the WRITE side instead — Component::Registry.bump! sweeps these
       # memos off the declaring class and all its descendants whenever any
       # registry declaration lands (class-load-shaped, rare), so they can't go

data/lib/phlex/reactive/shortcut.rb

@@ -7,13 +7,16 @@ module Phlex
     #
     #   Shortcut.parse("mod+z")                          # String form
     #   Shortcut.parse({ keys: "esc", in_editable: true }) # Hash form
+    #   Shortcut.parse({ keys: "esc", handled: true })     # runs on a handled key
     #
     # `mod` is meta on Apple platforms and ctrl elsewhere. Stimulus has no
     # "either" modifier (its key filter compares all four modifier flags
     # exactly), so a `mod` chord renders TWO descriptors, a meta twin and a ctrl
     # twin, and the client runs only the twin for its platform. Stimulus keeps
     # the key filtering; the client adds the platform check, the editable-target
-    # guard and preventDefault. The exception is a key Stimulus's default map
+    # guard, the handled-key skip (issue #429: a keydown another handler already
+    # prevented is not the shortcut's, unless `handled: true`) and
+    # preventDefault. The exception is a key Stimulus's default map
     # lacks (delete, backspace — issue #366): it binds a bare window keydown,
     # no twins, and the client matches the whole chord.
     #
@@ -28,7 +31,7 @@ module Phlex
       # `keydown@window` and the client alone matches it.
       LIBRARY_KEYS = %w[delete backspace].freeze
       NAMED_KEYS = (STIMULUS_KEYS + LIBRARY_KEYS).freeze
-      HASH_KEYS = %i[keys in_editable].freeze
+      HASH_KEYS = %i[keys in_editable handled].freeze
 
       private_constant :MODIFIERS, :STIMULUS_KEYS, :LIBRARY_KEYS, :NAMED_KEYS, :HASH_KEYS
 
@@ -36,34 +39,38 @@ module Phlex
 
       def self.parse(spec)
         case spec
-        when String then new(spec, in_editable: false)
+        when String then new(spec, in_editable: false, handled: false)
         when Hash then from_hash(spec)
         else
           raise ArgumentError,
-            "shortcut: takes a String (\"mod+z\") or a Hash ({ keys: \"esc\", in_editable: true }), " \
-            "got #{spec.inspect}"
+            "shortcut: takes a String (\"mod+z\") or a Hash ({ keys: \"esc\", in_editable: true, " \
+            "handled: true }), got #{spec.inspect}"
         end
       end
 
       def self.from_hash(spec)
         keys = spec[:keys]
         in_editable = spec.fetch(:in_editable, false)
+        handled = spec.fetch(:handled, false)
         unless (spec.keys - HASH_KEYS).empty? && keys.is_a?(String)
           raise ArgumentError,
-            "shortcut: as a Hash takes keys: (a String, e.g. \"esc\") and an optional " \
-            "in_editable: (true/false), got #{spec.inspect}"
+            "shortcut: as a Hash takes keys: (a String, e.g. \"esc\") and optional " \
+            "in_editable: and handled: (true/false), got #{spec.inspect}"
         end
-        unless [true, false].include?(in_editable)
-          raise ArgumentError, "shortcut: in_editable: is true or false, got #{in_editable.inspect}"
+        { in_editable:, handled: }.each do |name, value|
+          next if [true, false].include?(value)
+
+          raise ArgumentError, "shortcut: #{name}: is true or false, got #{value.inspect}"
         end
 
-        new(keys, in_editable:)
+        new(keys, in_editable:, handled:)
       end
       private_class_method :from_hash
 
-      def initialize(keys, in_editable:)
+      def initialize(keys, in_editable:, handled:)
         tokens = keys.downcase.split("+").map(&:strip)
         @in_editable = in_editable
+        @handled = handled
         @keys = canonical(keys, tokens).freeze
         freeze
       end
@@ -83,8 +90,13 @@ module Phlex
 
       # The wire form the client reads (data-reactive-shortcut-param, or the
       # on_client record's "shortcut"): the canonical String, or the Hash form
-      # when the shortcut also fires inside editable targets.
-      def param = @in_editable ? { "keys" => @keys, "inEditable" => true } : @keys
+      # when the shortcut also fires inside editable targets and/or on a key
+      # another handler already prevented (issue #429).
+      def param
+        return @keys unless @in_editable || @handled
+
+        { "keys" => @keys, "inEditable" => (true if @in_editable), "handled" => (true if @handled) }.compact
+      end
 
       private
 

data/lib/phlex/reactive/version.rb

@@ -2,6 +2,6 @@
 
 module Phlex
   module Reactive
-    VERSION = "0.16.2"
+    VERSION = "0.16.4"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: phlex-reactive
 version: !ruby/object:Gem::Version
-  version: 0.16.2
+  version: 0.16.4
 platform: ruby
 authors:
 - Mikael Henriksson