proscenium 0.19.0.beta16-arm64-darwin → 0.19.0.test1-arm64-darwin

data/lib/proscenium/ui/breadcrumbs/control.rb

@@ -0,0 +1,95 @@
+# frozen_string_literal: true
+
+module Proscenium::UI::Breadcrumbs
+  # Include this module in your controller to add support for adding breadcrumb elements. You can
+  # then use the `add_breadcrumb` and `prepend_breadcrumb` class methods to append and/or prepend
+  # breadcrumb elements.
+  module Control
+    extend ActiveSupport::Concern
+    include ActionView::Helpers::SanitizeHelper
+
+    included do
+      helper_method :breadcrumbs_as_json, :breadcrumbs_for_title if respond_to?(:helper_method)
+    end
+
+    module ClassMethods
+      # Appends a new breadcrumb element into the collection.
+      #
+      # @param name [String, Symbol, Proc, #for_breadcrumb] The name or content of the breadcrumb.
+      # @param path [String, Symbol, Array, Proc, nil] The path (route) to use as the HREF for the
+      #   breadcrumb.
+      # @param filter_options [Hash] Options to pass through to the before_action filter.
+      def add_breadcrumb(name, path = nil, **filter_options)
+        element_options = filter_options.delete(:options) || {}
+
+        before_action(filter_options) do |controller|
+          controller.send :add_breadcrumb, name, path, element_options
+        end
+      end
+
+      # Prepend a new breadcrumb element into the collection.
+      #
+      # @param name [String, Symbol, Proc, #for_breadcrumb] The name or content of the breadcrumb.
+      # @param path [String, Symbol, Array, Proc, nil] The path (route) to use as the HREF for the
+      #   breadcrumb.
+      # @param filter_options [Hash] Options to pass through to the before_action filter.
+      def prepend_breadcrumb(name, path = nil, **filter_options)
+        element_options = filter_options.delete(:options) || {}
+
+        before_action(filter_options) do |controller|
+          controller.send :prepend_breadcrumb, name, path, element_options
+        end
+      end
+    end
+
+    # Pushes a new breadcrumb element into the collection.
+    #
+    # @param name [String, Symbol, Proc, #for_breadcrumb] The name or content of the breadcrumb.
+    # @param path [String, Symbol, Array, Proc, nil] The path (route) to use as the HREF for the
+    #   breadcrumb.
+    # @param options [Hash]
+    def add_breadcrumb(name, path = nil, options = {})
+      breadcrumbs << Element.new(name, path, options)
+    end
+
+    # Prepend a new breadcrumb element into the collection.
+    #
+    # @param name [String, Symbol, Proc, #for_breadcrumb] The name or content of the breadcrumb.
+    # @param path [String, Symbol, Array, Proc, nil] The path (route) to use as the HREF for the
+    #   breadcrumb.
+    # @param options [Hash]
+    def prepend_breadcrumb(name, path = nil, options = {})
+      breadcrumbs.prepend Element.new(name, path, options)
+    end
+
+    def breadcrumbs
+      @breadcrumbs ||= []
+    end
+
+    def breadcrumbs_as_json
+      computed_breadcrumbs.map do |ele|
+        path = ele.path
+
+        { name: ele.name, path: ele.path.nil? || helpers.current_page?(path) ? nil : path }
+      end
+    end
+
+    # @param primary [Boolean] whether to return only the primary breadcrumb.
+    def breadcrumbs_for_title(primary: false)
+      names = computed_breadcrumbs.map(&:name)
+      return names.pop if primary
+
+      out = [names.pop]
+      out << names.join(': ') unless names.empty?
+      strip_tags out.join(' - ')
+    end
+
+    private
+
+    def computed_breadcrumbs
+      @computed_breadcrumbs ||= breadcrumbs.map do |ele|
+        ComputedElement.new ele, helpers
+      end
+    end
+  end
+end

data/lib/proscenium/ui/breadcrumbs/mixins.css

