view_component_atomix 0.1.0

data/lib/view_component/atomix/known_properties.rb

@@ -0,0 +1,102 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module Atomix
+    module Property
+      KNOWN = %w[
+        accent-color align-content align-items align-self alignment-baseline all anchor-name anchor-scope
+        animation animation-composition animation-delay animation-direction animation-duration
+        animation-fill-mode animation-iteration-count animation-name animation-play-state
+        animation-range animation-range-end animation-range-start animation-timeline
+        animation-timing-function appearance aspect-ratio backdrop-filter backface-visibility
+        background background-attachment background-blend-mode background-clip background-color
+        background-image background-origin background-position background-position-x
+        background-position-y background-repeat background-size baseline-shift baseline-source
+        block-size border border-block border-block-color border-block-end border-block-end-color
+        border-block-end-style border-block-end-width border-block-start border-block-start-color
+        border-block-start-style border-block-start-width border-block-style border-block-width
+        border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius
+        border-bottom-style border-bottom-width border-collapse border-color border-end-end-radius
+        border-end-start-radius border-image border-image-outset border-image-repeat
+        border-image-slice border-image-source border-image-width border-inline border-inline-color
+        border-inline-end border-inline-end-color border-inline-end-style border-inline-end-width
+        border-inline-start border-inline-start-color border-inline-start-style
+        border-inline-start-width border-inline-style border-inline-width border-left
+        border-left-color border-left-style border-left-width border-radius border-right
+        border-right-color border-right-style border-right-width border-spacing
+        border-start-end-radius border-start-start-radius border-style border-top border-top-color
+        border-top-left-radius border-top-right-radius border-top-style border-top-width
+        border-width bottom box-decoration-break box-shadow box-sizing break-after break-before
+        break-inside caption-side caret caret-color caret-shape clear clip clip-path clip-rule
+        color color-interpolation color-interpolation-filters color-scheme column-count column-fill
+        column-gap column-rule column-rule-color column-rule-style column-rule-width column-span
+        column-width columns contain contain-intrinsic-block-size contain-intrinsic-height
+        contain-intrinsic-inline-size contain-intrinsic-size contain-intrinsic-width container
+        container-name container-type content content-visibility corner-shape counter-increment
+        counter-reset counter-set cursor direction display dominant-baseline empty-cells
+        field-sizing fill fill-opacity fill-rule filter flex flex-basis flex-direction flex-flow
+        flex-grow flex-shrink flex-wrap float flood-color flood-opacity font font-family
+        font-feature-settings font-kerning font-language-override font-optical-sizing font-palette
+        font-size font-size-adjust font-stretch font-style font-synthesis font-synthesis-small-caps
+        font-synthesis-style font-synthesis-weight font-variant font-variant-alternates
+        font-variant-caps font-variant-east-asian font-variant-emoji font-variant-ligatures
+        font-variant-numeric font-variant-position font-variation-settings font-weight
+        forced-color-adjust gap grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows
+        grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end
+        grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns
+        grid-template-rows hanging-punctuation height hyphenate-character hyphenate-limit-chars
+        hyphens image-orientation image-rendering initial-letter inline-size inset inset-block
+        inset-block-end inset-block-start inset-inline inset-inline-end inset-inline-start
+        interpolate-size isolation justify-content justify-items justify-self left letter-spacing
+        lighting-color line-break line-clamp line-height list-style list-style-image
+        list-style-position list-style-type margin margin-block margin-block-end margin-block-start
+        margin-bottom margin-inline margin-inline-end margin-inline-start margin-left margin-right
+        margin-top margin-trim marker marker-end marker-mid marker-start mask mask-border
+        mask-border-mode mask-border-outset mask-border-repeat mask-border-slice mask-border-source
+        mask-border-width mask-clip mask-composite mask-image mask-mode mask-origin mask-position
+        mask-repeat mask-size mask-type math-depth math-shift math-style max-block-size max-height
+        max-inline-size max-width min-block-size min-height min-inline-size min-width mix-blend-mode
+        object-fit object-position offset offset-anchor offset-distance offset-path offset-position
+        offset-rotate opacity order orphans outline outline-color outline-offset outline-style
+        outline-width overflow overflow-anchor overflow-block overflow-clip-margin overflow-inline
+        overflow-wrap overflow-x overflow-y overlay overscroll-behavior overscroll-behavior-block
+        overscroll-behavior-inline overscroll-behavior-x overscroll-behavior-y padding padding-block
+        padding-block-end padding-block-start padding-bottom padding-inline padding-inline-end
+        padding-inline-start padding-left padding-right padding-top page page-break-after
+        page-break-before page-break-inside paint-order perspective perspective-origin place-content
+        place-items place-self pointer-events position position-anchor position-area position-try
+        position-try-fallbacks position-try-order position-visibility print-color-adjust quotes
+        resize right rotate row-gap ruby-align ruby-position scale scroll-behavior
+        scroll-margin scroll-margin-block scroll-margin-block-end scroll-margin-block-start
+        scroll-margin-bottom scroll-margin-inline scroll-margin-inline-end scroll-margin-inline-start
+        scroll-margin-left scroll-margin-right scroll-margin-top scroll-padding scroll-padding-block
+        scroll-padding-block-end scroll-padding-block-start scroll-padding-bottom
+        scroll-padding-inline scroll-padding-inline-end scroll-padding-inline-start
+        scroll-padding-left scroll-padding-right scroll-padding-top scroll-snap-align
+        scroll-snap-stop scroll-snap-type scroll-timeline scroll-timeline-axis scroll-timeline-name
+        scrollbar-color scrollbar-gutter scrollbar-width shape-image-threshold shape-margin
+        shape-outside shape-rendering stop-color stop-opacity stroke stroke-dasharray
+        stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity
+        stroke-width tab-size table-layout text-align text-align-last text-anchor text-autospace
+        text-box text-box-edge text-box-trim text-combine-upright text-decoration
+        text-decoration-color text-decoration-line text-decoration-skip text-decoration-skip-ink
+        text-decoration-style text-decoration-thickness text-emphasis text-emphasis-color
+        text-emphasis-position text-emphasis-style text-indent text-justify text-orientation
+        text-overflow text-rendering text-shadow text-size-adjust text-spacing-trim text-transform
+        text-underline-offset text-underline-position text-wrap text-wrap-mode text-wrap-style top
+        touch-action transform transform-box transform-origin transform-style transition
+        transition-behavior transition-delay transition-duration transition-property
+        transition-timing-function translate unicode-bidi user-select vector-effect vertical-align
+        view-timeline view-timeline-axis view-timeline-inset view-timeline-name view-transition-class
+        view-transition-name visibility white-space white-space-collapse widows width will-change
+        word-break word-spacing word-wrap writing-mode z-index zoom
+      ].to_set.freeze
+
+      module_function
+
+      def known?(property)
+        KNOWN.include?(property) || property.start_with?("--", "-webkit-", "-moz-", "-ms-", "-o-")
+      end
+    end
+  end
+end

