@inc2734/unitone-css 1.4.1 → 1.4.2

package/dist/layout-primitives/with-sidebar/react.js

@@ -1 +1 @@
-"use strict";var e=require("react");function n(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=Array(n);t<n;t++)r[t]=e[t];return r}function t(e,t){if(e){if("string"==typeof e)return n(e,t);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?n(e,t):void 0}}function r(e){return function(e){if(Array.isArray(e))return n(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||t(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,i,o,a,l=[],u=!0,d=!1;try{if(o=(t=t.call(e)).next,0===n);else for(;!(u=(r=o.call(t)).done)&&(l.push(r.value),l.length!==n);u=!0);}catch(e){d=!0,i=e}finally{try{if(!u&&null!=t.return&&(a=t.return(),Object(a)!==a))return}finally{if(d)throw i}}return l}}(e,n)||t(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(e,n){var t="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!t){if(Array.isArray(e)||(t=function(e,n){if(e){if("string"==typeof e)return a(e,n);var t={}.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?a(e,n):void 0}}(e))||n){t&&(e=t);var r=0,i=function(){};return{s:i,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,l=!0,u=!1;return{s:function(){t=t.call(e)},n:function(){var e=t.next();return l=e.done,e},e:function(e){u=!0,o=e},f:function(){try{l||null==t.return||t.return()}finally{if(u)throw o}}}}function a(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=Array(n);t<n;t++)r[t]=e[t];return r}var l="data-unitone-layout",u="".concat(200,"px 0px"),d=function(e){var n;return(null!==(n=e.getAttribute(l))&&void 0!==n?n:"").split(/\s+/).filter(Boolean)},c=function(e,n){return e.filter(function(e){return!n.includes(e)})},s=function(e,n){var t,r=n.filter(Boolean).join(" ");(null!==(t=e.getAttribute(l))&&void 0!==t?t:"")!==r&&e.setAttribute(l,r)},f=function(e,n,t,r){var i,a,l,u,d=new WeakMap,c=(i=function(){return n(e)},a=250,u=function(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];var r=this;clearTimeout(l),l=setTimeout(function(){l=void 0,i.apply(r,n)},a)},u.cancel=function(){clearTimeout(l),l=void 0},u),s=new ResizeObserver(function(e){if(!t.disposed){var n,i=!1,a=o(e);try{for(a.s();!(n=a.n()).done;){var l=n.value,u=null==r?void 0:r(l);d.has(l.target)&&void 0!==u&&u===d.get(l.target)||(i=!0),d.set(l.target,u)}}catch(e){a.e(e)}finally{a.f()}i&&c()}});return t.addCleanup(c.cancel),t.addCleanup(function(){return s.disconnect()}),s.observe(e),s},v=function(e,n,t,r){var i=new MutationObserver(function(n){!r.disposed&&e.isConnected&&t(n)});i.observe(e,n),r.addCleanup(function(){return i.disconnect()})},p=function(e,n){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=t.getResizeValue,a=t.observeDirectChildrenResize,l=void 0!==a&&a,d=t.targetMutation,c=t.directChildMutation,s=function(e){var n=e.ownerDocument.defaultView,t=new Set,r=new Set,i=!1;return{get disposed(){return i},addCleanup:function(e){i?e():t.add(e)},requestAnimationFrame:function(e){if(i)return 0;if(null==n||!n.requestAnimationFrame)return e(),0;var t=n.requestAnimationFrame(function(n){r.delete(t),i||e(n)});return r.add(t),t},dispose:function(){i||(i=!0,r.forEach(function(e){return n.cancelAnimationFrame(e)}),r.clear(),t.forEach(function(e){return e()}),t.clear())}}}(e),p="undefined"!=typeof IntersectionObserver,y=!p||g(e),b=!y,h=function(){!s.disposed&&e.isConnected&&(y?(b=!1,n(e,s)):b=!0)},m=function(e,n,t){var r=0;return function(){t.disposed||r||(r=t.requestAnimationFrame(function(){r=0,null!=e&&e.isConnected&&n(e)}))}}(e,h,s),w=function(){!s.disposed&&null!=e&&e.isConnected&&(b=!0,y&&m())},S=f(e,w,s,r);return l&&function(e,n,t,r,i){var a=new Set,l=i?new MutationObserver(function(n){!r.disposed&&e.isConnected&&O(n,function(n){return n.target.parentElement===e&&i.shouldApply(n)})&&t(e)}):null;r.addCleanup(function(){a.clear(),null==l||l.disconnect()});var u=function(){var t,r=o(a);try{for(r.s();!(t=r.n()).done;){var u=t.value;u.parentElement!==e&&(n.unobserve(u),a.delete(u))}}catch(e){r.e(e)}finally{r.f()}null==l||l.disconnect();var d,c=o(e.children);try{for(c.s();!(d=c.n()).done;){var s=d.value;a.has(s)||(n.observe(s),a.add(s)),null==l||l.observe(s,{attributes:!0,attributeFilter:i.attributeFilter,attributeOldValue:!0})}}catch(e){c.e(e)}finally{c.f()}};u(),v(e,{childList:!0},function(){u(),t(e)},r)}(e,S,w,s,c),p&&function(e,n,t){var r=new IntersectionObserver(function(e){var r=i(e,1)[0];r&&!t.disposed&&n(r)},{rootMargin:u});r.observe(e),t.addCleanup(function(){return r.disconnect()})}(e,function(e){(y=e.isIntersecting)&&b&&w()},s),d&&v(e,d.options,function(e){d.shouldApply(e)&&w()},s),y&&h(),s.dispose},y=function(e){var n;return null===(n=e.borderBoxSize)||void 0===n?void 0:n[0].inlineSize},b=function(e){var n;return(null!==(n=e.ownerDocument.defaultView)&&void 0!==n?n:window).getComputedStyle(e)},h=function(e){var n=b(e),t=n.position,r=n.display;return!["absolute","fixed"].includes(t)&&"none"!==r},m=function(e){return!(null==e||!e.isConnected)&&0<e.getClientRects().length},g=function(e){var n;if(!m(e))return!1;var t=null==e||null===(n=e.ownerDocument)||void 0===n?void 0:n.defaultView;if(!t)return!0;var r=e.getBoundingClientRect(),i=t.innerWidth,o=t.innerHeight;return r.bottom>-200&&r.right>0&&r.top<o+200&&r.left<i},w=function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},t=n.direction,r=void 0===t?"ltr":t,i=n.flexDirection,o=void 0===i?"row":i,a=n.writingMode,l=void 0===a?"horizontal-tb":a,u=!l.startsWith("horizontal"),d="rtl"===r!==("sideways-lr"===l),c=u?e.top:e.left,s=u?e.bottom:e.right;if(d){var f=[-s,-c];c=f[0],s=f[1]}if("row-reverse"===o){var v=[-s,-c];c=v[0],s=v[1]}return{start:c,end:s}},O=function(e,n){var t=new Map;return e.some(function(e){var r;if("attributes"!==e.type)return!1;var i=null!==(r=t.get(e.target))&&void 0!==r?r:new Set;return!i.has(e.attributeName)&&(i.add(e.attributeName),t.set(e.target,i),n(e))})};var S=function(e){var n,t,i,a=Array.from(null!==(n=null==e?void 0:e.children)&&void 0!==n?n:[]),l=c(d(e),["divider:initialized","-stack"]);s(e,l);var u=a.map(function(e){return{child:e,layoutTokens:c(d(e),["-bol","-linewrap"])}}),f=function(){u.forEach(function(e){var n=e.child,t=e.layoutTokens;s(n,t)})};if(l.some(function(e){return e.startsWith("-divider:")}))if(0!==a.length)if(m(e)){var v=null!==(t=null==e||null===(i=e.ownerDocument)||void 0===i?void 0:i.defaultView)&&void 0!==t?t:"undefined"!=typeof window?window:void 0;if(null!=v&&v.getComputedStyle){var p,y,g=b(e),O={direction:g.getPropertyValue("direction"),flexDirection:g.getPropertyValue("flex-direction"),writingMode:g.getPropertyValue("writing-mode")},S=[],E=o(u);try{for(E.s();!(p=E.n()).done;){var C=p.value;h(C.child)&&(C.inlineRect=w(C.child.getBoundingClientRect(),O),S.push(C))}}catch(e){E.e(e)}finally{E.f()}if(0===S.length)return f(),void s(e,[].concat(r(l),["divider:initialized"]));var A=!1,z=!0;S.forEach(function(e,n){var t=e.layoutTokens,r=e.inlineRect;0===n||r.start<y.end-.5||r.start<=y.start+.5?(t.push("-bol"),0<n&&(A=!0)):z=!1,A&&t.push("-linewrap"),y=r}),f();var j=r(l);z&&j.push("-stack"),j.push("divider:initialized"),s(e,j)}else f()}else f();else s(e,[].concat(r(l),["divider:initialized"]));else f()},E=function(e,n){return c((null!=e?e:"").split(" "),n).join(" ")},C=Symbol.for("@inc2734/unitone-css/layout-initializers"),A=function(){return"undefined"==typeof window||"undefined"==typeof document||"undefined"==typeof MutationObserver||"undefined"==typeof Node?null:(globalThis[C]||(globalThis[C]={initializers:new Map,pendingNodes:new Set,observer:null,rafId:0,hasDOMContentLoadedListener:!1}),globalThis[C])},z=function(e,n){var t,r;if(null!=n&&n.isConnected&&e.enabled()&&n.nodeType===Node.ELEMENT_NODE){var i=new Set;null!==(t=n.matches)&&void 0!==t&&t.call(n,e.selector)&&i.add(n),null===(r=n.querySelectorAll)||void 0===r||r.call(n,e.selector).forEach(function(e){i.add(e)}),i.forEach(function(n){if(!e.initialized.has(n)){var t=e.initialize(n);e.initialized.add(n),"function"==typeof t&&e.cleanups.set(n,t)}})}},j=function(e){var n=A();n&&n.initializers.forEach(function(n){z(n,e)})},M=function(e){var n=A();!n||null!=e&&e.isConnected||(null==e?void 0:e.nodeType)!==Node.ELEMENT_NODE||[e].concat(r(e.querySelectorAll("*"))).forEach(function(e){n.initializers.forEach(function(n){var t,r=null===(t=n.cleanups)||void 0===t?void 0:t.get(e);r&&!e.isConnected&&(n.cleanups.delete(e),n.initialized.delete(e),r())})})},N=function(){var e=A();e&&(e.pendingNodes.forEach(function(e){j(e)}),e.pendingNodes.clear(),e.rafId=0)},D=function(){var e=A();e&&!e.observer&&document.body&&(j(document.body),e.observer=new MutationObserver(function(n){n.forEach(function(n){n.removedNodes.forEach(M),n.addedNodes.forEach(function(n){null!=n&&n.isConnected&&n.nodeType===Node.ELEMENT_NODE&&e.pendingNodes.add(n)})}),e.pendingNodes.forEach(function(n){n.isConnected||e.pendingNodes.delete(n)}),!e.rafId&&0<e.pendingNodes.size&&(e.rafId=requestAnimationFrame(N))}),e.observer.observe(document.body,{childList:!0,subtree:!0}))};function T(){return T=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},T.apply(null,arguments)}function I(e){return I="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},I(e)}function P(e){var n=function(e,n){if("object"!=I(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n);if("object"!=I(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==I(n)?n:n+""}function L(e,n,t){return(n=P(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}!function(e){var n=e.key,t=e.selector,r=e.initialize,i=e.enabled,o=void 0===i?function(){return!0}:i,a=A();if(a&&!a.initializers.has(n)){var l={selector:t,initialize:r,enabled:o,initialized:new WeakSet,cleanups:new WeakMap};a.initializers.set(n,l),a.observer?z(l,document.body):"loading"!==document.readyState?D():a.hasDOMContentLoadedListener||(document.addEventListener("DOMContentLoaded",D,{once:!0}),a.hasDOMContentLoadedListener=!0)}}({key:"behaviors/dividers",selector:'[data-unitone-layout*="-divider:"]',initialize:function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},t=function(e){var t,i,o,a,u=e.attributeName,d=e.oldValue,c=e.target.getAttribute(u),s=l===u?[].concat(r(null!==(t=null==n||null===(i=n.ignore)||void 0===i?void 0:i.layout)&&void 0!==t?t:[]),["divider:initialized","-bol","-linewrap","-stack"]):"class"===u?r(null!==(o=null==n||null===(a=n.ignore)||void 0===a?void 0:a.className)&&void 0!==o?o:[]):null;return s?E(c,s)!==E(d,s):["style","dir"].includes(u)&&(null!=c?c:"")!==(null!=d?d:"")};return p(e,S,{getResizeValue:y,observeDirectChildrenResize:!0,targetMutation:{options:{attributes:!0,attributeFilter:["style","dir","data-unitone-layout","class"],attributeOldValue:!0},shouldApply:function(n){return O(n,function(n){return n.target===e&&t(n)})}},directChildMutation:{attributeFilter:["style","data-unitone-layout","class"],shouldApply:t}})}});var W=["gap","columnGap","rowGap","contentMinWidth","revert","sidebar","sidebarWidth","alignItems","overflow","divider","dividerWidth","dividerStyle","dividerColor","style"];function k(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter(function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable})),t.push.apply(t,r)}return t}function x(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?k(Object(t),!0).forEach(function(n){L(e,n,t[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):k(Object(t)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})}return e}exports.WithSidebar=function(n){var t=n.gap,r=n.columnGap,i=n.rowGap,o=n.contentMinWidth,a=n.revert,l=n.sidebar,u=n.sidebarWidth,d=n.alignItems,c=n.overflow,s=n.divider,f=n.dividerWidth,v=n.dividerStyle,p=n.dividerColor,y=n.style,b=function(e,n){if(null==e)return{};var t,r,i=function(e,n){if(null==e)return{};var t={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(-1!==n.indexOf(r))continue;t[r]=e[r]}return t}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],-1===n.indexOf(t)&&{}.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(n,W);return y=x(x({},y),{},{"--unitone--sidebar-width":""!==u?u:void 0,"--unitone--content-min-width":""!==o?o:void 0,"--unitone--divider-width":""!==f?f:void 0,"--unitone--divider-style":""!==v?v:void 0,"--unitone--divider-color":""!==p?p:void 0}),e.createElement("div",T({"data-unitone-layout":["with-sidebar",a?"-revert":void 0,""!==(null!=t?t:"")?"-gap:".concat(t):void 0,""!==(null!=r?r:"")?"-column-gap:".concat(r):void 0,""!==(null!=i?i:"")?"-row-gap:".concat(i):void 0,""!==(null!=l?l:"")?"-sidebar:".concat(l):void 0,""!==(null!=d?d:"")?"-align-items:".concat(d):void 0,""!==(null!=c?c:"")?"-overflow:".concat(c):void 0,""!==(null!=s?s:"")?"-divider:".concat(s):void 0].filter(Boolean).join(" "),style:y},b),b.children)};
+"use client";"use strict";var e=require("react"),t="unitone:layout-refresh",n=function(e){var n;return!(null==e||null===(n=e.hasAttribute)||void 0===n||!n.call(e,"data-unitone-react-layout"))&&(e.dispatchEvent(new e.ownerDocument.defaultView.Event(t)),!0)},r=function(e,t){var n;if(e){var r=null!==(n=e.getAttribute("data-unitone-layout"))&&void 0!==n?n:"",i=r.split(/\s+/).filter(function(e){return e&&!t.includes(e)}).join(" ");r!==i&&e.setAttribute("data-unitone-layout",i)}},i=function(e,t){if("divider"===t)r(e,["divider:initialized","-stack"]),Array.from(e.children).forEach(function(e){return r(e,["-bol","-linewrap"])});else if("stairs"===t)r(e,["stairs:initialized"]),e.style.removeProperty("--unitone--max-stairs-step"),e.style.removeProperty("--unitone--stairs-step-overflow-volume"),Array.from(e.children).forEach(function(e){return e.style.removeProperty("--unitone--stairs-step")});else if("vertical"===t){var n;r(e,["vertical-writing:initialized","vertical-writing:safari","-force-switch"]),null!==(n=e.parentElement)&&void 0!==n&&n.style&&(e.parentElement.style.height="")}};function o(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function a(e,t){if(e){if("string"==typeof e)return o(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?o(e,t):void 0}}function l(e){return function(e){if(Array.isArray(e))return o(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||a(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,i,o,a,l=[],u=!0,d=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;u=!1}else for(;!(u=(r=o.call(n)).done)&&(l.push(r.value),l.length!==t);u=!0);}catch(e){d=!0,i=e}finally{try{if(!u&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(d)throw i}}return l}}(e,t)||a(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function d(e,t){var n="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!n){if(Array.isArray(e)||(n=function(e,t){if(e){if("string"==typeof e)return c(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?c(e,t):void 0}}(e))||t){n&&(e=n);var r=0,i=function(){};return{s:i,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,a=!0,l=!1;return{s:function(){n=n.call(e)},n:function(){var e=n.next();return a=e.done,e},e:function(e){l=!0,o=e},f:function(){try{a||null==n.return||n.return()}finally{if(l)throw o}}}}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}var s="data-unitone-layout",f="".concat(200,"px 0px"),v=function(e){var t;return(null!==(t=e.getAttribute(s))&&void 0!==t?t:"").split(/\s+/).filter(Boolean)},p=function(e,t){return e.filter(function(e){return!t.includes(e)})},y=function(e,t){var n,r=t.filter(Boolean).join(" ");(null!==(n=e.getAttribute(s))&&void 0!==n?n:"")!==r&&e.setAttribute(s,r)},h=function(e,t,n,r){var i,o,a,l,u=new WeakMap,c=(i=function(){return t(e)},o=250,l=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];var r=this;clearTimeout(a),a=setTimeout(function(){a=void 0,i.apply(r,t)},o)},l.cancel=function(){clearTimeout(a),a=void 0},l),s=new ResizeObserver(function(e){if(!n.disposed){var t,i=!1,o=d(e);try{for(o.s();!(t=o.n()).done;){var a=t.value,l=null==r?void 0:r(a);u.has(a.target)&&void 0!==l&&l===u.get(a.target)||(i=!0),u.set(a.target,l)}}catch(e){o.e(e)}finally{o.f()}i&&c()}});return n.addCleanup(c.cancel),n.addCleanup(function(){return s.disconnect()}),s.observe(e),s},b=function(e,t,n,r){var i=new MutationObserver(function(t){!r.disposed&&e.isConnected&&n(t)});i.observe(e,t),r.addCleanup(function(){return i.disconnect()})},g=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.getResizeValue,i=n.observeDirectChildrenResize,o=void 0!==i&&i,a=n.targetMutation,l=n.directChildMutation,c=n.shouldApplyChildList,s=function(e){var t=e.ownerDocument.defaultView,n=new Set,r=new Set,i=!1;return{get disposed(){return i},addCleanup:function(e){i?e():n.add(e)},requestAnimationFrame:function(e){if(i)return 0;if(null==t||!t.requestAnimationFrame)return e(),0;var n=t.requestAnimationFrame(function(t){r.delete(n),i||e(t)});return r.add(n),n},dispose:function(){i||(i=!0,r.forEach(function(e){return t.cancelAnimationFrame(e)}),r.clear(),n.forEach(function(e){return e()}),n.clear())}}}(e),v="undefined"!=typeof IntersectionObserver,p=!v||A(e),y=!p,g=function(){!s.disposed&&e.isConnected&&(p?(y=!1,t(e,s)):y=!0)},m=function(e,t,n){var r=0;return function(){n.disposed||r||(r=n.requestAnimationFrame(function(){r=0,null!=e&&e.isConnected&&t(e)}))}}(e,g,s),w=function(){!s.disposed&&null!=e&&e.isConnected&&(y=!0,p&&m())},E=h(e,w,s,r);return o&&function(e,t,n,r,i,o){var a=new Set,l=i?new MutationObserver(function(t){!r.disposed&&e.isConnected&&S(t,function(t){return t.target.parentElement===e&&i.shouldApply(t)})&&n(e)}):null;r.addCleanup(function(){a.clear(),null==l||l.disconnect()});var u=function(){var n,r=d(a);try{for(r.s();!(n=r.n()).done;){var o=n.value;o.parentElement!==e&&(t.unobserve(o),a.delete(o))}}catch(e){r.e(e)}finally{r.f()}null==l||l.disconnect();var u,c=d(e.children);try{for(c.s();!(u=c.n()).done;){var s=u.value;a.has(s)||(t.observe(s),a.add(s)),null==l||l.observe(s,{attributes:!0,attributeFilter:i.attributeFilter,attributeOldValue:!0})}}catch(e){c.e(e)}finally{c.f()}};u(),b(e,{childList:!0},function(t){u(),o&&!o(t)||n(e)},r)}(e,E,w,s,l,c),v&&function(e,t,n){var r=new IntersectionObserver(function(e){var r=u(e,1)[0];r&&!n.disposed&&t(r)},{rootMargin:f});r.observe(e),n.addCleanup(function(){return r.disconnect()})}(e,function(e){(p=e.isIntersecting)&&y&&w()},s),a&&b(e,a.options,function(e){a.shouldApply(e)&&w()},s),p&&g(),Object.assign(s.dispose,{refresh:g})},m=function(e){var t;return null===(t=e.borderBoxSize)||void 0===t?void 0:t[0].inlineSize},w=function(e){var t;return(null!==(t=e.ownerDocument.defaultView)&&void 0!==t?t:window).getComputedStyle(e)},E=function(e){var t=w(e),n=t.position,r=t.display;return!["absolute","fixed"].includes(n)&&"none"!==r},O=function(e){return!(null==e||!e.isConnected)&&0<e.getClientRects().length},A=function(e){var t;if(!O(e))return!1;var n=null==e||null===(t=e.ownerDocument)||void 0===t?void 0:t.defaultView;if(!n)return!0;var r=e.getBoundingClientRect(),i=n.innerWidth,o=n.innerHeight;return r.bottom>-200&&r.right>0&&r.top<o+200&&r.left<i},C=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.direction,r=void 0===n?"ltr":n,i=t.flexDirection,o=void 0===i?"row":i,a=t.writingMode,l=void 0===a?"horizontal-tb":a,u=!l.startsWith("horizontal"),d="rtl"===r!==("sideways-lr"===l),c=u?e.top:e.left,s=u?e.bottom:e.right;if(d){var f=[-s,-c];c=f[0],s=f[1]}if("row-reverse"===o){var v=[-s,-c];c=v[0],s=v[1]}return{start:c,end:s}},S=function(e,t){var n=new Map;return e.some(function(e){var r;if("attributes"!==e.type)return!1;var i=null!==(r=n.get(e.target))&&void 0!==r?r:new Set;return!i.has(e.attributeName)&&(i.add(e.attributeName),n.set(e.target,i),t(e))})};var z=function(e){var t,n,r,i=Array.from(null!==(t=null==e?void 0:e.children)&&void 0!==t?t:[]),o=p(v(e),["divider:initialized","-stack"]);y(e,o);var a=i.map(function(e){return{child:e,layoutTokens:p(v(e),["-bol","-linewrap"])}}),u=function(){a.forEach(function(e){var t=e.child,n=e.layoutTokens;y(t,n)})};if(o.some(function(e){return e.startsWith("-divider:")}))if(0!==i.length)if(O(e)){var c=null!==(n=null==e||null===(r=e.ownerDocument)||void 0===r?void 0:r.defaultView)&&void 0!==n?n:"undefined"!=typeof window?window:void 0;if(null!=c&&c.getComputedStyle){var s,f,h=w(e),b={direction:h.getPropertyValue("direction"),flexDirection:h.getPropertyValue("flex-direction"),writingMode:h.getPropertyValue("writing-mode")},g=[],m=d(a);try{for(m.s();!(s=m.n()).done;){var A=s.value;E(A.child)&&(A.inlineRect=C(A.child.getBoundingClientRect(),b),g.push(A))}}catch(e){m.e(e)}finally{m.f()}if(0===g.length)return u(),void y(e,[].concat(l(o),["divider:initialized"]));var S=!1,z=!0;g.forEach(function(e,t){var n=e.layoutTokens,r=e.inlineRect;0===t||r.start<f.end-.5||r.start<=f.start+.5?(n.push("-bol"),0<t&&(S=!0)):z=!1,S&&n.push("-linewrap"),f=r}),u();var N=l(o);z&&N.push("-stack"),N.push("divider:initialized"),y(e,N)}else u()}else u();else y(e,[].concat(l(o),["divider:initialized"]));else u()},N=function(e,t){return p((null!=e?e:"").split(/\s+/).filter(Boolean),t).sort().join(" ")},M=function(e){var t,n=e.target.getAttribute(e.attributeName);return["data-unitone-layout","class"].includes(e.attributeName)?N(n,[])!==N(e.oldValue,[]):(null!=n?n:"")!==(null!==(t=e.oldValue)&&void 0!==t?t:"")},j=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!t.reactOwned&&n(e))return function(){};var r=function(e){var n,r,i,o,a=e.attributeName,u=e.oldValue,d=e.target.getAttribute(a),c=s===a?l(null!==(n=null==t||null===(r=t.ignore)||void 0===r?void 0:r.layout)&&void 0!==n?n:[]):"class"===a?l(null!==(i=null==t||null===(o=t.ignore)||void 0===o?void 0:o.className)&&void 0!==i?i:[]):null;return c?N(d,c)!==N(u,c):["style","dir"].includes(a)&&(null!=d?d:"")!==(null!=u?u:"")};return g(e,z,{getResizeValue:m,observeDirectChildrenResize:!0,targetMutation:{options:{attributes:!0,attributeFilter:["style","dir","data-unitone-layout","class"],attributeOldValue:!0},shouldApply:function(t){return S(t,function(t){return t.target===e&&r(t)})}},directChildMutation:{attributeFilter:["style","data-unitone-layout","class"],shouldApply:r}})},P=function(e){var t,n,r=Array.from(e.children),i=p(v(e),["stairs:initialized"]);if(y(e,i),0!==r.length){if(e.style.removeProperty("--unitone--stairs-step-overflow-volume"),e.style.removeProperty("--unitone--max-stairs-step"),r.forEach(function(e){e.style.removeProperty("--unitone--stairs-step")}),O(e)){var o,a=null===(t=(null!==(n=e.getAttribute("data-unitone-layout"))&&void 0!==n?n:"").split(/\s+/).find(function(e){return e.startsWith("-stairs-up:")}))||void 0===t?void 0:t.replace("-stairs-up:",""),u=["up-down","down-up"].includes(a),d=w(e).getPropertyValue("flex-direction"),c=e.getBoundingClientRect().bottom,s=r.reduce(function(e,t){return E(t)?(e.push({child:t,rect:t.getBoundingClientRect()}),e):e},[]),f=0,h=f;s.map(function(e,t){var n,r,i=e.child,a=e.rect,l="row-reverse"===d?(null===(n=o)||void 0===n?void 0:n.left)<=a.left:(null===(r=o)||void 0===r?void 0:r.left)>=a.left;return 0===t||l?f=0:u?f=0===f?1:0:f++,o=a,f>h&&(h=f),{child:i,stairsStep:f}}).forEach(function(e){var t=e.child,n=e.stairsStep;t.style.setProperty("--unitone--stairs-step",n)}),e.style.setProperty("--unitone--max-stairs-step",h);var b=s.reduce(function(e,t){var n=t.child.getBoundingClientRect().bottom-c;return e>n?e:n},0);e.style.setProperty("--unitone--stairs-step-overflow-volume",b),y(e,[].concat(l(i),["stairs:initialized"]))}}else y(e,[].concat(l(i),["stairs:initialized"]))},D=function(e){return S(e,M)||e.some(function(e){return"characterData"===e.type||"childList"===e.type&&[].concat(l(e.addedNodes),l(e.removedNodes)).some(function(e){return!function(e){return(null==e?void 0:e.nodeType)===Node.ELEMENT_NODE&&"vertical-writing__thresholder"===e.getAttribute(s)}(e)})})},T=Symbol.for("@inc2734/unitone-css/layout-initializers"),L=function(){return"undefined"==typeof window||"undefined"==typeof document||"undefined"==typeof MutationObserver||"undefined"==typeof Node?null:(globalThis[T]||(globalThis[T]={initializers:new Map,pendingNodes:new Set,observer:null,rafId:0,hasDOMContentLoadedListener:!1}),globalThis[T])},R=function(e,t){var n,r,i;if(null!=t&&t.isConnected&&t.nodeType===Node.ELEMENT_NODE)if(e.enabled()&&null!==(n=t.matches)&&void 0!==n&&n.call(t,e.selector)){if(!e.initialized.has(t)){var o=e.initialize(t);e.initialized.add(t),"function"==typeof o&&e.cleanups.set(t,o)}}else e.initialized.has(t)&&(null===(r=e.cleanups.get(t))||void 0===r||r(),e.cleanups.delete(t),e.initialized.delete(t),null===(i=e.reset)||void 0===i||i.call(e,t))},V=function(e,t){var n;null!=t&&t.isConnected&&t.nodeType===Node.ELEMENT_NODE&&(R(e,t),null===(n=t.querySelectorAll)||void 0===n||n.call(t,e.selector).forEach(function(t){return R(e,t)}))},I=function(e){var t=L();t&&t.initializers.forEach(function(t){V(t,e)})},x=function(e){var t=L();!t||null!=e&&e.isConnected||(null==e?void 0:e.nodeType)!==Node.ELEMENT_NODE||[e].concat(l(e.querySelectorAll("*"))).forEach(function(e){t.initializers.forEach(function(t){var n,r=null===(n=t.cleanups)||void 0===n?void 0:n.get(e);r&&!e.isConnected&&(t.cleanups.delete(e),t.initialized.delete(e),r())})})},F=function(){var e=L();e&&(e.pendingNodes.forEach(function(e){I(e)}),e.pendingNodes.clear(),e.rafId=0)},W=function(){var e=L();e&&!e.observer&&document.body&&(I(document.body),e.observer=new MutationObserver(function(t){t.forEach(function(t){"attributes"!==t.type?(t.removedNodes.forEach(x),t.addedNodes.forEach(function(t){null!=t&&t.isConnected&&t.nodeType===Node.ELEMENT_NODE&&e.pendingNodes.add(t)})):e.initializers.forEach(function(e){return R(e,t.target)})}),e.pendingNodes.forEach(function(t){t.isConnected||e.pendingNodes.delete(t)}),!e.rafId&&0<e.pendingNodes.size&&(e.rafId=requestAnimationFrame(F))}),e.observer.observe(document.body,{attributes:!0,attributeFilter:["data-unitone-layout","data-unitone-react-layout"],childList:!0,subtree:!0}))};function B(){return B=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},B.apply(null,arguments)}function k(e){"@babel/helpers - typeof";return k="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},k(e)}function q(e){var t=function(e,t){if("object"!=k(e)||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t);if("object"!=k(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==k(t)?t:t+""}function _(e,t,n){return(t=q(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}!function(e){var t=e.key,n=e.selector,r=e.initialize,i=e.reset,o=e.enabled,a=void 0===o?function(){return!0}:o,l=L();if(l&&!l.initializers.has(t)){var u={selector:n,initialize:r,reset:i,enabled:a,initialized:new WeakSet,cleanups:new WeakMap};l.initializers.set(t,u),l.observer?V(u,document.body):"loading"!==document.readyState?W():l.hasDOMContentLoadedListener||(document.addEventListener("DOMContentLoaded",W,{once:!0}),l.hasDOMContentLoadedListener=!0)}}({key:"behaviors/dividers",selector:'[data-unitone-layout*="-divider:"]:not([data-unitone-react-layout])',reset:function(e){return i(e,"divider")},initialize:j});var G="undefined"==typeof window?e.useEffect:e.useLayoutEffect,$={divider:j,stairs:function(e){return!(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).reactOwned&&n(e)?function(){}:g(e,P,{observeDirectChildrenResize:!0,targetMutation:{options:{attributes:!0,attributeFilter:["style","class","dir","data-unitone-layout"],attributeOldValue:!0},shouldApply:function(e){return S(e,M)}},directChildMutation:{attributeFilter:["style","class","dir","data-unitone-layout"],shouldApply:M}})},vertical:function(e){if(!(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).reactOwned&&n(e))return function(){};return g(e,function(e,t){var n;null!==(n=e.parentNode)&&void 0!==n&&n.style&&(e.parentNode.style.height=""),function(e,t){if(e){var n,r=v(e),i=p(r,["vertical-writing:safari","-force-switch"]),o=p(r,["vertical-writing:initialized","vertical-writing:safari","-force-switch"]);if(y(e,i),Array.from(e.children).reverse().some(function(e){if(E(e))return n=e,!0}),n){var a=w(e),u=String(a.getPropertyValue("--unitone--threshold")).trim(),d=!1;if(u&&!/^[+-]?(?:0+\.?0*|\.0+)(?:[a-z]+|%)?$/i.test(u)){var c=e.ownerDocument.createElement("div");c.setAttribute(s,"vertical-writing__thresholder"),e.appendChild(c),d=c.offsetWidth>=e.offsetWidth,c.remove()}d?o.push("-force-switch"):e.getBoundingClientRect().left>n.getBoundingClientRect().left&&o.push("vertical-writing:safari"),y(e,[].concat(l(o),["vertical-writing:initialized"])),(t?function(e){return t.requestAnimationFrame(e)}:function(t){return e.ownerDocument.defaultView.requestAnimationFrame(t)})(function(){var t;if(null!=e&&e.isConnected&&null!==(t=e.parentNode)&&void 0!==t&&t.style){if(d)return void(e.parentNode.style.height="");var r=e.getBoundingClientRect(),i=n.getBoundingClientRect(),o=r.top+r.height,a=i.top+i.height;e.parentNode.style.height=o!==a?"".concat(Math.ceil(a-r.top),"px"):""}})}else y(e,[].concat(l(o),["vertical-writing:initialized"]))}}(e,t)},{observeDirectChildrenResize:!0,shouldApplyChildList:D,targetMutation:{options:{attributes:!0,attributeFilter:["style","class","dir","data-unitone-layout"],attributeOldValue:!0,characterData:!0,childList:!0,subtree:!0},shouldApply:D}})}},H=["gap","columnGap","rowGap","contentMinWidth","revert","sidebar","sidebarWidth","alignItems","overflow","divider","dividerWidth","dividerStyle","dividerColor","style"];function U(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function J(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?U(Object(n),!0).forEach(function(t){_(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):U(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}var K=e.forwardRef(function(n,r){var o=n.gap,a=n.columnGap,l=n.rowGap,d=n.contentMinWidth,c=n.revert,s=n.sidebar,f=n.sidebarWidth,v=n.alignItems,p=n.overflow,y=n.divider,h=n.dividerWidth,b=n.dividerStyle,g=n.dividerColor,m=n.style,w=function(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(-1!==t.indexOf(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],-1===t.indexOf(n)&&{}.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(n,H),E=function(n,r){var o=e.useRef(null),a=e.useRef(null);e.useImperativeHandle(r,function(){return o.current});var l=function(){var e=a.current;e&&(e.target.removeEventListener(t,e.refresh),e.controllers.forEach(function(t,n){t.dispose(),i(e.target,n)}),a.current=null)};return G(function(){return l},[]),G(function(){var e,r=o.current;if((null===(e=a.current)||void 0===e?void 0:e.target)!==r&&l(),r){if(!a.current){var d=new Map,c=function(){return d.forEach(function(e){return e.refresh()})};a.current={target:r,controllers:d,refresh:c},r.addEventListener(t,c)}for(var s=a.current.controllers,f=0,v=Object.entries($);f<v.length;f++){var p=u(v[f],2),y=p[0],h=p[1];if(n[y])if(s.has(y))s.get(y).refresh();else{var b=h(r,{reactOwned:!0});s.set(y,{dispose:b,refresh:b.refresh})}else s.has(y)&&(s.get(y).dispose(),s.delete(y),i(r,y))}}}),o}({divider:""!==(null!=y?y:"")},r);return m=J(J({},m),{},{"--unitone--sidebar-width":""!==f?f:void 0,"--unitone--content-min-width":""!==d?d:void 0,"--unitone--divider-width":""!==h?h:void 0,"--unitone--divider-style":""!==b?b:void 0,"--unitone--divider-color":""!==g?g:void 0}),e.createElement("div",B({"data-unitone-layout":["with-sidebar",c?"-revert":void 0,""!==(null!=o?o:"")?"-gap:".concat(o):void 0,""!==(null!=a?a:"")?"-column-gap:".concat(a):void 0,""!==(null!=l?l:"")?"-row-gap:".concat(l):void 0,""!==(null!=s?s:"")?"-sidebar:".concat(s):void 0,""!==(null!=v?v:"")?"-align-items:".concat(v):void 0,""!==(null!=p?p:"")?"-overflow:".concat(p):void 0,""!==(null!=y?y:"")?"-divider:".concat(y):void 0].filter(Boolean).join(" "),style:m},w,{ref:E,"data-unitone-react-layout":""}),w.children)});exports.WithSidebar=K;

package/dist/library.js

@@ -1 +1 @@
-"use strict";function e(e){if(Array.isArray(e))return e}function t(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function n(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function r(e,t){if(e){if("string"==typeof e)return n(e,t);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?n(e,t):void 0}}function i(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function o(e){return function(e){if(Array.isArray(e))return n(e)}(e)||t(e)||r(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(t,n){return e(t)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,i,o,a,u=[],l=!0,c=!1;try{if(o=(n=n.call(e)).next,0===t);else for(;!(l=(r=o.call(n)).done)&&(u.push(r.value),u.length!==t);l=!0);}catch(e){c=!0,i=e}finally{try{if(!l&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(c)throw i}}return u}}(t,n)||r(t,n)||i()}var u=function(e){var t=e.ownerDocument.defaultView,n=new Set,r=new Set,i=!1;return{get disposed(){return i},addCleanup:function(e){i?e():n.add(e)},requestAnimationFrame:function(e){if(i)return 0;if(null==t||!t.requestAnimationFrame)return e(),0;var n=t.requestAnimationFrame(function(t){r.delete(n),i||e(t)});return r.add(n),n},dispose:function(){i||(i=!0,r.forEach(function(e){return t.cancelAnimationFrame(e)}),r.clear(),n.forEach(function(e){return e()}),n.clear())}}};function l(e,t){var n="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!n){if(Array.isArray(e)||(n=function(e,t){if(e){if("string"==typeof e)return c(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?c(e,t):void 0}}(e))||t){n&&(e=n);var r=0,i=function(){};return{s:i,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,a=!0,u=!1;return{s:function(){n=n.call(e)},n:function(){var e=n.next();return a=e.done,e},e:function(e){u=!0,o=e},f:function(){try{a||null==n.return||n.return()}finally{if(u)throw o}}}}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}var s="data-unitone-layout",d="".concat(200,"px 0px"),f=function(e){var t;return(null!==(t=e.getAttribute(s))&&void 0!==t?t:"").split(/\s+/).filter(Boolean)},v=function(e,t){return e.filter(function(e){return!t.includes(e)})},p=function(e,t){var n,r=t.filter(Boolean).join(" ");(null!==(n=e.getAttribute(s))&&void 0!==n?n:"")!==r&&e.setAttribute(s,r)},h=function(e,t,n,r){var i=new MutationObserver(function(t){!r.disposed&&e.isConnected&&n(t)});i.observe(e,t),r.addCleanup(function(){return i.disconnect()})},g=function(e,t,n){var r=new IntersectionObserver(function(e){var r=a(e,1)[0];r&&!n.disposed&&t(r)},{rootMargin:d});r.observe(e),n.addCleanup(function(){return r.disconnect()})},y=function(e,t,n){var r=0;return function(){n.disposed||r||(r=n.requestAnimationFrame(function(){r=0,null!=e&&e.isConnected&&t(e)}))}},m=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.getResizeValue,i=n.observeDirectChildrenResize,o=void 0!==i&&i,a=n.targetMutation,c=n.directChildMutation,s=u(e),d="undefined"!=typeof IntersectionObserver,f=!d||S(e),v=!f,p=function(){!s.disposed&&e.isConnected&&(f?(v=!1,t(e,s)):v=!0)},m=y(e,p,s),b=function(){!s.disposed&&null!=e&&e.isConnected&&(v=!0,f&&m())},w=function(e,t,n,r){var i=new WeakMap,o=R(function(){return t(e)},250),a=new ResizeObserver(function(e){if(!n.disposed){var t,a=!1,u=l(e);try{for(u.s();!(t=u.n()).done;){var c=t.value,s=null==r?void 0:r(c);i.has(c.target)&&void 0!==s&&s===i.get(c.target)||(a=!0),i.set(c.target,s)}}catch(e){u.e(e)}finally{u.f()}a&&o()}});return n.addCleanup(o.cancel),n.addCleanup(function(){return a.disconnect()}),a.observe(e),a}(e,b,s,r);return o&&function(e,t,n,r,i){var o=new Set,a=i?new MutationObserver(function(t){!r.disposed&&e.isConnected&&E(t,function(t){return t.target.parentElement===e&&i.shouldApply(t)})&&n(e)}):null;r.addCleanup(function(){o.clear(),null==a||a.disconnect()});var u=function(){var n,r=l(o);try{for(r.s();!(n=r.n()).done;){var u=n.value;u.parentElement!==e&&(t.unobserve(u),o.delete(u))}}catch(e){r.e(e)}finally{r.f()}null==a||a.disconnect();var c,s=l(e.children);try{for(s.s();!(c=s.n()).done;){var d=c.value;o.has(d)||(t.observe(d),o.add(d)),null==a||a.observe(d,{attributes:!0,attributeFilter:i.attributeFilter,attributeOldValue:!0})}}catch(e){s.e(e)}finally{s.f()}};u(),h(e,{childList:!0},function(){u(),n(e)},r)}(e,w,b,s,c),d&&g(e,function(e){(f=e.isIntersecting)&&v&&b()},s),a&&h(e,a.options,function(e){a.shouldApply(e)&&b()},s),f&&p(),s.dispose},b=function(e){var t;return null===(t=e.borderBoxSize)||void 0===t?void 0:t[0].inlineSize},w=function(e){var t;return parseInt(null===(t=e.contentRect)||void 0===t?void 0:t.width)},C=function(e){var t;return(null!==(t=e.ownerDocument.defaultView)&&void 0!==t?t:window).getComputedStyle(e)},A=function(e){var t=C(e),n=t.position,r=t.display;return!["absolute","fixed"].includes(n)&&"none"!==r},z=function(e){return!(null==e||!e.isConnected)&&0<e.getClientRects().length},S=function(e){var t;if(!z(e))return!1;var n=null==e||null===(t=e.ownerDocument)||void 0===t?void 0:t.defaultView;if(!n)return!0;var r=e.getBoundingClientRect(),i=n.innerWidth,o=n.innerHeight;return r.bottom>-200&&r.right>0&&r.top<o+200&&r.left<i},x=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.direction,r=void 0===n?"ltr":n,i=t.flexDirection,o=void 0===i?"row":i,a=t.writingMode,u=void 0===a?"horizontal-tb":a,l=!u.startsWith("horizontal"),c="rtl"===r!==("sideways-lr"===u),s=l?e.top:e.left,d=l?e.bottom:e.right;if(c){var f=[-d,-s];s=f[0],d=f[1]}if("row-reverse"===o){var v=[-d,-s];s=v[0],d=v[1]}return{start:s,end:d}},E=function(e,t){var n=new Map;return e.some(function(e){var r;if("attributes"!==e.type)return!1;var i=null!==(r=n.get(e.target))&&void 0!==r?r:new Set;return!i.has(e.attributeName)&&(i.add(e.attributeName),n.set(e.target,i),t(e))})};function R(e,t){var n,r=function(){for(var r=arguments.length,i=new Array(r),o=0;o<r;o++)i[o]=arguments[o];var a=this;clearTimeout(n),n=setTimeout(function(){n=void 0,e.apply(a,i)},t)};return r.cancel=function(){clearTimeout(n),n=void 0},r}var M=function(e){var t,n,r,i=Array.from(null!==(t=null==e?void 0:e.children)&&void 0!==t?t:[]),a=v(f(e),["divider:initialized","-stack"]);p(e,a);var u=i.map(function(e){return{child:e,layoutTokens:v(f(e),["-bol","-linewrap"])}}),c=function(){u.forEach(function(e){var t=e.child,n=e.layoutTokens;p(t,n)})};if(a.some(function(e){return e.startsWith("-divider:")}))if(0!==i.length)if(z(e)){var s=null!==(n=null==e||null===(r=e.ownerDocument)||void 0===r?void 0:r.defaultView)&&void 0!==n?n:"undefined"!=typeof window?window:void 0;if(null!=s&&s.getComputedStyle){var d,h,g=C(e),y={direction:g.getPropertyValue("direction"),flexDirection:g.getPropertyValue("flex-direction"),writingMode:g.getPropertyValue("writing-mode")},m=[],b=l(u);try{for(b.s();!(d=b.n()).done;){var w=d.value;A(w.child)&&(w.inlineRect=x(w.child.getBoundingClientRect(),y),m.push(w))}}catch(e){b.e(e)}finally{b.f()}if(0===m.length)return c(),void p(e,[].concat(o(a),["divider:initialized"]));var S=!1,E=!0;m.forEach(function(e,t){var n=e.layoutTokens,r=e.inlineRect;0===t||r.start<h.end-.5||r.start<=h.start+.5?(n.push("-bol"),0<t&&(S=!0)):E=!1,S&&n.push("-linewrap"),h=r}),c();var R=o(a);E&&R.push("-stack"),R.push("divider:initialized"),p(e,R)}else c()}else c();else p(e,[].concat(o(a),["divider:initialized"]));else c()},O=function(e,t){return v((null!=e?e:"").split(" "),t).join(" ")},V=function(e){var t,n,r=Array.from(e.children),i=v(f(e),["stairs:initialized"]);if(p(e,i),0!==r.length){if(e.style.removeProperty("--unitone--stairs-step-overflow-volume"),e.style.removeProperty("--unitone--max-stairs-step"),r.forEach(function(e){e.style.removeProperty("--unitone--stairs-step")}),z(e)){var a,u=null===(t=(null!==(n=e.getAttribute("data-unitone-layout"))&&void 0!==n?n:"").split(/\s+/).find(function(e){return e.startsWith("-stairs-up:")}))||void 0===t?void 0:t.replace("-stairs-up:",""),l=["up-down","down-up"].includes(u),c=C(e).getPropertyValue("flex-direction"),s=e.getBoundingClientRect().bottom,d=r.reduce(function(e,t){return A(t)?(e.push({child:t,rect:t.getBoundingClientRect()}),e):e},[]),h=0,g=h;d.map(function(e,t){var n,r,i=e.child,o=e.rect,u="row-reverse"===c?(null===(n=a)||void 0===n?void 0:n.left)<=o.left:(null===(r=a)||void 0===r?void 0:r.left)>=o.left;return 0===t||u?h=0:l?h=0===h?1:0:h++,a=o,h>g&&(g=h),{child:i,stairsStep:h}}).forEach(function(e){var t=e.child,n=e.stairsStep;t.style.setProperty("--unitone--stairs-step",n)}),e.style.setProperty("--unitone--max-stairs-step",g);var y=d.reduce(function(e,t){var n=t.child.getBoundingClientRect().bottom-s;return e>n?e:n},0);e.style.setProperty("--unitone--stairs-step-overflow-volume",y),p(e,[].concat(o(i),["stairs:initialized"]))}}else p(e,[].concat(o(i),["stairs:initialized"]))},q=function(e){return e.some(function(e){return"attributes"===e.type||"childList"===e.type&&[].concat(o(e.addedNodes),o(e.removedNodes)).some(function(e){return!function(e){return(null==e?void 0:e.nodeType)===Node.ELEMENT_NODE&&"vertical-writing__thresholder"===e.getAttribute(s)}(e)})})},N=function(e,t){if(e){var n,r=f(e),i=v(r,["vertical-writing:safari","-force-switch"]),a=v(r,["vertical-writing:initialized","vertical-writing:safari","-force-switch"]);if(p(e,i),Array.from(e.children).reverse().some(function(e){if(A(e))return n=e,!0}),n){var u=C(e),l=String(u.getPropertyValue("--unitone--threshold")).trim(),c=!1;if(l&&!/^[+-]?(?:0+\.?0*|\.0+)(?:[a-z]+|%)?$/i.test(l)){var d=e.ownerDocument.createElement("div");d.setAttribute(s,"vertical-writing__thresholder"),e.appendChild(d),c=d.offsetWidth>=e.offsetWidth,d.remove()}if(c)a.push("-force-switch");else e.getBoundingClientRect().left>n.getBoundingClientRect().left&&a.push("vertical-writing:safari");p(e,[].concat(o(a),["vertical-writing:initialized"])),(t?function(e){return t.requestAnimationFrame(e)}:function(t){return e.ownerDocument.defaultView.requestAnimationFrame(t)})(function(){var t;if(null!=e&&e.isConnected&&null!==(t=e.parentNode)&&void 0!==t&&t.style){if(c)return void(e.parentNode.style.height="");var r=e.getBoundingClientRect(),i=n.getBoundingClientRect(),o=r.top+r.height,a=i.top+i.height;e.parentNode.style.height=o!==a?"".concat(Math.ceil(a-r.top),"px"):""}})}else p(e,[].concat(o(a),["vertical-writing:initialized"]))}},D=new WeakSet,F=new WeakMap,L=function(e){return null==e?void 0:e.getAnimations().find(function(e){var t=e.animationName;return["marquee","marquee-reverse"].includes(t)})},I=function(e,t){var n=["paddingLeft","paddingRight","borderLeftWidth","borderRightWidth"].reduce(function(t,n){return t+(parseFloat(e[n])||0)},0);return(parseFloat(e.width)||0)+(t?n:0)-("border-box"===e.boxSizing?n:0)},T=function(n,o){var a,u=e(a=n)||t(a)||r(a)||i(),l=u[0],s=c(u).slice(1),d=L(l);if(d){var f=function(){null!=o&&o.disposed||!l.isConnected||L(l)!==d||s.forEach(function(e){var t=L(e);if(e.isConnected&&t){var n=function(){null!=o&&o.disposed||!e.isConnected||L(l)!==d||(t.currentTime=d.currentTime)};n(),t.pending&&t.ready.then(n,function(){})}})};f(),d.pending&&d.ready.then(f,function(){})}},W=function(e,t,n){var r,i,a=[],u=[],c=l(e.children);try{for(c.s();!(i=c.n()).done;){var s=i.value;D.has(s)?u.push(s):s.matches('[data-unitone-layout~="marquee"]')&&a.push(s)}}catch(e){c.e(e)}finally{c.f()}var d=a[0],v=F.get(e);if(null!=t||(t=(null==v?void 0:v.source)!==(null==d?void 0:d.outerHTML)||!(null==d||!d.querySelector("input, textarea, select"))),t||(t=(null==v?void 0:v.original)!==d),(t||1!==a.length)&&(u.forEach(function(e){return e.remove()}),u.length=0),!d||!z(e))return F.delete(e),{originals:a};var h=C(e),g=C(d),y=I(h,!1),m=I(g,!0),b=h.columnGap,w=(parseFloat(b)||0)*(b.endsWith("%")?y/100:1),A="".concat(w,"px");e.style.getPropertyValue("--unitone--marquee-gap")!==A&&e.style.setProperty("--unitone--marquee-gap",A);var S=1===a.length&&e.childElementCount-u.length===1&&0<y&&0<m?Math.ceil((y+w)/(m+w)):0;u.splice(S).forEach(function(e){return e.remove()});for(var x,E=null!==(r=u.at(-1))&&void 0!==r?r:d,R=e.ownerDocument.createDocumentFragment();u.length<S;){var M=d.cloneNode(!0);M.setAttribute("aria-hidden","true"),M.setAttribute("inert",""),D.add(M),u.push(M),R.append(M),null!=x||(x=M)}return x&&E.after(R),[].concat(a,u).forEach(function(e){var t=f(e);t.includes("marquee:initialized")||p(e,[].concat(o(t),["marquee:initialized"]))}),F.set(e,{original:d,wrapperWidth:y,width:m,vertical:!g.writingMode.startsWith("horizontal"),source:t||!v?d.outerHTML:v.source}),T([].concat(a,u),n),{originals:a,firstClone:x}};exports.debounce=R,exports.dividersResizeObserver=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=function(e){var n,r,i,a,u=e.attributeName,l=e.oldValue,c=e.target.getAttribute(u),d=s===u?[].concat(o(null!==(n=null==t||null===(r=t.ignore)||void 0===r?void 0:r.layout)&&void 0!==n?n:[]),["divider:initialized","-bol","-linewrap","-stack"]):"class"===u?o(null!==(i=null==t||null===(a=t.ignore)||void 0===a?void 0:a.className)&&void 0!==i?i:[]):null;return d?O(c,d)!==O(l,d):["style","dir"].includes(u)&&(null!=c?c:"")!==(null!=l?l:"")};return m(e,M,{getResizeValue:b,observeDirectChildrenResize:!0,targetMutation:{options:{attributes:!0,attributeFilter:["style","dir","data-unitone-layout","class"],attributeOldValue:!0},shouldApply:function(t){return E(t,function(t){return t.target===e&&n(t)})}},directChildMutation:{attributeFilter:["style","data-unitone-layout","class"],shouldApply:n}})},exports.marqueeResizeObserver=function(e){var t=u(e),n="undefined"==typeof IntersectionObserver||S(e),r=!0,i=new Set;t.addCleanup(function(){i.clear(),F.delete(e)});var a=function(){d.observe(e,{attributes:!0,childList:!0}),i.forEach(function(e){d.observe(e,{attributes:!0,childList:!0,characterData:!0,subtree:!0})})},l=function(t){return t.target!==e||"childList"===t.type&&[].concat(o(t.addedNodes),o(t.removedNodes)).some(function(e){return!D.has(e)})},c=function(){if(!t.disposed&&e.isConnected&&n){r||(r=d.takeRecords().some(l)),d.disconnect();var o=W(e,r,t).originals;r=!1,i.forEach(function(e){o.includes(e)||(v.unobserve(e),i.delete(e))}),o.forEach(function(e){i.has(e)||(v.observe(e,{box:"border-box"}),i.add(e))}),a()}},s=y(e,c,t),d=new MutationObserver(function(e){e.some(function(e){return"childList"!==e.type||l(e)})&&(r||(r=e.some(l)),s())}),v=new ResizeObserver(function(t){var n=F.get(e);n&&!t.some(function(t){var r;if(t.target===e)return Math.abs(t.contentRect.width-n.wrapperWidth)>.01;var i=null===(r=t.borderBoxSize)||void 0===r?void 0:r[0],o=n.vertical?null==i?void 0:i.blockSize:null==i?void 0:i.inlineSize;return t.target!==n.original||void 0===o||Math.abs(o-n.width)>.01})||c()});t.addCleanup(function(){return d.disconnect()}),t.addCleanup(function(){return v.disconnect()}),v.observe(e),a(),"undefined"!=typeof IntersectionObserver&&g(e,function(e){var t=n;(n=e.isIntersecting)&&!t&&c()},t);var p=y(e,function(){return T(function(e){return Array.from(e.querySelectorAll(':scope > [data-unitone-layout~="marquee"]'))}(e),t)},t),h=function(){f(e).includes("-pause-on-hover")&&p()};["pointerenter","pointerleave","focusin","focusout"].forEach(function(n){e.addEventListener(n,h),t.addCleanup(function(){return e.removeEventListener(n,h)})});var m=e.ownerDocument.defaultView;return m.addEventListener("resize",s),t.addCleanup(function(){return m.removeEventListener("resize",s)}),c(),t.dispose},exports.setColumnCountForVertical=function(e){return N(e)},exports.setDividerLinewrap=M,exports.setMarquee=function(e){return W(e).firstClone},exports.setStairsStep=V,exports.stairsResizeObserver=function(e){return m(e,V,{observeDirectChildrenResize:!0})},exports.verticalsResizeObserver=function(e){return m(e,function(e,t){var n;null!==(n=e.parentNode)&&void 0!==n&&n.style&&(e.parentNode.style.height=""),N(e,t)},{getResizeValue:w,targetMutation:{options:{attributes:!0,attributeFilter:["style"],childList:!0,subtree:!0},shouldApply:q}})};
+"use strict";function e(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function t(t,n){if(t){if("string"==typeof t)return e(t,n);var r={}.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?e(t,n):void 0}}function n(n){return function(t){if(Array.isArray(t))return e(t)}(n)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(n)||t(n)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,i,o,a,u=[],l=!0,c=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=o.call(n)).done)&&(u.push(r.value),u.length!==t);l=!0);}catch(e){c=!0,i=e}finally{try{if(!l&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(c)throw i}}return u}}(e,n)||t(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}var i=function(e){var t;return!(null==e||null===(t=e.hasAttribute)||void 0===t||!t.call(e,"data-unitone-react-layout"))&&(e.dispatchEvent(new e.ownerDocument.defaultView.Event("unitone:layout-refresh")),!0)},o=function(e){var t=e.ownerDocument.defaultView,n=new Set,r=new Set,i=!1;return{get disposed(){return i},addCleanup:function(e){i?e():n.add(e)},requestAnimationFrame:function(e){if(i)return 0;if(null==t||!t.requestAnimationFrame)return e(),0;var n=t.requestAnimationFrame(function(t){r.delete(n),i||e(t)});return r.add(n),n},dispose:function(){i||(i=!0,r.forEach(function(e){return t.cancelAnimationFrame(e)}),r.clear(),n.forEach(function(e){return e()}),n.clear())}}};function a(e,t){var n="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!n){if(Array.isArray(e)||(n=function(e,t){if(e){if("string"==typeof e)return u(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?u(e,t):void 0}}(e))||t){n&&(e=n);var r=0,i=function(){};return{s:i,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,a=!0,l=!1;return{s:function(){n=n.call(e)},n:function(){var e=n.next();return a=e.done,e},e:function(e){l=!0,o=e},f:function(){try{a||null==n.return||n.return()}finally{if(l)throw o}}}}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}var l="data-unitone-marquee-copy",c="unitone:marquee-refresh",s=function(e){return e.matches("[data-unitone-marquee-react]")},d=function(e){return e.ownerDocument.defaultView.getComputedStyle(e)},f=function(e){return e.isConnected&&e.getClientRects().length>0},v=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=["paddingLeft","paddingRight","borderLeftWidth","borderRightWidth"].reduce(function(t,n){return t+(parseFloat(e[n])||0)},0);return(parseFloat(e.width)||0)+(t?n:0)-("border-box"===e.boxSizing?n:0)},p=function(e){var t,n,r=Array.from(e.children).filter(function(e){return e.matches('[data-unitone-layout~="marquee"]')}),i=1===r.length?r[0]:null,o=[],u=[],c=!1,s=a(null!==(t=null==i?void 0:i.children)&&void 0!==t?t:[]);try{for(s.s();!(n=s.n()).done;){var d=n.value;d.hasAttribute("data-unitone-marquee-boundary")?c=!0:c||d.hasAttribute(l)?u.push(d):o.push(d)}}catch(e){s.e(e)}finally{s.f()}return{marquee:i,originals:o,copies:u}},h=function(e){for(var t=0,n=[[l,""],["aria-hidden","true"],["inert",""]];t<n.length;t++){var i=r(n[t],2),o=i[0],a=i[1];e.getAttribute(o)!==a&&e.setAttribute(o,a)}},g=function(e,t){var n=t.marquee,r=t.originals,i=t.copies,o={groups:0,distance:0,rtl:!1};if(!n||!f(e)||!f(n))return o;var a=d(n);if(!a.writingMode.startsWith("horizontal"))return o;var u=d(e),l=v(u),c=r.filter(f);if(!(l>0&&c.some(function(e){return e.getBoundingClientRect().width>0})))return o;var s="rtl"===a.direction,p=i.find(f);if(!p)return{groups:1,distance:0,rtl:s};var h=c[0].getBoundingClientRect(),g=p.getBoundingClientRect(),y=e.getBoundingClientRect().width/v(u,!0),m=(s?h.right-g.right:g.left-h.left)/y;return m>0&&Number.isFinite(m)?{groups:Math.ceil(l/m),distance:m,rtl:s}:o},y=function(e,t){var r=(arguments.length>2&&void 0!==arguments[2]?arguments[2]:{}).listenForRefresh,i=void 0===r||r,u=o(e),l=new Set,s=new WeakMap,d=0,f=function(){if(!u.disposed&&e.isConnected){h.disconnect();try{t();var r,i=p(e),o=i.marquee,c=i.originals,d=new Set([e,o].concat(n(c)).filter(Boolean)),f=a(l);try{for(f.s();!(r=f.n()).done;){var v=r.value;d.has(v)||(g.unobserve(v),l.delete(v),s.delete(v))}}catch(e){f.e(e)}finally{f.f()}var y,m=a(d);try{for(m.s();!(y=m.n()).done;){var b=y.value;l.has(b)||(g.observe(b,{box:"border-box"}),l.add(b))}}catch(e){m.e(e)}finally{m.f()}}finally{!function(){h.observe(e,{attributes:!0,childList:!0,characterData:!0,subtree:!0});for(var t=e.parentElement;t;t=t.parentElement)h.observe(t,{attributes:!0})}()}}},v=function(){u.disposed||d||(d=u.requestAnimationFrame(function(){d=0,f()}))},h=new MutationObserver(v),g=new ResizeObserver(function(e){var t,n=!1,r=a(e);try{for(r.s();!(t=r.n()).done;){var i,o=t.value,u=null===(i=o.borderBoxSize)||void 0===i?void 0:i[0],l=[o.contentRect.width,o.contentRect.height,null==u?void 0:u.inlineSize,null==u?void 0:u.blockSize].join(",");n||(n=s.get(o.target)!==l),s.set(o.target,l)}}catch(e){r.e(e)}finally{r.f()}n&&f()}),y=e.ownerDocument.defaultView;return y.addEventListener("resize",v),i&&e.addEventListener(c,f),u.addCleanup(function(){h.disconnect(),g.disconnect(),l.clear(),y.removeEventListener("resize",v),i&&e.removeEventListener(c,f)}),f(),{refresh:f,dispose:u.dispose}},m=function(e){e.dispatchEvent(new e.ownerDocument.defaultView.Event(c))};function b(e,t){var n="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!n){if(Array.isArray(e)||(n=function(e,t){if(e){if("string"==typeof e)return w(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?w(e,t):void 0}}(e))||t){n&&(e=n);var r=0,i=function(){};return{s:i,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,a=!0,u=!1;return{s:function(){n=n.call(e)},n:function(){var e=n.next();return a=e.done,e},e:function(e){u=!0,o=e},f:function(){try{a||null==n.return||n.return()}finally{if(u)throw o}}}}function w(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}var A="data-unitone-layout",C="".concat(200,"px 0px"),S=function(e){var t;return(null!==(t=e.getAttribute(A))&&void 0!==t?t:"").split(/\s+/).filter(Boolean)},z=function(e,t){return e.filter(function(e){return!t.includes(e)})},R=function(e,t){var n,r=t.filter(Boolean).join(" ");(null!==(n=e.getAttribute(A))&&void 0!==n?n:"")!==r&&e.setAttribute(A,r)},x=function(e,t,n,r){var i=new MutationObserver(function(t){!r.disposed&&e.isConnected&&n(t)});i.observe(e,t),r.addCleanup(function(){return i.disconnect()})},E=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=n.getResizeValue,a=n.observeDirectChildrenResize,u=void 0!==a&&a,l=n.targetMutation,c=n.directChildMutation,s=n.shouldApplyChildList,d=o(e),f="undefined"!=typeof IntersectionObserver,v=!f||D(e),p=!v,h=function(){!d.disposed&&e.isConnected&&(v?(p=!1,t(e,d)):p=!0)},g=function(e,t,n){var r=0;return function(){n.disposed||r||(r=n.requestAnimationFrame(function(){r=0,null!=e&&e.isConnected&&t(e)}))}}(e,h,d),y=function(){!d.disposed&&null!=e&&e.isConnected&&(p=!0,v&&g())},m=function(e,t,n,r){var i=new WeakMap,o=N(function(){return t(e)},250),a=new ResizeObserver(function(e){if(!n.disposed){var t,a=!1,u=b(e);try{for(u.s();!(t=u.n()).done;){var l=t.value,c=null==r?void 0:r(l);i.has(l.target)&&void 0!==c&&c===i.get(l.target)||(a=!0),i.set(l.target,c)}}catch(e){u.e(e)}finally{u.f()}a&&o()}});return n.addCleanup(o.cancel),n.addCleanup(function(){return a.disconnect()}),a.observe(e),a}(e,y,d,i);return u&&function(e,t,n,r,i,o){var a=new Set,u=i?new MutationObserver(function(t){!r.disposed&&e.isConnected&&B(t,function(t){return t.target.parentElement===e&&i.shouldApply(t)})&&n(e)}):null;r.addCleanup(function(){a.clear(),null==u||u.disconnect()});var l=function(){var n,r=b(a);try{for(r.s();!(n=r.n()).done;){var o=n.value;o.parentElement!==e&&(t.unobserve(o),a.delete(o))}}catch(e){r.e(e)}finally{r.f()}null==u||u.disconnect();var l,c=b(e.children);try{for(c.s();!(l=c.n()).done;){var s=l.value;a.has(s)||(t.observe(s),a.add(s)),null==u||u.observe(s,{attributes:!0,attributeFilter:i.attributeFilter,attributeOldValue:!0})}}catch(e){c.e(e)}finally{c.f()}};l(),x(e,{childList:!0},function(t){l(),o&&!o(t)||n(e)},r)}(e,m,y,d,c,s),f&&function(e,t,n){var i=new IntersectionObserver(function(e){var i=r(e,1)[0];i&&!n.disposed&&t(i)},{rootMargin:C});i.observe(e),n.addCleanup(function(){return i.disconnect()})}(e,function(e){(v=e.isIntersecting)&&p&&y()},d),l&&x(e,l.options,function(e){l.shouldApply(e)&&y()},d),v&&h(),Object.assign(d.dispose,{refresh:h})},M=function(e){var t;return null===(t=e.borderBoxSize)||void 0===t?void 0:t[0].inlineSize},q=function(e){var t;return(null!==(t=e.ownerDocument.defaultView)&&void 0!==t?t:window).getComputedStyle(e)},O=function(e){var t=q(e),n=t.position,r=t.display;return!["absolute","fixed"].includes(n)&&"none"!==r},V=function(e){return!(null==e||!e.isConnected)&&0<e.getClientRects().length},D=function(e){var t;if(!V(e))return!1;var n=null==e||null===(t=e.ownerDocument)||void 0===t?void 0:t.defaultView;if(!n)return!0;var r=e.getBoundingClientRect(),i=n.innerWidth,o=n.innerHeight;return r.bottom>-200&&r.right>0&&r.top<o+200&&r.left<i},F=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.direction,r=void 0===n?"ltr":n,i=t.flexDirection,o=void 0===i?"row":i,a=t.writingMode,u=void 0===a?"horizontal-tb":a,l=!u.startsWith("horizontal"),c="rtl"===r!==("sideways-lr"===u),s=l?e.top:e.left,d=l?e.bottom:e.right;if(c){var f=[-d,-s];s=f[0],d=f[1]}if("row-reverse"===o){var v=[-d,-s];s=v[0],d=v[1]}return{start:s,end:d}},B=function(e,t){var n=new Map;return e.some(function(e){var r;if("attributes"!==e.type)return!1;var i=null!==(r=n.get(e.target))&&void 0!==r?r:new Set;return!i.has(e.attributeName)&&(i.add(e.attributeName),n.set(e.target,i),t(e))})};function N(e,t){var n,r=function(){for(var r=arguments.length,i=new Array(r),o=0;o<r;o++)i[o]=arguments[o];var a=this;clearTimeout(n),n=setTimeout(function(){n=void 0,e.apply(a,i)},t)};return r.cancel=function(){clearTimeout(n),n=void 0},r}var L=function(e){var t,r,i,o=Array.from(null!==(t=null==e?void 0:e.children)&&void 0!==t?t:[]),a=z(S(e),["divider:initialized","-stack"]);R(e,a);var u=o.map(function(e){return{child:e,layoutTokens:z(S(e),["-bol","-linewrap"])}}),l=function(){u.forEach(function(e){var t=e.child,n=e.layoutTokens;R(t,n)})};if(a.some(function(e){return e.startsWith("-divider:")}))if(0!==o.length)if(V(e)){var c=null!==(r=null==e||null===(i=e.ownerDocument)||void 0===i?void 0:i.defaultView)&&void 0!==r?r:"undefined"!=typeof window?window:void 0;if(null!=c&&c.getComputedStyle){var s,d,f=q(e),v={direction:f.getPropertyValue("direction"),flexDirection:f.getPropertyValue("flex-direction"),writingMode:f.getPropertyValue("writing-mode")},p=[],h=b(u);try{for(h.s();!(s=h.n()).done;){var g=s.value;O(g.child)&&(g.inlineRect=F(g.child.getBoundingClientRect(),v),p.push(g))}}catch(e){h.e(e)}finally{h.f()}if(0===p.length)return l(),void R(e,[].concat(n(a),["divider:initialized"]));var y=!1,m=!0;p.forEach(function(e,t){var n=e.layoutTokens,r=e.inlineRect;0===t||r.start<d.end-.5||r.start<=d.start+.5?(n.push("-bol"),0<t&&(y=!0)):m=!1,y&&n.push("-linewrap"),d=r}),l();var w=n(a);m&&w.push("-stack"),w.push("divider:initialized"),R(e,w)}else l()}else l();else R(e,[].concat(n(a),["divider:initialized"]));else l()},j=function(e,t){return z((null!=e?e:"").split(/\s+/).filter(Boolean),t).sort().join(" ")},I=function(e){var t,n=e.target.getAttribute(e.attributeName);return["data-unitone-layout","class"].includes(e.attributeName)?j(n,[])!==j(e.oldValue,[]):(null!=n?n:"")!==(null!==(t=e.oldValue)&&void 0!==t?t:"")},P=function(e){var t,r,i=Array.from(e.children),o=z(S(e),["stairs:initialized"]);if(R(e,o),0!==i.length){if(e.style.removeProperty("--unitone--stairs-step-overflow-volume"),e.style.removeProperty("--unitone--max-stairs-step"),i.forEach(function(e){e.style.removeProperty("--unitone--stairs-step")}),V(e)){var a,u=null===(t=(null!==(r=e.getAttribute("data-unitone-layout"))&&void 0!==r?r:"").split(/\s+/).find(function(e){return e.startsWith("-stairs-up:")}))||void 0===t?void 0:t.replace("-stairs-up:",""),l=["up-down","down-up"].includes(u),c=q(e).getPropertyValue("flex-direction"),s=e.getBoundingClientRect().bottom,d=i.reduce(function(e,t){return O(t)?(e.push({child:t,rect:t.getBoundingClientRect()}),e):e},[]),f=0,v=f;d.map(function(e,t){var n,r,i=e.child,o=e.rect,u="row-reverse"===c?(null===(n=a)||void 0===n?void 0:n.left)<=o.left:(null===(r=a)||void 0===r?void 0:r.left)>=o.left;return 0===t||u?f=0:l?f=0===f?1:0:f++,a=o,f>v&&(v=f),{child:i,stairsStep:f}}).forEach(function(e){var t=e.child,n=e.stairsStep;t.style.setProperty("--unitone--stairs-step",n)}),e.style.setProperty("--unitone--max-stairs-step",v);var p=d.reduce(function(e,t){var n=t.child.getBoundingClientRect().bottom-s;return e>n?e:n},0);e.style.setProperty("--unitone--stairs-step-overflow-volume",p),R(e,[].concat(n(o),["stairs:initialized"]))}}else R(e,[].concat(n(o),["stairs:initialized"]))},T=function(e){return B(e,I)||e.some(function(e){return"characterData"===e.type||"childList"===e.type&&[].concat(n(e.addedNodes),n(e.removedNodes)).some(function(e){return!function(e){return(null==e?void 0:e.nodeType)===Node.ELEMENT_NODE&&"vertical-writing__thresholder"===e.getAttribute(A)}(e)})})},W=function(e,t){if(e){var r,i=S(e),o=z(i,["vertical-writing:safari","-force-switch"]),a=z(i,["vertical-writing:initialized","vertical-writing:safari","-force-switch"]);if(R(e,o),Array.from(e.children).reverse().some(function(e){if(O(e))return r=e,!0}),r){var u=q(e),l=String(u.getPropertyValue("--unitone--threshold")).trim(),c=!1;if(l&&!/^[+-]?(?:0+\.?0*|\.0+)(?:[a-z]+|%)?$/i.test(l)){var s=e.ownerDocument.createElement("div");s.setAttribute(A,"vertical-writing__thresholder"),e.appendChild(s),c=s.offsetWidth>=e.offsetWidth,s.remove()}if(c)a.push("-force-switch");else e.getBoundingClientRect().left>r.getBoundingClientRect().left&&a.push("vertical-writing:safari");R(e,[].concat(n(a),["vertical-writing:initialized"])),(t?function(e){return t.requestAnimationFrame(e)}:function(t){return e.ownerDocument.defaultView.requestAnimationFrame(t)})(function(){var t;if(null!=e&&e.isConnected&&null!==(t=e.parentNode)&&void 0!==t&&t.style){if(c)return void(e.parentNode.style.height="");var n=e.getBoundingClientRect(),i=r.getBoundingClientRect(),o=n.top+n.height,a=i.top+i.height;e.parentNode.style.height=o!==a?"".concat(Math.ceil(a-n.top),"px"):""}})}else R(e,[].concat(n(a),["vertical-writing:initialized"]))}},k=new WeakMap,_=function(e){var t,r=p(e),i=r.marquee,o=r.originals;if(i){var a,u=k.get(e),l=o.map(function(e){return e.outerHTML}).join("");((null==u?void 0:u.marquee)!==i||(null==u?void 0:u.source)!==l||o.some(function(e){return e.matches("input, textarea, select")||e.querySelector("input, textarea, select")}))&&(r.copies.forEach(function(e){return e.remove()}),r.copies=[]);var c=function(t){var n=t*o.length;r.copies.splice(n).forEach(function(e){return e.remove()});for(var u=e.ownerDocument.createDocumentFragment();r.copies.length<n;){var l=o[r.copies.length%o.length].cloneNode(!0);h(l),r.copies.push(l),u.append(l),null!=a||(a=l)}u.childNodes.length&&i.append(u)},s=g(e,r);if(s.groups&&!r.copies.length&&(c(1),s=g(e,r)),c(s.groups),i){var d="".concat(s.rtl?s.distance:-s.distance,"px");if(i.style.getPropertyValue("--unitone--marquee-travel")!==d&&i.style.setProperty("--unitone--marquee-travel",d),s.distance>0){var f=S(i);f.includes("marquee:initialized")||R(i,[].concat(n(f),["marquee:initialized"]))}}return k.set(e,{marquee:i,source:l}),null!==(t=a)&&void 0!==t&&t.isConnected?a:void 0}};exports.debounce=N,exports.dividersResizeObserver=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!t.reactOwned&&i(e))return function(){};var r=function(e){var r,i,o,a,u=e.attributeName,l=e.oldValue,c=e.target.getAttribute(u),s=A===u?n(null!==(r=null==t||null===(i=t.ignore)||void 0===i?void 0:i.layout)&&void 0!==r?r:[]):"class"===u?n(null!==(o=null==t||null===(a=t.ignore)||void 0===a?void 0:a.className)&&void 0!==o?o:[]):null;return s?j(c,s)!==j(l,s):["style","dir"].includes(u)&&(null!=c?c:"")!==(null!=l?l:"")};return E(e,L,{getResizeValue:M,observeDirectChildrenResize:!0,targetMutation:{options:{attributes:!0,attributeFilter:["style","dir","data-unitone-layout","class"],attributeOldValue:!0},shouldApply:function(t){return B(t,function(t){return t.target===e&&r(t)})}},directChildMutation:{attributeFilter:["style","data-unitone-layout","class"],shouldApply:r}})},exports.marqueeResizeObserver=function(e){if(s(e))return y(e,function(){return m(e)},{listenForRefresh:!1}).dispose;var t=y(e,function(){return _(e)});return function(){t.dispose(),k.delete(e)}},exports.setColumnCountForVertical=function(e){i(e)||W(e)},exports.setDividerLinewrap=function(e){i(e)||L(e)},exports.setMarquee=function(e){if(!s(e))return _(e);m(e)},exports.setStairsStep=function(e){i(e)||P(e)},exports.stairsResizeObserver=function(e){return!(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).reactOwned&&i(e)?function(){}:E(e,P,{observeDirectChildrenResize:!0,targetMutation:{options:{attributes:!0,attributeFilter:["style","class","dir","data-unitone-layout"],attributeOldValue:!0},shouldApply:function(e){return B(e,I)}},directChildMutation:{attributeFilter:["style","class","dir","data-unitone-layout"],shouldApply:I}})},exports.verticalsResizeObserver=function(e){if(!(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).reactOwned&&i(e))return function(){};return E(e,function(e,t){var n;null!==(n=e.parentNode)&&void 0!==n&&n.style&&(e.parentNode.style.height=""),W(e,t)},{observeDirectChildrenResize:!0,shouldApplyChildList:T,targetMutation:{options:{attributes:!0,attributeFilter:["style","class","dir","data-unitone-layout"],attributeOldValue:!0,characterData:!0,childList:!0,subtree:!0},shouldApply:T}})};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inc2734/unitone-css",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "",
   "engines": {
     "node": ">=20.19.0",

package/src/behaviors/dividers.js

@@ -1,8 +1,10 @@
+import { resetLayoutBehavior } from '../layout-behavior-state';
 import { dividersResizeObserver } from '../library';
 import { registerLayoutInitializer } from '../register-layout-initializer';
 
 registerLayoutInitializer({
   key: 'behaviors/dividers',
-  selector: '[data-unitone-layout*="-divider:"]',
+  selector: '[data-unitone-layout*="-divider:"]:not([data-unitone-react-layout])',
+  reset: (target) => resetLayoutBehavior(target, 'divider'),
   initialize: dividersResizeObserver,
 });

package/src/behaviors/stairs.js

@@ -1,8 +1,10 @@
+import { resetLayoutBehavior } from '../layout-behavior-state';
 import { stairsResizeObserver } from '../library';
 import { registerLayoutInitializer } from '../register-layout-initializer';
 
 registerLayoutInitializer({
   key: 'behaviors/stairs',
-  selector: '[data-unitone-layout*="-stairs:"]',
+  selector: '[data-unitone-layout*="-stairs:"]:not([data-unitone-react-layout])',
+  reset: (target) => resetLayoutBehavior(target, 'stairs'),
   initialize: stairsResizeObserver,
 });

package/src/layout-behavior-state.js

@@ -0,0 +1,41 @@
+export const reactLayoutAttribute = 'data-unitone-react-layout';
+export const layoutRefreshEvent = 'unitone:layout-refresh';
+
+/** Defers explicit helper calls to the owning React component, including before hydration. */
+export const requestReactLayoutRefresh = (target) => {
+  if (!target?.hasAttribute?.(reactLayoutAttribute)) return false;
+  target.dispatchEvent(new target.ownerDocument.defaultView.Event(layoutRefreshEvent));
+  return true;
+};
+
+const removeTokens = (target, tokens) => {
+  if (!target) return;
+  const current = target.getAttribute('data-unitone-layout') ?? '';
+  const next = current
+    .split(/\s+/)
+    .filter((token) => token && !tokens.includes(token))
+    .join(' ');
+  if (current !== next) target.setAttribute('data-unitone-layout', next);
+};
+
+/** Clears only generated state when a behavior is disabled; disposing alone preserves it. */
+export const resetLayoutBehavior = (target, behavior) => {
+  if (behavior === 'divider') {
+    removeTokens(target, ['divider:initialized', '-stack']);
+    Array.from(target.children).forEach((child) => removeTokens(child, ['-bol', '-linewrap']));
+  } else if (behavior === 'stairs') {
+    removeTokens(target, ['stairs:initialized']);
+    target.style.removeProperty('--unitone--max-stairs-step');
+    target.style.removeProperty('--unitone--stairs-step-overflow-volume');
+    Array.from(target.children).forEach((child) =>
+      child.style.removeProperty('--unitone--stairs-step'),
+    );
+  } else if (behavior === 'vertical') {
+    removeTokens(target, [
+      'vertical-writing:initialized',
+      'vertical-writing:safari',
+      '-force-switch',
+    ]);
+    if (target.parentElement?.style) target.parentElement.style.height = '';
+  }
+};

package/src/layout-primitives/cluster/index.jsx

@@ -1,20 +1,27 @@
+'use client';
+
 import React from 'react';
+import { useLayoutBehaviors } from '../../use-layout-behaviors';
 
-export const Cluster = ({
-  alignItems,
-  divider,
-  dividerWidth,
-  dividerStyle,
-  dividerColor,
-  gap,
-  columnGap,
-  rowGap,
-  justifyContent,
-  nowrap,
-  tagName = 'div',
-  style,
-  ...props
-}) => {
+export const Cluster = React.forwardRef(function Cluster(
+  {
+    alignItems,
+    divider,
+    dividerWidth,
+    dividerStyle,
+    dividerColor,
+    gap,
+    columnGap,
+    rowGap,
+    justifyContent,
+    nowrap,
+    tagName = 'div',
+    style,
+    ...props
+  },
+  forwardedRef,
+) {
+  const layoutRef = useLayoutBehaviors({ divider: '' !== (divider ?? '') }, forwardedRef);
   const Tag = tagName;
 
   style = {
@@ -40,8 +47,10 @@ export const Cluster = ({
         .join(' ')}
       style={style}
       {...props}
+      ref={layoutRef}
+      data-unitone-react-layout=""
     >
       {props.children}
     </Tag>
   );
-};
+});

package/src/layout-primitives/marquee/_index.scss

@@ -8,10 +8,8 @@
   overflow: clip;
 
   &[data-unitone-layout~="-reverse"] {
-    flex-direction: row-reverse;
-
     > [data-unitone-layout~="marquee:initialized"] {
-      animation-name: marquee-reverse;
+      animation-direction: reverse;
     }
   }
 
@@ -31,11 +29,17 @@
 }
 
 @mixin abstract-marquee() {
+  --unitone--marquee-travel: 0px;
+
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
   flex-shrink: 0;
   display: flex;
   gap: inherit;
   align-items: center;
-  justify-content: space-around;
+  justify-content: start;
+  flex-flow: row nowrap;
 
   &[data-unitone-layout~="marquee:initialized"] {
     animation-name: marquee;
@@ -44,6 +48,10 @@
     animation-iteration-count: infinite;
   }
 
+  > [data-unitone-marquee-boundary] {
+    display: none !important;
+  }
+
   > * {
     flex: 0 0 var(--unitone--item-width);
     max-width: var(--unitone--item-width);
@@ -63,10 +71,10 @@
 
 @keyframes marquee {
     0% { translate: 0; }
-  100% { translate: calc(-100% - var(--unitone--marquee-gap, var(--unitone--gap))); }
+  100% { translate: var(--unitone--marquee-travel, 0px); }
 }
 
 @keyframes marquee-reverse {
-    0% { translate: 0; }
-  100% { translate: calc(100% + var(--unitone--marquee-gap, var(--unitone--gap))); }
+    0% { translate: var(--unitone--marquee-travel, 0px); }
+  100% { translate: 0; }
 }

package/src/layout-primitives/marquee/behavior.js

@@ -3,6 +3,6 @@ import { registerLayoutInitializer } from '../../register-layout-initializer';
 
 registerLayoutInitializer({
   key: 'layout-primitives/marquee',
-  selector: '[data-unitone-layout~="marquee-wrapper"]',
+  selector: '[data-unitone-layout~="marquee-wrapper"]:not([data-unitone-marquee-react])',
   initialize: marqueeResizeObserver,
 });

package/src/layout-primitives/marquee/index.jsx

@@ -1,10 +1,59 @@
-import React from 'react';
+'use client';
+
+import React, { useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
+import { getMarqueeParts, markMarqueeCopy, measureMarquee, observeMarquee } from './layout';
+
+const useMarqueeLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+
+// Copied elements must not attach caller-owned refs to additional DOM nodes.
+const copyMarqueeChildren = (children) =>
+  React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) return child;
+    const props =
+      child.type === React.Fragment
+        ? {}
+        : { ref: null, autoFocus: false, 'aria-hidden': true, inert: true };
+    if ('children' in child.props) props.children = copyMarqueeChildren(child.props.children);
+    return React.cloneElement(child, props);
+  });
+
+export const Marquee = React.forwardRef(function Marquee(
+  { duration, gap, itemWidth, reverse, pauseOnHover, style, children, ...props },
+  forwardedRef,
+) {
+  const wrapperRef = useRef(null);
+  const controllerRef = useRef(null);
+  const [layout, setLayout] = useState({ groups: 0, distance: 0, rtl: false });
+  useImperativeHandle(forwardedRef, () => wrapperRef.current, []);
+
+  useMarqueeLayoutEffect(() => {
+    const target = wrapperRef.current;
+    const controller = observeMarquee(target, () => {
+      const parts = getMarqueeParts(target);
+      parts.copies.forEach(markMarqueeCopy);
+      const next = measureMarquee(target, parts);
+      setLayout((current) =>
+        current.groups === next.groups &&
+        current.rtl === next.rtl &&
+        Math.abs(current.distance - next.distance) < 0.001
+          ? current
+          : next,
+      );
+    });
+    controllerRef.current = controller;
+    return () => {
+      controllerRef.current = null;
+      controller.dispose();
+    };
+  }, []);
+
+  // React owns all child insertions and removals; remeasure after each committed render.
+  useMarqueeLayoutEffect(() => controllerRef.current?.refresh());
 
-export const Marquee = ({ duration, gap, itemWidth, reverse, pauseOnHover, style, ...props }) => {
   style = {
     ...style,
-    '--unitone--animation-duration': '' !== duration ? duration : undefined,
-    '--unitone--item-width': '' !== itemWidth ? itemWidth : undefined,
+    ...(duration != null && duration !== '' ? { '--unitone--animation-duration': duration } : {}),
+    ...(itemWidth != null && itemWidth !== '' ? { '--unitone--item-width': itemWidth } : {}),
   };
 
   return (
@@ -18,14 +67,27 @@ export const Marquee = ({ duration, gap, itemWidth, reverse, pauseOnHover, style
         .join(' ')}
       style={style}
       {...props}
+      ref={wrapperRef}
+      data-unitone-marquee-react=""
     >
       <div
-        data-unitone-layout={['marquee', '' !== (gap ?? '') ? `-gap:${gap}` : undefined]
+        data-unitone-layout={[
+          'marquee',
+          '' !== (gap ?? '') ? `-gap:${gap}` : undefined,
+          layout.distance > 0 ? 'marquee:initialized' : undefined,
+        ]
           .filter(Boolean)
           .join(' ')}
+        style={{
+          '--unitone--marquee-travel': `${layout.rtl ? layout.distance : -layout.distance}px`,
+        }}
       >
-        {props.children}
+        <React.Fragment key="original">{children}</React.Fragment>
+        <span data-unitone-marquee-boundary="" hidden />
+        {Array.from({ length: layout.groups }, (_, index) => (
+          <React.Fragment key={`copy:${index}`}>{copyMarqueeChildren(children)}</React.Fragment>
+        ))}
       </div>
     </div>
   );
-};
+});

package/src/layout-primitives/marquee/layout.js

@@ -0,0 +1,163 @@
+import { createObserverScope } from '../../observer-scope';
+
+const marqueeCopyAttribute = 'data-unitone-marquee-copy';
+const marqueeBoundaryAttribute = 'data-unitone-marquee-boundary';
+const marqueeRefreshEvent = 'unitone:marquee-refresh';
+
+export const isReactMarquee = (target) => target.matches('[data-unitone-marquee-react]');
+
+const marqueeStyle = (element) => element.ownerDocument.defaultView.getComputedStyle(element);
+const marqueeHasBox = (element) => element.isConnected && element.getClientRects().length > 0;
+
+const marqueeWidth = (style, borderBox = false) => {
+  const edges = ['paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth'].reduce(
+    (total, property) => total + (parseFloat(style[property]) || 0),
+    0,
+  );
+  return (
+    (parseFloat(style.width) || 0) +
+    (borderBox ? edges : 0) -
+    (style.boxSizing === 'border-box' ? edges : 0)
+  );
+};
+
+/** Returns the original items and generated items without moving either collection. */
+export const getMarqueeParts = (target) => {
+  const marquees = Array.from(target.children).filter((child) =>
+    child.matches('[data-unitone-layout~="marquee"]'),
+  );
+  const marquee = marquees.length === 1 ? marquees[0] : null;
+  const originals = [];
+  const copies = [];
+  let afterBoundary = false;
+  for (const child of marquee?.children ?? []) {
+    if (child.hasAttribute(marqueeBoundaryAttribute)) {
+      afterBoundary = true;
+    } else if (afterBoundary || child.hasAttribute(marqueeCopyAttribute)) {
+      copies.push(child);
+    } else {
+      originals.push(child);
+    }
+  }
+  return { marquee, originals, copies };
+};
+
+/** Decorations belong to the behavior; React retains ownership of the copied nodes. */
+export const markMarqueeCopy = (copy) => {
+  for (const [name, value] of [
+    [marqueeCopyAttribute, ''],
+    ['aria-hidden', 'true'],
+    ['inert', ''],
+  ]) {
+    if (copy.getAttribute(name) !== value) copy.setAttribute(name, value);
+  }
+};
+
+/**
+ * Measures the start-to-start repeat distance, including the CSS gap at the boundary.
+ * One complete copy is requested first so no separate gap resolver is needed.
+ */
+export const measureMarquee = (target, { marquee, originals, copies }) => {
+  const empty = { groups: 0, distance: 0, rtl: false };
+  if (!marquee || !marqueeHasBox(target) || !marqueeHasBox(marquee)) return empty;
+  const style = marqueeStyle(marquee);
+  if (!style.writingMode.startsWith('horizontal')) return empty;
+  const wrapperStyle = marqueeStyle(target);
+  const width = marqueeWidth(wrapperStyle);
+  const items = originals.filter(marqueeHasBox);
+  if (!(width > 0) || !items.some((item) => item.getBoundingClientRect().width > 0)) return empty;
+  const rtl = style.direction === 'rtl';
+  const firstCopy = copies.find(marqueeHasBox);
+  if (!firstCopy) return { groups: 1, distance: 0, rtl };
+  const firstRect = items[0].getBoundingClientRect();
+  const copyRect = firstCopy.getBoundingClientRect();
+  // Positive, axis-aligned ancestor scales must be removed from CSS translation lengths.
+  const scale = target.getBoundingClientRect().width / marqueeWidth(wrapperStyle, true);
+  const distance =
+    (rtl ? firstRect.right - copyRect.right : copyRect.left - firstRect.left) / scale;
+  if (!(distance > 0) || !Number.isFinite(distance)) return empty;
+  return { groups: Math.ceil(width / distance), distance, rtl };
+};
+
+/** Observes layout changes, never measuring on each animation frame. */
+export const observeMarquee = (target, update, { listenForRefresh = true } = {}) => {
+  const scope = createObserverScope(target);
+  const observed = new Set();
+  const sizes = new WeakMap();
+  let frame = 0;
+
+  const observeMutations = () => {
+    mutations.observe(target, {
+      attributes: true,
+      childList: true,
+      characterData: true,
+      subtree: true,
+    });
+    for (let ancestor = target.parentElement; ancestor; ancestor = ancestor.parentElement) {
+      mutations.observe(ancestor, { attributes: true });
+    }
+  };
+  const refresh = () => {
+    if (scope.disposed || !target.isConnected) return;
+    mutations.disconnect();
+    try {
+      update();
+      const { marquee, originals } = getMarqueeParts(target);
+      const next = new Set([target, marquee, ...originals].filter(Boolean));
+      for (const element of observed) {
+        if (!next.has(element)) {
+          resizes.unobserve(element);
+          observed.delete(element);
+          sizes.delete(element);
+        }
+      }
+      for (const element of next) {
+        if (!observed.has(element)) {
+          resizes.observe(element, { box: 'border-box' });
+          observed.add(element);
+        }
+      }
+    } finally {
+      observeMutations();
+    }
+  };
+  const schedule = () => {
+    if (scope.disposed || frame) return;
+    frame = scope.requestAnimationFrame(() => {
+      frame = 0;
+      refresh();
+    });
+  };
+  const mutations = new MutationObserver(schedule);
+  const resizes = new ResizeObserver((entries) => {
+    let changed = false;
+    for (const entry of entries) {
+      const box = entry.borderBoxSize?.[0];
+      const size = [
+        entry.contentRect.width,
+        entry.contentRect.height,
+        box?.inlineSize,
+        box?.blockSize,
+      ].join(',');
+      changed ||= sizes.get(entry.target) !== size;
+      sizes.set(entry.target, size);
+    }
+    if (changed) refresh();
+  });
+  const view = target.ownerDocument.defaultView;
+  view.addEventListener('resize', schedule);
+  if (listenForRefresh) target.addEventListener(marqueeRefreshEvent, refresh);
+  scope.addCleanup(() => {
+    mutations.disconnect();
+    resizes.disconnect();
+    observed.clear();
+    view.removeEventListener('resize', schedule);
+    if (listenForRefresh) target.removeEventListener(marqueeRefreshEvent, refresh);
+  });
+  refresh();
+  return { refresh, dispose: scope.dispose };
+};
+
+export const requestMarqueeRefresh = (target) => {
+  target.dispatchEvent(new target.ownerDocument.defaultView.Event(marqueeRefreshEvent));
+};