@@ -0,0 +1,83 @@
+@define-mixin breadcrumbs {
+  /* Default properties */
+  --_puiBreadcrumbs--separator-color: GrayText;
+  --_puiBreadcrumbs--separator: url("/proscenium/icons/angle-right-regular.svg");
+
+  margin: 10px;
+
+  ol {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    align-items: baseline;
+
+    li {
+      text-transform: uppercase;
+      display: flex;
+      align-items: center;
+
+      @media (max-width: 426px) {
+        &:not(:nth-last-child(2)) {
+          display: none;
+        }
+
+        &:nth-last-child(2)::before {
+          @mixin _separator;
+          margin: 0 0.5rem 0 0;
+          transform: rotate(180deg);
+        }
+      }
+
+      @media (min-width: 427px) {
+        &:not(:last-child)::after {
+          @mixin _separator;
+          margin: 0 0.5rem;
+        }
+      }
+
+      &:last-child {
+        font-weight: 500;
+        text-transform: none;
+      }
+
+      &:last-child > a {
+        font-weight: 500;
+        text-transform: none;
+      }
+
+      a {
+        color: var(--puiBreadcrumbs--link-color, revert);
+        display: flex;
+
+        &:hover {
+          color: var(--puiBreadcrumbs--link-hover-color, revert);
+        }
+      }
+
+      svg {
+        height: 1em;
+        width: 1em;
+      }
+    }
+  }
+}
+
+@define-mixin _separator {
+  display: inline-block;
+  content: "";
+  height: 1rem;
+  width: 1rem;
+  -webkit-mask: var(
+      --puiBreadcrumbs--separator,
+      var(--_puiBreadcrumbs--separator)
+    )
+    no-repeat center center;
+  mask: var(--puiBreadcrumbs--separator, var(--_puiBreadcrumbs--separator))
+    no-repeat center center;
+  vertical-align: sub;
+  background-color: var(
+    --puiBreadcrumbs--separator-color,
+    var(--_puiBreadcrumbs--separator-color)
+  );
+}

data/lib/proscenium/ui/breadcrumbs.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module Proscenium::UI
+  # Provides breadcrumb functionality for controllers and views. Breadcrumbs are a type of
+  # navigation that show the user where they are in the application's hierarchy.
+  # The `Proscenium::UI::Breadcrumbs::Control` module provides the `add_breadcrumb` and
+  # `prepend_breadcrumb` class methods for adding breadcrumb elements, and is intended to be
+  # included in your controllers.
+  #
+  # The `add_breadcrumb` method adds a new breadcrumb element to the end of the collection, while
+  # the `prepend_breadcrumb` method adds a new breadcrumb element to the beginning of the
+  # collection. Both methods take a name, and path as arguments. The name argument is the name or
+  # content of the breadcrumb, while the path argument is the path (route) to use as the HREF for
+  # the breadcrumb.
+  #
+  #   class UsersController < ApplicationController
+  #     include Proscenium::UI::Breadcrumbs::Control
+  #     add_breadcrumb 'Users', :users_path
+  #   end
+  #
+  # Display the breadcrumbs in your views with the breadcrumbs component.
+  # @see `Proscenium::UI::Breadcrumbs::Component`.
+  #
+  # At it's simplest, you can add a breadcrumb with a name of "User", and a path of "/users" like
+  # this:
+  #
+  #   add_breadcrumb 'Foo', '/foo'
+  #
+  # The value of the path is always passed to `url_for` before being rendered. It is also optional,
+  # and if omitted, the breadcrumb will be rendered as plain text.
+  #
+  # Both name and path can be given a Symbol, which can be used to call a method of the same name on
+  # the controller. If a Symbol is given as the path, and no method of the same name exists, then
+  # `url_for` will be called with the Symbol as the argument. Likewise, if an Array is given as the
+  # path, then `url_for` will be called with the Array as the argument.
+  #
+  # If a Symbol is given as the path or name, and it begins with `@` (eg. `:@foo`), then the
+  # instance variable of the same name will be called.
+  #
+  #   add_breadcrumb :@foo, :@bar
+  #
+  # A Proc can also be given as the name and/or path. The Proc will be called within the context of
+  # the controller.
+  #
+  #   add_breadcrumb -> { @foo }, -> { @bar }
+  #
+  # Passing an object that responds to `#for_breadcrumb` as the name will call that method on the
+  # object to get the breadcrumb name.
+  #
+  module Breadcrumbs
+    extend ActiveSupport::Autoload
+
+    autoload :Control
+    autoload :ComputedElement
+    autoload :Component
+
+    # Represents a navigation element in the breadcrumb collection.
+    class Element
+      attr_accessor :name, :path, :options
+
+      # @param  name [String] the element/link name
+      # @param  path [String] the element/link URL
+      # @param  options [Hash] the element/link options
+      # @return [Element]
+      def initialize(name, path = nil, options = {})
+        self.name = name
+        self.path = path
+        self.options = options
+      end
+    end
+  end
+end