data/lib/view_component/atomix/owner_state.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module Atomix
+    # Resolution state is resettable. Installed accessor names and mixin
+    # metadata belong to Accessors and survive resets. Unload is terminal for
+    # this owner; Rails creates a new owner when it loads the constant again.
+    class OwnerState
+      attr_accessor :styles_own, :styles_resolved, :styles_breakpoints, :styles_resolving, :variables_resolving,
+                    :theme_own, :theme_resolved, :theme_resolving, :companion_styles_module
+      attr_reader :styles, :variables, :themes
+
+      def initialize
+        clear
+      end
+
+      def reset!
+        ResolutionSession.stale!
+        clear
+      end
+
+      def unload!
+        @unloaded = true
+        invalidate!
+      end
+
+      def unloaded?
+        @unloaded == true
+      end
+
+      def invalidate!
+        ResolutionSession.stale!
+        @styles_resolved = @theme_resolved = nil
+      end
+
+      private
+
+      def clear
+        @styles_own = @styles_resolved = @styles_breakpoints = nil
+        @styles_resolving = @variables_resolving = @theme_resolving = false
+        @theme_own = @theme_resolved = @companion_styles_module = nil
+        @styles = DeclarationQueue.new
+        @variables = DeclarationQueue.new
+        @themes = DeclarationQueue.new
+      end
+    end
+  end
+end