data/lib/proscenium/ui/component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Proscenium::UI
+  class Component < Proscenium::Phlex
+    self.abstract_class = true
+  end
+end

data/lib/proscenium/ui/custom_element.js

@@ -0,0 +1,54 @@
+/**
+ * Base class for custom elements, providing support for event delegation, and idempotent
+ * customElement registration.
+ *
+ * The `handleEvent` method is called any time an event defined in `delegatedEvents` is triggered.
+ * It's a central handler to handle events for this custom element.
+ *
+ * @example
+ *   class MyComponent extends CustomElement {
+ *     static componentName = 'my-component'
+ *     static delegatedEvents = ['click']
+ *
+ *     handleEvent(event) {
+ *       console.log('Hello, world!')
+ *     }
+ *   }
+ *   MyComponent.register()
+ */
+export default class CustomElement extends HTMLElement {
+  /**
+   * Register the component as a custom element, inferring the component name from the kebab-cased
+   * class name. You can override the component name by setting a static `componentName` property.
+   *
+   * This method is idempotent.
+   */
+  static register() {
+    if (this.componentName === undefined) {
+      this.componentName = this.name
+        .replaceAll(/(.)([A-Z])/g, "$1-$2")
+        .toLowerCase();
+    }
+
+    if (!customElements.get(this.componentName)) {
+      customElements.define(this.componentName, this);
+    }
+  }
+
+  /**
+   * A list of event types to be delegated for the lifetime of the custom element.
+   *
+   * @type {Array}
+   */
+  static delegatedEvents = [];
+
+  constructor() {
+    super();
+
+    if (typeof this.handleEvent !== "undefined") {
+      this.constructor.delegatedEvents?.forEach((event) => {
+        this.addEventListener(event, this);
+      });
+    }
+  }
+}

data/lib/proscenium/ui/flash/bun.lock

@@ -0,0 +1,19 @@
+{
+  "lockfileVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "@proscenium/flash",
+      "dependencies": {
+        "dom-mutations": "^1.0.0",
+      },
+      "devDependencies": {
+        "sourdough-toast": "latest",
+      },
+    },
+  },
+  "packages": {
+    "dom-mutations": ["dom-mutations@1.0.0", "", {}, "sha512-qr4ufk/qu+JKwtz7NPbu6TxpTM/7nqburohI07J+mKSM20USvhcUjEb8hWY6g2a3QYp3LtlGpi+mAZLPuxTi7g=="],
+
+    "sourdough-toast": ["sourdough-toast@0.1.0", "", {}, "sha512-ianhWqaaA5a0n9TRg6dLEt5DWflXqsQUMxEAGZi8JcHGqsPRm7XTWEfhhDKSi/zJ11CBbvh8b8oRcgxjCeYZeg=="],
+  }
+}

data/lib/proscenium/ui/flash/index.css

@@ -0,0 +1 @@
+@import "https://cdn.jsdelivr.net/npm/sourdough-toast/src/sourdough-toast.css";

data/lib/proscenium/ui/flash/index.js

@@ -0,0 +1,77 @@
+import domMutations from "dom-mutations";
+import { Sourdough, toast } from "sourdough-toast";
+
+export function foo() {
+  console.log("foo");
+}
+
+class HueFlash extends HTMLElement {
+  static observedAttributes = ["data-flash-alert", "data-flash-notice"];
+
+  connectedCallback() {
+    this.#initSourdough();
+  }
+
+  async #initSourdough() {
+    if ("sourdoughBooted" in window) return;
+
+    const sourdough = new Sourdough({
+      richColors: true,
+      yPosition: "bottom",
+      xPosition: "center",
+    });
+    sourdough.boot();
+    window.sourdoughBooted = true;
+
+    // Watch for changes to htl:flashes meta tag
+    const flashesSelector = "meta[name='rails:flashes']";
+    for await (const mutation of domMutations(document.head, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+    })) {
+      let $ele = null;
+
+      if (
+        mutation.type === "attributes" &&
+        mutation.target.nodeName == "META" &&
+        mutation.attributeName == "content"
+      ) {
+        $ele = mutation.target;
+      } else if (mutation.type === "childList") {
+        for (const node of mutation.addedNodes) {
+          if (node.matches(flashesSelector)) {
+            $ele = node;
+            break;
+          }
+        }
+      }
+
+      if ($ele) {
+        const flashes = JSON.parse($ele.getAttribute("content"));
+        for (const [type, message] of Object.entries(flashes)) {
+          if (type === "alert") {
+            toast.error(message);
+          } else if (type === "notice") {
+            toast.success(message);
+          }
+        }
+      }
+    }
+  }
+
+  attributeChangedCallback(name, _oldValue, newValue) {
+    this.#initSourdough();
+
+    if (newValue === null) return;
+
+    if (name === "data-flash-alert") {
+      toast.warning(newValue);
+    } else if (name === "data-flash-notice") {
+      toast.success(newValue);
+    }
+  }
+}
+
+!customElements.get("pui-flash") &&
+  customElements.define("pui-flash", HueFlash);