data/lib/view_component/atomix/property.rb

@@ -0,0 +1,183 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module Atomix
+    module Property
+      SHORTHANDS_OF_SHORTHANDS = %w[
+        animation background border font grid grid-area
+        inset margin mask padding scroll-margin scroll-padding
+      ].to_set.freeze
+
+      TIME_PROPERTIES = %w[
+        animation-delay animation-duration transition-delay transition-duration voice-duration
+      ].to_set.freeze
+
+      ADDITIONAL_UNITLESS = %w[
+        -webkit-line-clamp counter-set counter-reset hyphenate-limit-chars
+        mask-border-outset mask-border-slice mask-border-width rotate
+        shape-image-threshold math-depth
+      ].to_set.freeze
+
+      # These shorthands sit between their parent shorthand and other shorthands.
+      INTERMEDIATE_SHORTHANDS = %w[border-block border-inline grid-template].to_set.freeze
+
+      SHORTHANDS_OF_LONGHANDS = %w[
+        animation-range background-position border-block-color border-block-end border-block-start
+        border-block-style border-block-width border-bottom border-color
+        border-image border-inline-color border-inline-end border-inline-start border-inline-style
+        border-inline-width border-left border-radius border-right border-style border-top border-width
+        caret column-rule columns
+        contain-intrinsic-size container corner-shape flex flex-flow font-synthesis font-variant gap grid-column
+        grid-gap grid-row inset-block inset-inline list-style margin-block
+        margin-inline mask-border offset outline overflow overscroll-behavior padding-block
+        padding-inline place-content place-items place-self position-try scroll-margin-block scroll-margin-inline
+        scroll-padding-block scroll-padding-inline scroll-timeline text-box text-decoration
+        text-emphasis text-wrap transition view-timeline white-space
+      ].to_set.freeze
+
+      UNITLESS = %w[
+        animation-iteration-count aspect-ratio border-image-outset border-image-slice
+        border-image-width box-flex box-flex-group box-ordinal-group column-count columns fill-opacity
+        flex flex-grow flex-negative flex-order flex-positive flex-shrink flood-opacity font-weight
+        grid-area grid-column grid-column-end grid-column-span grid-column-start grid-row
+        grid-row-end grid-row-span grid-row-start line-clamp line-height opacity order orphans
+        scale stop-opacity stroke-dasharray stroke-dashoffset stroke-miterlimit stroke-opacity
+        stroke-width tab-size widows z-index zoom
+      ].to_set.freeze
+
+      AT_RULE_PRIORITIES = {
+        "@supports" => 30,
+        "@media" => 200,
+        "@container" => 300
+      }.freeze
+
+      PSEUDO_CLASS_PRIORITIES = {
+        ":is" => 40, ":where" => 40, ":not" => 40, ":has" => 45, ":dir" => 50, ":lang" => 51,
+        ":first-child" => 52, ":first-of-type" => 53, ":last-child" => 54, ":last-of-type" => 55,
+        ":only-child" => 56, ":only-of-type" => 57, ":nth-child" => 60, ":nth-last-child" => 61,
+        ":nth-of-type" => 62, ":nth-last-of-type" => 63, ":empty" => 70, ":link" => 80,
+        ":any-link" => 81, ":local-link" => 82, ":target-within" => 83, ":target" => 84,
+        ":visited" => 85, ":enabled" => 91, ":disabled" => 92, ":required" => 93, ":optional" => 94,
+        ":read-only" => 95, ":read-write" => 96, ":placeholder-shown" => 97, ":in-range" => 98,
+        ":out-of-range" => 99, ":default" => 100, ":checked" => 101, ":indeterminate" => 101,
+        ":blank" => 102, ":valid" => 103, ":invalid" => 104, ":user-invalid" => 105,
+        ":autofill" => 110, ":picture-in-picture" => 120, ":modal" => 121, ":fullscreen" => 122,
+        ":paused" => 123, ":playing" => 124, ":current" => 125, ":past" => 126, ":future" => 127,
+        ":hover" => 130, ":focus-within" => 140, ":focus" => 150, ":focus-visible" => 160,
+        ":active" => 170
+      }.freeze
+
+      DEFAULT_PSEUDO_CLASS_PRIORITY = 40
+      PSEUDO_ELEMENT_PRIORITY = 5000
+      LOGICAL_PATTERN = /(^|-)(block|inline|start|end)(-|$)/
+
+      STRUCTURAL_CHARACTERS = %r{[;{}()\[\]"'\\]|/\*}
+      PLAIN_TEXT = %r{[^;{}()\[\]"'\\/]+}
+      ESCAPE = /\\(?:\h{1,6}(?:\r\n|[ \t\n\r\f])?|.)/m
+      DOUBLE_QUOTED = /"(?:[^"\\\n\r\f]|\\.)*"/m
+      SINGLE_QUOTED = /'(?:[^'\\\n\r\f]|\\.)*'/m
+      COMMENT = %r{/\*.*?\*/}m
+      NAME = /\A(?:[a-zA-Z0-9_\-\x00]|[^\x00-\x7F])*\z/
+      URL_NAME = /(?<![a-zA-Z0-9_\-\x00]|[^\x00-\x7F])url\z/i
+      SPLIT_URL_NAME = /(?:[#@]|<!--)url\z/i
+      QUOTED_URL = /\([ \t\n\r\f]*["']/
+      UNQUOTED_URL = /\([ \t\n\r\f]*(?:[^"'()\\\x00-\x20\x7F]|\\[^\n\r\f])*[ \t\n\r\f]*\)/
+      CLOSERS = { "(" => ")", "[" => "]", "{" => "}" }.freeze
+
+      module_function
+
+      def normalize_key(key)
+        name = key.to_s
+        return name if name.start_with?("--")
+
+        name.gsub(/([a-z\d])([A-Z])/, '\1-\2').tr("_", "-").downcase
+      end
+
+      def normalize_value(property, value)
+        case value
+        when Array then value.map { |v| normalize_value(property, v) }
+        when Integer, Float
+          return value.to_s if property.start_with?("--") || ADDITIONAL_UNITLESS.include?(property)
+          return "#{value}ms" if TIME_PROPERTIES.include?(property)
+          return "0" if value.zero?
+          UNITLESS.include?(property) ? value.to_s : "#{value}px"
+        when Symbol then validate_value!(property, value.to_s.tr("_", "-"))
+        else validate_value!(property, value.to_s)
+        end
+      end
+
+      def validate_value!(property, value)
+        return value unless value.match?(STRUCTURAL_CHARACTERS)
+        return value if self_contained?(value)
+
+        raise ArgumentError,
+              "Unsafe CSS value for #{property}: #{value.inspect}. A value cannot contain a top-level ';' " \
+              "or unbalanced quotes, brackets or comments."
+      end
+
+      def self_contained?(value)
+        open = []
+        scanner = StringScanner.new(value)
+        word = nil
+        escaped = false
+        until scanner.eos?
+          if (text = scanner.scan(PLAIN_TEXT))
+            word = text
+            next
+          end
+          if scanner.skip(ESCAPE)
+            word = nil
+            escaped = true
+            next
+          end
+
+          url = scanner.match?(/\(/) && url_token(scanner, word.to_s, escaped)
+          word = nil
+          escaped = false
+          return false if url == :malformed
+          next if url == :consumed || scanner.skip(DOUBLE_QUOTED) || scanner.skip(SINGLE_QUOTED) || scanner.skip(COMMENT)
+
+          if scanner.match?(%r{/\*}) then return false
+          elsif scanner.skip(%r{/}) then next
+          elsif (bracket = scanner.scan(/[(\[{]/)) then open << CLOSERS.fetch(bracket)
+          elsif (bracket = scanner.scan(/[)\]}]/)) then return false unless open.pop == bracket
+          elsif scanner.skip(/;/) then return false if open.empty?
+          else return false
+          end
+        end
+        open.empty?
+      end
+
+      def url_token(scanner, name, escaped)
+        return :malformed if (escaped && name.match?(NAME)) || name.match?(SPLIT_URL_NAME)
+        return unless name.match?(URL_NAME) && !scanner.match?(QUOTED_URL)
+
+        scanner.skip(UNQUOTED_URL) ? :consumed : :malformed
+      end
+
+      def base_priority(property)
+        return 500 if property == "all"
+        return 1000 if SHORTHANDS_OF_SHORTHANDS.include?(property)
+        return 1500 if INTERMEDIATE_SHORTHANDS.include?(property)
+        return 2000 if SHORTHANDS_OF_LONGHANDS.include?(property)
+        return 3000 if property.match?(LOGICAL_PATTERN)
+
+        4000
+      end
+
+      def condition_priority(condition)
+        if condition.start_with?("@")
+          AT_RULE_PRIORITIES.fetch(condition.split(/[\s(]/, 2).first, AT_RULE_PRIORITIES["@media"])
+        elsif condition.start_with?("::")
+          PSEUDO_ELEMENT_PRIORITY
+        else
+          PSEUDO_CLASS_PRIORITIES.fetch(condition.split("(", 2).first, DEFAULT_PSEUDO_CLASS_PRIORITY)
+        end
+      end
+
+      def priority(property, conditions = [])
+        conditions.sum(base_priority(property)) { |c| condition_priority(c) }
+      end
+    end
+  end
+end

data/lib/view_component/atomix/railtie.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+require "rails/railtie"
+
+module ViewComponent
+  module Atomix
+    class Railtie < Rails::Railtie
+      config.before_configuration do |app|
+        app.config.view_component.atomix = ViewComponent::Atomix.config
+        ViewComponent::Atomix.config.inline = !Rails.env.production?
+      end
+
+      initializer "view_component.atomix.autoload_roots", before: :set_load_path do |app|
+        ViewComponent::Atomix.config.autoload_roots.each do |relative|
+          app.config.paths.add relative.to_s, eager_load: true
+          dir = app.root.join(relative.to_s).to_s
+          next unless File.directory?(dir)
+
+          effective = app.config.respond_to?(:all_eager_load_paths) ? app.config.all_eager_load_paths : app.config.eager_load_paths
+          app.config.eager_load_paths << dir unless effective.include?(dir)
+        end
+      end
+
+      initializer "view_component.atomix.helper" do
+        ActiveSupport.on_load(:action_view) { include ViewComponent::Atomix::Helper }
+      end
+
+      initializer "view_component.atomix.reloader" do
+        Rails.autoloaders.main.on_unload do |_name, owner, source|
+          ViewComponent::Atomix.unload!(owner, source)
+        end
+        ActiveSupport::Reloader.before_class_unload do
+          ViewComponent::Atomix.registry.clear_reloadable
+        end
+      end
+
+      config.to_prepare do
+        ViewComponent::Atomix.eager_load! if ViewComponent::Atomix.config.inline?
+      end
+
+      rake_tasks do
+        load File.expand_path("tasks/build.rake", __dir__)
+      end
+    end
+  end
+end

data/lib/view_component/atomix/registry.rb

@@ -0,0 +1,208 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module Atomix
+    class Registry
+      Registration = Struct.new(:rule, :source, keyword_init: true)
+      RootReplacement = Struct.new(:property, :source, keyword_init: true)
+      Transaction = Struct.new(:registrations, :callbacks, keyword_init: true) do
+        def initialize(registrations: [], callbacks: [])
+          super
+        end
+
+        def absorb(other)
+          registrations.concat(other.registrations)
+          callbacks.concat(other.callbacks)
+        end
+      end
+
+      def initialize
+        @mutex = Mutex.new
+        @rules = {}
+        @root_rules = {}
+        @css = nil
+      end
+
+      def add(rule)
+        entry = Registration.new(rule: rule, source: registration_source)
+        if (pending = transactions.last)
+          pending.registrations << entry
+        else
+          commit(Transaction.new(registrations: [entry]))
+        end
+        rule
+      end
+
+      def after_commit(&block)
+        if (pending = transactions.last)
+          pending.callbacks << block
+        else
+          block.call
+        end
+      end
+
+      # Record the replacement in declaration order, in the same transaction as
+      # its new rules. Empty assignments must also remove the old branches.
+      def replace_root(property)
+        entry = RootReplacement.new(property: property, source: registration_source)
+        if (pending = transactions.last)
+          pending.registrations << entry
+        else
+          commit(Transaction.new(registrations: [entry]))
+        end
+      end
+
+      # Nested operations join their declaration. A separately resolved owner
+      # uses independent: true because its successful result is cached even if
+      # the declaration which requested it subsequently fails.
+      def transaction(independent: false)
+        pending = Transaction.new
+        transactions << pending
+        result = yield
+        if transactions.length > 1 && !independent
+          transactions[-2].absorb(pending)
+        else
+          commit(pending)
+        end
+        result
+      ensure
+        stack = transactions
+        stack.pop
+        Thread.current[:view_component_atomix_transactions].delete(object_id) if stack.empty?
+      end
+
+      def with_source(path)
+        previous = Thread.current[:view_component_atomix_source]
+        Thread.current[:view_component_atomix_source] = path
+        yield
+      ensure
+        Thread.current[:view_component_atomix_source] = previous
+      end
+
+      def clear_reloadable
+        roots = reloadable_roots
+        @mutex.synchronize do
+          @rules.delete_if do |_, sources|
+            sources.delete_if { |source| source && roots.any? { |root| source.start_with?(root) } }
+            sources.empty?
+          end
+          @root_rules.each_value { |rules| rules.select! { |rule| @rules.key?(rule) } }
+          @root_rules.delete_if { |_, rules| rules.empty? }
+          @css = nil
+        end
+      end
+
+      def clear
+        @mutex.synchronize do
+          @rules.clear
+          @root_rules.clear
+          @css = nil
+        end
+      end
+
+      def rules
+        @mutex.synchronize { @rules.keys }
+      end
+
+      def size
+        @mutex.synchronize { @rules.size }
+      end
+
+      def to_css
+        @mutex.synchronize do
+          @css ||= build_css(@rules.keys)
+        end
+      end
+
+      private
+
+      def transactions
+        Thread.current[:view_component_atomix_transactions] ||= {}
+        Thread.current[:view_component_atomix_transactions][object_id] ||= []
+      end
+
+      def commit(transaction)
+        @mutex.synchronize do
+          transaction.registrations.each do |entry|
+            if entry.is_a?(RootReplacement)
+              release_root(entry.property, entry.source)
+            else
+              register(entry.rule, entry.source)
+            end
+          end
+          @css = nil unless transaction.registrations.empty?
+        end
+        transaction.callbacks.each(&:call)
+      end
+
+      def register(rule, source)
+        unless rule.selector == ":root"
+          (@rules[rule] ||= Set.new).add(source)
+          return
+        end
+
+        release_root(rule.property, source) { |existing| existing.conditions == rule.conditions }
+        @rules[rule] = (@rules.delete(rule) || Set.new).add(source)
+        (@root_rules[rule.property] ||= Set.new).add(rule)
+      end
+
+      # Root variables are assignments, unlike content-addressed atoms. Remove
+      # only this source's previous assignment; other owners may still use it.
+      def release_root(property, source)
+        rules = @root_rules[property]
+        return unless rules
+
+        rules.delete_if do |rule|
+          next false if block_given? && !yield(rule)
+
+          sources = @rules.fetch(rule)
+          sources.delete(source)
+          next false unless sources.empty?
+
+          @rules.delete(rule)
+          true
+        end
+        @root_rules.delete(property) if rules.empty?
+      end
+
+      def reloadable_roots
+        return [] unless defined?(Rails) && Rails.respond_to?(:autoloaders) && Rails.application
+
+        Rails.autoloaders.main.dirs.map { |dir| "#{File.expand_path(dir)}/" }
+      end
+
+      def registration_source
+        source = Thread.current[:view_component_atomix_source]
+        return File.expand_path(source) if source
+
+        roots = reloadable_roots
+        caller_locations.each do |location|
+          path = File.expand_path(location.absolute_path || location.path)
+          return path if roots.any? { |root| path.start_with?(root) }
+        end
+        nil
+      end
+
+      def build_css(rules)
+        sorted = rules.sort_by.with_index { |rule, i| [rule.priority, i] }
+
+        unless Atomix.config.use_layers
+          return sorted.map(&:to_css).join("\n")
+        end
+
+        groups = sorted.group_by(&:priority)
+        return "" if groups.empty?
+
+        header = "@layer #{groups.keys.map { |p| layer_name(p) }.join(',')};"
+        body = groups.map do |priority, group|
+          "@layer #{layer_name(priority)}{\n#{group.map(&:to_css).join("\n")}\n}"
+        end
+        [header, *body].join("\n")
+      end
+
+      def layer_name(priority)
+        "#{Atomix.config.class_prefix}#{priority}"
+      end
+    end
+  end
+end

data/lib/view_component/atomix/resolution_session.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module Atomix
+    # One logical read, including nested owners, queue drains and cache rebuilds.
+    # Each frame tracks declarations made during its work (stale) and reads of
+    # work that has not finished yet (provisional). Neither may publish a cache.
+    class ResolutionSession
+      MAX_DEPTH = 64
+      MAX_STABILITY_PASSES = 32
+      Frame = Struct.new(:provisional, :stale)
+
+      def self.with
+        existing = Thread.current[:view_component_atomix_resolution]
+        return yield existing if existing
+
+        begin
+          session = new
+          Thread.current[:view_component_atomix_resolution] = session
+          yield session
+        ensure
+          Thread.current[:view_component_atomix_resolution] = nil
+        end
+      end
+
+      def self.stale!
+        Thread.current[:view_component_atomix_resolution]&.stale!
+      end
+
+      def initialize
+        @frames = []
+        @depth = 0
+        @passes = 0
+      end
+
+      def resolving?
+        !@frames.empty?
+      end
+
+      def provisional!
+        @frames.each { |frame| frame.provisional = true }
+      end
+
+      def stale!
+        @frames.each { |frame| frame.stale = true }
+      end
+
+      def frame
+        nested do
+          current = Frame.new(false, false)
+          @frames << current
+          begin
+            yield current
+          ensure
+            @frames.pop
+          end
+        end
+      end
+
+      def nested
+        if @depth >= MAX_DEPTH
+          raise ArgumentError, "Style resolution exceeds the nesting limit (#{MAX_DEPTH})"
+        end
+
+        @depth += 1
+        begin
+          yield
+        ensure
+          @depth -= 1
+        end
+      end
+
+      def consume!
+        @passes += 1
+        if @passes > DeclarationQueue::MAX_DRAIN_PASSES
+          raise ArgumentError, "Style declarations keep adding work during resolution"
+        end
+      end
+    end
+  end
+end