data/lib/proscenium/ui/flash/node_modules/dom-mutations/index.d.ts

@@ -0,0 +1,33 @@
+export type Options = MutationObserverInit & {signal?: AbortSignal};
+
+/**
+@returns An async iterable that yields [`MutationRecord`](https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord) objects representing individual mutations.
+
+@example
+```
+import domMutations from 'dom-mutations';
+
+const target = document.querySelector('#unicorn');
+
+for await (const mutation of domMutations(target, {childList: true})) {
+	console.log('Mutation:', mutation);
+}
+```
+*/
+export default function domMutations(target: Node, options?: Options): AsyncIterable<MutationRecord>;
+
+/**
+Similar to `domMutations()`, but yields batches of [`MutationRecord`](https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord) objects, each batch representing a group of mutations captured together. This method is less convenient, but can be useful in some cases when you need to handle mutations together as a group.
+
+@example
+```
+import {batchedDomMutations} from 'dom-mutations';
+
+const target = document.querySelector('#unicorn');
+
+for await (const mutations of batchedDomMutations(target, {childList: true})) {
+	console.log('Batch of mutations:', mutations);
+}
+```
+*/
+export function batchedDomMutations(target: Node, options?: Options): AsyncIterable<MutationRecord[]>;

data/lib/proscenium/ui/flash/node_modules/dom-mutations/index.js

@@ -0,0 +1,44 @@
+export default function domMutations(target, options = {}) {
+	return {
+		async * [Symbol.asyncIterator]() {
+			for await (const mutations of batchedDomMutations(target, options)) {
+				yield * mutations;
+			}
+		},
+	};
+}
+
+export function batchedDomMutations(target, {signal, ...options} = {}) {
+	return {
+		async * [Symbol.asyncIterator]() {
+			signal?.throwIfAborted();
+
+			let resolveMutations;
+			let rejectMutations;
+
+			const observer = new globalThis.MutationObserver(mutations => {
+				resolveMutations?.(mutations);
+			});
+
+			observer.observe(target, options);
+
+			signal?.addEventListener('abort', () => {
+				rejectMutations?.(signal.reason);
+				observer.disconnect();
+			}, {once: true});
+
+			try {
+				while (true) {
+					signal?.throwIfAborted();
+
+					yield await new Promise((resolve, reject) => { // eslint-disable-line no-await-in-loop
+						resolveMutations = resolve;
+						rejectMutations = reject;
+					});
+				}
+			} finally {
+				observer.disconnect();
+			}
+		},
+	};
+}

data/lib/proscenium/ui/flash/node_modules/dom-mutations/license

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/lib/proscenium/ui/flash/node_modules/dom-mutations/package.json

@@ -0,0 +1,59 @@
+{
+	"name": "dom-mutations",
+	"version": "1.0.0",
+	"description": "Observe changes to the DOM using an async iterable — A nicer API for MutationObserver",
+	"license": "MIT",
+	"repository": "sindresorhus/dom-mutations",
+	"funding": "https://github.com/sponsors/sindresorhus",
+	"author": {
+		"name": "Sindre Sorhus",
+		"email": "sindresorhus@gmail.com",
+		"url": "https://sindresorhus.com"
+	},
+	"type": "module",
+	"exports": {
+		"types": "./index.d.ts",
+		"default": "./index.js"
+	},
+	"sideEffects": false,
+	"engines": {
+		"node": ">=18"
+	},
+	"scripts": {
+		"test": "xo && ava"
+	},
+	"files": [
+		"index.js",
+		"index.d.ts"
+	],
+	"keywords": [
+		"mutationobserver",
+		"mutation",
+		"mutations",
+		"observer",
+		"observe",
+		"dom",
+		"document",
+		"node",
+		"element",
+		"html",
+		"changes",
+		"asynciterable",
+		"asynciterator",
+		"iterable",
+		"iterator",
+		"generator",
+		"async",
+		"events",
+		"stream",
+		"loop"
+	],
+	"devDependencies": {
+		"ava": "^5.3.1",
+		"jsdom": "^24.1.1",
+		"xo": "^0.59.3"
+	},
+	"ava": {
+		"serial": true
+	}
+}

data/lib/proscenium/ui/flash/node_modules/dom-mutations/readme.md

@@ -0,0 +1,125 @@
+# dom-mutations
+
+> Observe changes to the DOM using an async iterable — A nicer API for [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
+
+This package only works in the browser.
+
+## Install
+
+```sh
+npm install dom-mutations
+```
+
+## Usage
+
+```js
+import domMutations from 'dom-mutations';
+
+const target = document.querySelector('#unicorn');
+
+for await (const mutation of domMutations(target, {childList: true})) {
+	console.log('Mutation:', mutation);
+}
+```
+
+## API
+
+### domMutations(target, options?) <sup>(default export)</sup>
+
+Accepts the same arguments as [`MutationObserver#observe()`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe#parameters) with an additional optional [`signal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal) option to abort the observation. If the signal is triggered, the async iterable throws an [abort error](https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort).
+
+Returns an [`AsyncIterable`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_async_iterator_and_async_iterable_protocols) that yields [`MutationRecord`](https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord) objects representing individual mutations.
+
+### batchedDomMutations(target, options?) <sup>(named export)</sup>
+
+Similar to `domMutations()`, but yields batches of [`MutationRecord`](https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord) objects, each batch representing a group of mutations captured together. This method is less convenient, but can be useful in some cases when you need to handle mutations together as a group.
+
+```js
+import {batchedDomMutations} from 'dom-mutations';
+
+const target = document.querySelector('#unicorn');
+
+for await (const mutations of batchedDomMutations(target, {childList: true})) {
+	console.log('Batch of mutations:', mutations);
+}
+```
+
+## FAQ
+
+### How do I stop the iteration?
+
+Simply `return` or `break` in the loop body.
+
+### How do I stop the iteration from the outside?
+
+**Triggering the iterator to return**
+
+```js
+import domMutations from 'dom-mutations';
+
+const target = document.querySelector('#unicorn');
+
+const mutationIterator = domMutations(target, {childList: true})[Symbol.asyncIterator]();
+
+(async () => {
+	for await (const mutation of mutationIterator) {
+		console.log('Mutation:', mutation);
+	}
+})();
+
+setTimeout(() => {
+	mutationIterator.return();
+}, 10000);
+```
+
+**Using a variable**
+
+This has the downside of not ending the iteration until the next mutation.
+
+```js
+import domMutations from 'dom-mutations';
+
+const target = document.querySelector('#unicorn');
+
+let shouldStop = false;
+
+(async () => {
+	for await (const mutation of domMutations(target, {childList: true})) {
+		if (shouldStop) {
+			break;
+		}
+
+		console.log('Mutation:', mutation);
+	}
+})();
+
+setTimeout(() => {
+	shouldStop = true;
+}, 10000);
+```
+
+**Using [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController)**
+
+Unlike the above approaches, this will make the iterable throw an [abort error](https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort).
+
+```js
+import domMutations from 'dom-mutations';
+
+const target = document.querySelector('#unicorn');
+const controller = new AbortController();
+const {signal} = controller;
+
+(async () => {
+	for await (const mutation of domMutations(target, {childList: true, signal})) {
+		console.log('Mutation:', mutation);
+	}
+})();
+
+setTimeout(() => {
+	controller.abort();
+}, 10000);
+```
+
+## Related
+
+- [request-animation-frames](https://github.com/sindresorhus/request-animation-frames) - Use `requestAnimationFrame` as an async iterable, in any JavaScript environment