@inc2734/unitone-css 1.4.0 → 1.4.2

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

@@ -1 +1 @@
-"use strict";var e=require("react");function t(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 n(e,n){if(e){if("string"==typeof e)return t(e,n);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)?t(e,n):void 0}}function r(e){return function(e){if(Array.isArray(e))return t(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||n(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,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,l,u=[],a=!0,d=!1;try{if(o=(n=n.call(e)).next,0===t);else for(;!(a=(r=o.call(n)).done)&&(u.push(r.value),u.length!==t);a=!0);}catch(e){d=!0,i=e}finally{try{if(!a&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(d)throw i}}return u}}(e,t)||n(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 o(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 l(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)?l(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,u=!0,a=!1;return{s:function(){n=n.call(e)},n:function(){var e=n.next();return u=e.done,e},e:function(e){a=!0,o=e},f:function(){try{u||null==n.return||n.return()}finally{if(a)throw o}}}}function l(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 u="data-unitone-layout",a="".concat(200,"px 0px"),d=function(e){var t;return(null!==(t=e.getAttribute(u))&&void 0!==t?t:"").split(/\s+/).filter(Boolean)},c=function(e,t){return e.filter(function(e){return!t.includes(e)})},s=function(e,t){var n,r=t.filter(Boolean).join(" ");(null!==(n=e.getAttribute(u))&&void 0!==n?n:"")!==r&&e.setAttribute(u,r)},f=function(e,t){var n,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=r.getValue,l=r.delay,u=!0,a=new ResizeObserver(g(function(e){var r,l=o(e);try{for(l.s();!(r=l.n()).done;){var a=r.value,d=null==i?void 0:i(a);u?(n=d,u=!1):void 0!==d&&d===n||(t(a.target,a),n=d)}}catch(e){l.e(e)}finally{l.f()}},void 0===l?250:l));return a.observe(e),a},v=function(e,t,n){var r=new MutationObserver(function(t){requestAnimationFrame(function(){null!=e&&e.isConnected&&n(t)})});return r.observe(e,t),r},y=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.getResizeValue,l=n.delay,u=void 0===l?250:l,d=n.observeResize,c=void 0===d||d,s=n.observeIntersection,y=void 0!==s&&s,b=n.observeDirectChildrenResize,p=void 0!==b&&b,m=n.targetMutation,w=n.directChildMutation,O=y&&"undefined"!=typeof IntersectionObserver,S=!O||h(e),A=O&&!S,z=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:e;null!=n&&n.isConnected&&(!O||S?(A=!1,t(n)):A=!0)},j=function(e,t){var n,r=0;return function(){var i,o;null!==(o=n=null==e||null===(i=e.ownerDocument)||void 0===i?void 0:i.defaultView)&&void 0!==o&&o.requestAnimationFrame?r||(r=n.requestAnimationFrame(function(){r=0,n=null,null!=e&&e.isConnected&&t(e)})):t(e)}}(e,z),E=function(){null!=e&&e.isConnected&&(!O||S?(A=!0,j()):A=!0)},C=function(){},M=c?p?function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.getValue,i=n.delay,l=void 0===i?250:i,u=n.onChildList,a=new WeakMap,d=new Set,c=new ResizeObserver(g(function(n){var i,l=!1,u=o(n);try{for(u.s();!(i=u.n()).done;){var d=i.value,c=null==r?void 0:r(d);a.has(d.target)?(void 0!==c&&c===a.get(d.target)||(l=!0),a.set(d.target,c)):a.set(d.target,c)}}catch(e){u.e(e)}finally{u.f()}l&&t(e)},l)),s=function(){var t;Array.from(d).forEach(function(t){t.parentElement!==e&&(c.unobserve(t),d.delete(t),a.delete(t))}),Array.from(null!==(t=null==e?void 0:e.children)&&void 0!==t?t:[]).forEach(function(e){d.has(e)||(c.observe(e),d.add(e))})};c.observe(e),s();var f=v(e,{childList:!0},function(n){n.some(function(e){return"childList"===e.type})&&(s(),null==u||u(n),t(e))});return{resizeObserver:c,mutationObserver:f}}(e,E,{getValue:r,delay:u,onChildList:function(){C()}}):{resizeObserver:f(e,E,{getValue:r,delay:u})}:{mutationObserver:null};O&&function(e,t){var n=new IntersectionObserver(function(e){var n=i(e,1)[0];n&&t(n)},{rootMargin:a});n.observe(e)}(e,function(e){(S=e.isIntersecting)&&A&&E()}),null!=m&&m.options&&v(e,m.options,function(e){var t,n;(null!==(t=null===(n=m.shouldApply)||void 0===n?void 0:n.call(m,e))&&void 0!==t?t:0<e.length)&&E()});var V=null!=w&&w.attributeFilter&&w.shouldApply?function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.attributeFilter,i=n.shouldApply,o=n.attributeOldValue,l=void 0===o||o,u=new MutationObserver(function(n){requestAnimationFrame(function(){null!=e&&e.isConnected&&n.some(function(t){return"attributes"===t.type&&t.target.parentElement===e&&i(t)})&&t(e)})}),a=function(){var t;u.disconnect(),Array.from(null!==(t=null==e?void 0:e.children)&&void 0!==t?t:[]).forEach(function(e){u.observe(e,{attributes:!0,attributeFilter:r,attributeOldValue:l})})};return a(),{observer:u,syncObservedChildren:a}}(e,E,{attributeFilter:w.attributeFilter,shouldApply:w.shouldApply,attributeOldValue:w.attributeOldValue}):null;V&&(C=V.syncObservedChildren),!M.mutationObserver&&V&&v(e,{childList:!0},function(e){e.some(function(e){return"childList"===e.type})&&(C(),E())}),O&&!S||z(e)},b=function(e){var t;return null===(t=e.borderBoxSize)||void 0===t?void 0:t[0].inlineSize},p=function(e){return!(null==e||!e.isConnected)&&0<e.getClientRects().length},h=function(e){var t;if(!p(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},m=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,l=t.writingMode,u=void 0===l?"horizontal-tb":l,a=!u.startsWith("horizontal"),d="rtl"===r!==("sideways-lr"===u),c=a?e.top:e.left,s=a?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}};function g(e,t){var n;return function(){for(var r=arguments.length,i=new Array(r),o=0;o<r;o++)i[o]=arguments[o];var l=this;clearTimeout(n),n=setTimeout(function(){e.apply(l,i)},t)}}var w=function(e){var t,n,i,o=Array.from(null!==(t=null==e?void 0:e.children)&&void 0!==t?t:[]),l=c(d(e),["divider:initialized","-stack"]);s(e,l);var u=o.map(function(e){return{child:e,layoutTokens:c(d(e),["-bol","-linewrap"])}}),a=function(){u.forEach(function(e){var t=e.child,n=e.layoutTokens;s(t,n)})};if(l.some(function(e){return e.startsWith("-divider:")}))if(0!==o.length)if(p(e)){var f=null!==(n=null==e||null===(i=e.ownerDocument)||void 0===i?void 0:i.defaultView)&&void 0!==n?n:"undefined"!=typeof window?window:void 0;if(null!=f&&f.getComputedStyle){var v,y=f.getComputedStyle(e),b={direction:y.getPropertyValue("direction"),flexDirection:y.getPropertyValue("flex-direction"),writingMode:y.getPropertyValue("writing-mode")},h=u.reduce(function(e,t){var n=t.child,r=t.layoutTokens,i=f.getComputedStyle(n),o=i.getPropertyValue("position"),l=i.getPropertyValue("display");if("absolute"!==o&&"fixed"!==o&&"none"!==l){var u=n.getBoundingClientRect();e.push({child:n,layoutTokens:r,inlineRect:m(u,b)})}return e},[]);if(0===h.length)return a(),void s(e,[].concat(r(l),["divider:initialized"]));var g=!1,w=!0,O=h.map(function(e,t){var n=e.child,i=e.layoutTokens,o=e.inlineRect,l=r(i);return 0===t||o.start<v.end-.5||o.start<=v.start+.5?(l.push("-bol"),0<t&&(g=!0)):w=!1,g&&l.push("-linewrap"),v=o,{child:n,layoutTokens:l}}),S=new Map(O.map(function(e){return[e.child,e.layoutTokens]}));u.forEach(function(e){var t,n=e.child,r=e.layoutTokens;s(n,null!==(t=S.get(n))&&void 0!==t?t:r)});var A=r(l);w&&A.push("-stack"),A.push("divider:initialized"),s(e,A)}else a()}else a();else s(e,[].concat(r(l),["divider:initialized"]));else a()},O=Symbol.for("@inc2734/unitone-css/layout-initializers"),S=function(){return"undefined"==typeof window||"undefined"==typeof document||"undefined"==typeof MutationObserver||"undefined"==typeof Node?null:(globalThis[O]||(globalThis[O]={initializers:new Map,pendingNodes:new Set,observer:null,rafId:0,hasDOMContentLoadedListener:!1}),globalThis[O])},A=function(e,t){var n,r;if(e.enabled()&&(null==t?void 0:t.nodeType)===Node.ELEMENT_NODE){var i=new Set;null!==(n=t.matches)&&void 0!==n&&n.call(t,e.selector)&&i.add(t),null===(r=t.querySelectorAll)||void 0===r||r.call(t,e.selector).forEach(function(e){i.add(e)}),i.forEach(function(t){e.initialized.has(t)||(e.initialize(t),e.initialized.add(t))})}},z=function(e){var t=S();t&&t.initializers.forEach(function(t){A(t,e)})},j=function(){var e=S();e&&(e.pendingNodes.forEach(function(e){z(e)}),e.pendingNodes.clear(),e.rafId=0)},E=function(){var e=S();e&&!e.observer&&document.body&&(z(document.body),e.observer=new MutationObserver(function(t){t.forEach(function(t){t.addedNodes.forEach(function(t){(null==t?void 0:t.nodeType)===Node.ELEMENT_NODE&&e.pendingNodes.add(t)})}),!e.rafId&&0<e.pendingNodes.size&&(e.rafId=requestAnimationFrame(j))}),e.observer.observe(document.body,{childList:!0,subtree:!0}))};function C(){return C=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},C.apply(null,arguments)}function M(e){return M="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},M(e)}function V(e){var t=function(e,t){if("object"!=M(e)||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t);if("object"!=M(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==M(t)?t:t+""}function T(e,t,n){return(t=V(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.enabled,o=void 0===i?function(){return!0}:i,l=S();if(l&&!l.initializers.has(t)){var u={selector:n,initialize:r,enabled:o,initialized:new WeakSet};l.initializers.set(t,u),l.observer?A(u,document.body):"loading"!==document.readyState?E():l.hasDOMContentLoadedListener||(document.addEventListener("DOMContentLoaded",E,{once:!0}),l.hasDOMContentLoadedListener=!0)}}({key:"behaviors/dividers",selector:'[data-unitone-layout*="-divider:"]',initialize:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=function(e){if("data-unitone-layout"===e.attributeName){var n,i,o,l,u=[].concat(r(null!==(n=null==t||null===(i=t.ignore)||void 0===i?void 0:i.layout)&&void 0!==n?n:[]),["divider:initialized","-bol","-linewrap","-stack"]);return(null!==(o=e.target.getAttribute(e.attributeName))&&void 0!==o?o:"").split(" ").filter(function(e){return!u.includes(e)}).join(" ")!==(null!==(l=e.oldValue)&&void 0!==l?l:"").split(" ").filter(function(e){return!u.includes(e)}).join(" ")}if("class"===e.attributeName){var a,d,c,s,f=r(null!==(a=null==t||null===(d=t.ignore)||void 0===d?void 0:d.className)&&void 0!==a?a:[]);return(null!==(c=e.target.getAttribute(e.attributeName))&&void 0!==c?c:"").split(" ").filter(function(e){return!f.includes(e)}).join(" ")!==(null!==(s=e.oldValue)&&void 0!==s?s:"").split(" ").filter(function(e){return!f.includes(e)}).join(" ")}return["style","dir"].includes(e.attributeName)};y(e,w,{getResizeValue:b,observeIntersection:!0,observeDirectChildrenResize:!0,targetMutation:{options:{attributes:!0,attributeFilter:["style","dir","data-unitone-layout","class"],attributeOldValue:!0},shouldApply:function(t){return function(e,t){return e.some(function(e){return"attributes"===e.type&&t(e)})}(t,function(t){return t.target===e&&n(t)})}},directChildMutation:{attributeFilter:["style","data-unitone-layout","class"],attributeOldValue:!0,shouldApply:n}})}});var I=["gap","columnGap","rowGap","contentMinWidth","revert","sidebar","sidebarWidth","alignItems","overflow","divider","dividerWidth","dividerStyle","dividerColor","style"];function N(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 P(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?N(Object(n),!0).forEach(function(t){T(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):N(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}exports.WithSidebar=function(t){var n=t.gap,r=t.columnGap,i=t.rowGap,o=t.contentMinWidth,l=t.revert,u=t.sidebar,a=t.sidebarWidth,d=t.alignItems,c=t.overflow,s=t.divider,f=t.dividerWidth,v=t.dividerStyle,y=t.dividerColor,b=t.style,p=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}(t,I);return b=P(P({},b),{},{"--unitone--sidebar-width":""!==a?a: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":""!==y?y:void 0}),e.createElement("div",C({"data-unitone-layout":["with-sidebar",l?"-revert":void 0,""!==(null!=n?n:"")?"-gap:".concat(n):void 0,""!==(null!=r?r:"")?"-column-gap:".concat(r):void 0,""!==(null!=i?i:"")?"-row-gap:".concat(i):void 0,""!==(null!=u?u:"")?"-sidebar:".concat(u):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:b},p),p.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 t(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=Array(e);n<e;n++)i[n]=t[n];return i}function e(e,n){if(e){if("string"==typeof e)return t(e,n);var i={}.toString.call(e).slice(8,-1);return"Object"===i&&e.constructor&&(i=e.constructor.name),"Map"===i||"Set"===i?Array.from(e):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?t(e,n):void 0}}function n(n){return function(e){if(Array.isArray(e))return t(e)}(n)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(n)||e(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 i(t,n){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=n){var i,r,o,l,u=[],a=!0,s=!1;try{if(o=(n=n.call(t)).next,0===e);else for(;!(a=(i=o.call(n)).done)&&(u.push(i.value),u.length!==e);a=!0);}catch(t){s=!0,r=t}finally{try{if(!a&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(s)throw r}}return u}}(t,n)||e(t,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 r(t,e){var n="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!n){if(Array.isArray(t)||(n=function(t,e){if(t){if("string"==typeof t)return o(t,e);var n={}.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?o(t,e):void 0}}(t))||e){n&&(t=n);var i=0,r=function(){};return{s:r,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:r}}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 l,u=!0,a=!1;return{s:function(){n=n.call(t)},n:function(){var t=n.next();return u=t.done,t},e:function(t){a=!0,l=t},f:function(){try{u||null==n.return||n.return()}finally{if(a)throw l}}}}function o(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=Array(e);n<e;n++)i[n]=t[n];return i}var l="data-unitone-layout",u="".concat(200,"px 0px"),a=function(t){var e;return(null!==(e=t.getAttribute(l))&&void 0!==e?e:"").split(/\s+/).filter(Boolean)},s=function(t,e){return t.filter(function(t){return!e.includes(t)})},d=function(t,e){var n,i=e.filter(Boolean).join(" ");(null!==(n=t.getAttribute(l))&&void 0!==n?n:"")!==i&&t.setAttribute(l,i)},c=function(t,e){var n,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=i.getValue,l=i.delay,u=!0,a=new ResizeObserver(b(function(t){var i,l=r(t);try{for(l.s();!(i=l.n()).done;){var a=i.value,s=null==o?void 0:o(a);u?(n=s,u=!1):void 0!==s&&s===n||(e(a.target,a),n=s)}}catch(t){l.e(t)}finally{l.f()}},void 0===l?250:l));return a.observe(t),a},f=function(t,e,n){var i=new MutationObserver(function(e){requestAnimationFrame(function(){null!=t&&t.isConnected&&n(e)})});return i.observe(t,e),i},v=function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=n.getResizeValue,l=n.delay,a=void 0===l?250:l,s=n.observeResize,d=void 0===s||s,v=n.observeIntersection,p=void 0!==v&&v,y=n.observeDirectChildrenResize,h=void 0!==y&&y,m=n.targetMutation,w=n.directChildMutation,A=p&&"undefined"!=typeof IntersectionObserver,C=!A||g(t),z=A&&!C,S=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t;null!=n&&n.isConnected&&(!A||C?(z=!1,e(n)):z=!0)},V=function(t,e){var n,i=0;return function(){var r,o;null!==(o=n=null==t||null===(r=t.ownerDocument)||void 0===r?void 0:r.defaultView)&&void 0!==o&&o.requestAnimationFrame?i||(i=n.requestAnimationFrame(function(){i=0,n=null,null!=t&&t.isConnected&&e(t)})):e(t)}}(t,S),O=function(){null!=t&&t.isConnected&&(!A||C?(z=!0,V()):z=!0)},R=function(){},x=d?h?function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=n.getValue,o=n.delay,l=void 0===o?250:o,u=n.onChildList,a=new WeakMap,s=new Set,d=new ResizeObserver(b(function(n){var o,l=!1,u=r(n);try{for(u.s();!(o=u.n()).done;){var s=o.value,d=null==i?void 0:i(s);a.has(s.target)?(void 0!==d&&d===a.get(s.target)||(l=!0),a.set(s.target,d)):a.set(s.target,d)}}catch(t){u.e(t)}finally{u.f()}l&&e(t)},l)),c=function(){var e;Array.from(s).forEach(function(e){e.parentElement!==t&&(d.unobserve(e),s.delete(e),a.delete(e))}),Array.from(null!==(e=null==t?void 0:t.children)&&void 0!==e?e:[]).forEach(function(t){s.has(t)||(d.observe(t),s.add(t))})};d.observe(t),c();var v=f(t,{childList:!0},function(n){n.some(function(t){return"childList"===t.type})&&(c(),null==u||u(n),e(t))});return{resizeObserver:d,mutationObserver:v}}(t,O,{getValue:o,delay:a,onChildList:function(){R()}}):{resizeObserver:c(t,O,{getValue:o,delay:a})}:{mutationObserver:null};A&&function(t,e){var n=new IntersectionObserver(function(t){var n=i(t,1)[0];n&&e(n)},{rootMargin:u});n.observe(t)}(t,function(t){(C=t.isIntersecting)&&z&&O()}),null!=m&&m.options&&f(t,m.options,function(t){var e,n;(null!==(e=null===(n=m.shouldApply)||void 0===n?void 0:n.call(m,t))&&void 0!==e?e:0<t.length)&&O()});var E=null!=w&&w.attributeFilter&&w.shouldApply?function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=n.attributeFilter,r=n.shouldApply,o=n.attributeOldValue,l=void 0===o||o,u=new MutationObserver(function(n){requestAnimationFrame(function(){null!=t&&t.isConnected&&n.some(function(e){return"attributes"===e.type&&e.target.parentElement===t&&r(e)})&&e(t)})}),a=function(){var e;u.disconnect(),Array.from(null!==(e=null==t?void 0:t.children)&&void 0!==e?e:[]).forEach(function(t){u.observe(t,{attributes:!0,attributeFilter:i,attributeOldValue:l})})};return a(),{observer:u,syncObservedChildren:a}}(t,O,{attributeFilter:w.attributeFilter,shouldApply:w.shouldApply,attributeOldValue:w.attributeOldValue}):null;E&&(R=E.syncObservedChildren),!x.mutationObserver&&E&&f(t,{childList:!0},function(t){t.some(function(t){return"childList"===t.type})&&(R(),O())}),A&&!C||S(t)},p=function(t){var e;return null===(e=t.borderBoxSize)||void 0===e?void 0:e[0].inlineSize},y=function(t){var e;return parseInt(null===(e=t.contentRect)||void 0===e?void 0:e.width)},h=function(t){return!(null==t||!t.isConnected)&&0<t.getClientRects().length},g=function(t){var e;if(!h(t))return!1;var n=null==t||null===(e=t.ownerDocument)||void 0===e?void 0:e.defaultView;if(!n)return!0;var i=t.getBoundingClientRect(),r=n.innerWidth,o=n.innerHeight;return i.bottom>-200&&i.right>0&&i.top<o+200&&i.left<r},m=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=e.direction,i=void 0===n?"ltr":n,r=e.flexDirection,o=void 0===r?"row":r,l=e.writingMode,u=void 0===l?"horizontal-tb":l,a=!u.startsWith("horizontal"),s="rtl"===i!==("sideways-lr"===u),d=a?t.top:t.left,c=a?t.bottom:t.right;if(s){var f=[-c,-d];d=f[0],c=f[1]}if("row-reverse"===o){var v=[-c,-d];d=v[0],c=v[1]}return{start:d,end:c}};function b(t,e){var n;return function(){for(var i=arguments.length,r=new Array(i),o=0;o<i;o++)r[o]=arguments[o];var l=this;clearTimeout(n),n=setTimeout(function(){t.apply(l,r)},e)}}var w=function(t){var e,i,r,o=Array.from(null!==(e=null==t?void 0:t.children)&&void 0!==e?e:[]),l=s(a(t),["divider:initialized","-stack"]);d(t,l);var u=o.map(function(t){return{child:t,layoutTokens:s(a(t),["-bol","-linewrap"])}}),c=function(){u.forEach(function(t){var e=t.child,n=t.layoutTokens;d(e,n)})};if(l.some(function(t){return t.startsWith("-divider:")}))if(0!==o.length)if(h(t)){var f=null!==(i=null==t||null===(r=t.ownerDocument)||void 0===r?void 0:r.defaultView)&&void 0!==i?i:"undefined"!=typeof window?window:void 0;if(null!=f&&f.getComputedStyle){var v,p=f.getComputedStyle(t),y={direction:p.getPropertyValue("direction"),flexDirection:p.getPropertyValue("flex-direction"),writingMode:p.getPropertyValue("writing-mode")},g=u.reduce(function(t,e){var n=e.child,i=e.layoutTokens,r=f.getComputedStyle(n),o=r.getPropertyValue("position"),l=r.getPropertyValue("display");if("absolute"!==o&&"fixed"!==o&&"none"!==l){var u=n.getBoundingClientRect();t.push({child:n,layoutTokens:i,inlineRect:m(u,y)})}return t},[]);if(0===g.length)return c(),void d(t,[].concat(n(l),["divider:initialized"]));var b=!1,w=!0,A=g.map(function(t,e){var i=t.child,r=t.layoutTokens,o=t.inlineRect,l=n(r);return 0===e||o.start<v.end-.5||o.start<=v.start+.5?(l.push("-bol"),0<e&&(b=!0)):w=!1,b&&l.push("-linewrap"),v=o,{child:i,layoutTokens:l}}),C=new Map(A.map(function(t){return[t.child,t.layoutTokens]}));u.forEach(function(t){var e,n=t.child,i=t.layoutTokens;d(n,null!==(e=C.get(n))&&void 0!==e?e:i)});var z=n(l);w&&z.push("-stack"),z.push("divider:initialized"),d(t,z)}else c()}else c();else d(t,[].concat(n(l),["divider:initialized"]));else c()},A=function(t){var e,i,r=Array.from(t.children),o=s(a(t),["stairs:initialized"]);d(t,o);var l=r[0];if(l){if(t.style.removeProperty("--unitone--stairs-step-overflow-volume"),t.style.removeProperty("--unitone--max-stairs-step"),r.forEach(function(t){t.style.removeProperty("--unitone--stairs-step")}),h(t)){var u,c=null===(e=(null!==(i=t.getAttribute("data-unitone-layout"))&&void 0!==i?i:"").split(/\s+/).find(function(t){return t.startsWith("-stairs-up:")}))||void 0===e?void 0:e.replace("-stairs-up:",""),f=["up-down","down-up"].includes(c),v=window.getComputedStyle(t).getPropertyValue("flex-direction"),p=t.getBoundingClientRect().bottom,y=r.reduce(function(t,e){var n=window.getComputedStyle(e).getPropertyValue("position"),i=window.getComputedStyle(e).getPropertyValue("display");return"absolute"===n||"fixed"===n||"none"===i||t.push({child:e,rect:e.getBoundingClientRect()}),t},[]),g=0,m=g;y.map(function(t,e){var n,i,r=t.child,o=t.rect,a="row-reverse"===v?(null===(n=u)||void 0===n?void 0:n.left)<=o.left:(null===(i=u)||void 0===i?void 0:i.left)>=o.left;return 0===e||l===r&&!u||a?g=0:f?g=0===g?1:0:g++,u=o,g>m&&(m=g),{child:r,stairsStep:g}}).forEach(function(t){var e=t.child,n=t.stairsStep;e.style.setProperty("--unitone--stairs-step",n)}),t.style.setProperty("--unitone--max-stairs-step",m);var b=y.reduce(function(t,e){var n=e.child.getBoundingClientRect().bottom-p;return t>n?t:n},0);t.style.setProperty("--unitone--stairs-step-overflow-volume",b),d(t,[].concat(n(o),["stairs:initialized"]))}}else d(t,[].concat(n(o),["stairs:initialized"]))},C=function(t){return t.some(function(t){return"attributes"===t.type||"childList"===t.type&&[].concat(n(t.addedNodes),n(t.removedNodes)).some(function(t){return!function(t){return(null==t?void 0:t.nodeType)===Node.ELEMENT_NODE&&["vertical-writing__thresholder","vertical-writing:initialized","vertical-writing:safari"].includes(t.getAttribute("data-unitone-layout"))}(t)})})},z=function(t){if(t){var e,i=a(t),r=s(i,["vertical-writing:safari","-force-switch"]),o=s(i,["vertical-writing:initialized","vertical-writing:safari","-force-switch"]);if(d(t,r),Array.from(t.children).reverse().some(function(t){if(!["absolute","fixed"].includes(getComputedStyle(t).position)&&"none"!==getComputedStyle(t).display)return e=t,!0}),e){var u=getComputedStyle(t),c=String(u.getPropertyValue("--unitone--threshold")).trim(),f=!1;if(c){var v=t.ownerDocument.createElement("div");v.setAttribute(l,"vertical-writing__thresholder"),t.appendChild(v),f=v.offsetWidth>=t.offsetWidth,v.remove()}if(f)o.push("-force-switch");else t.getBoundingClientRect().left>e.getBoundingClientRect().left&&o.push("vertical-writing:safari");d(t,[].concat(n(o),["vertical-writing:initialized"])),requestAnimationFrame(function(){var n;if(null!=t&&t.isConnected&&null!==(n=t.parentNode)&&void 0!==n&&n.style){if(f)return void(t.parentNode.style.height="");var i=t.getBoundingClientRect(),r=e.getBoundingClientRect(),o=i.top+i.height,l=r.top+r.height;t.parentNode.style.height=o!==l?"".concat(Math.ceil(l-i.top),"px"):""}})}else d(t,[].concat(n(o),["vertical-writing:initialized"]))}},S=function(t){var e,n=function(t){var e,n=null!==(e=t.getAttribute("data-unitone-layout"))&&void 0!==e?e:"";n.split(/\s+/).includes("marquee:initialized")||t.setAttribute("data-unitone-layout","".concat(n," marquee:initialized").trim())},i=function(){return t.querySelectorAll(':scope > [data-unitone-layout~="marquee"]')},r=i();if(0!==r.length){var o=Array.from(r).some(function(t){var e;return(null!==(e=t.getAttribute(l))&&void 0!==e?e:"").split(/\s+/).includes("marquee:initialized")});if(1===t.childElementCount&&1===r.length){var u=r[0];(e=u.cloneNode(!0)).setAttribute("aria-hidden","true"),u.after(e)}return r=i(),o?(r.forEach(function(t){var e,n,i;i=(null!==(n=(e=t).getAttribute("data-unitone-layout"))&&void 0!==n?n:"").split(/\s+/).filter(function(t){return t&&"marquee:initialized"!==t}).join(" "),e.setAttribute("data-unitone-layout",i)}),requestAnimationFrame(function(){null!=t&&t.isConnected&&i().forEach(function(t){n(t)})}),e):(r.forEach(function(t){n(t)}),e)}};exports.debounce=b,exports.dividersResizeObserver=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=function(t){if("data-unitone-layout"===t.attributeName){var i,r,o,l,u=[].concat(n(null!==(i=null==e||null===(r=e.ignore)||void 0===r?void 0:r.layout)&&void 0!==i?i:[]),["divider:initialized","-bol","-linewrap","-stack"]);return(null!==(o=t.target.getAttribute(t.attributeName))&&void 0!==o?o:"").split(" ").filter(function(t){return!u.includes(t)}).join(" ")!==(null!==(l=t.oldValue)&&void 0!==l?l:"").split(" ").filter(function(t){return!u.includes(t)}).join(" ")}if("class"===t.attributeName){var a,s,d,c,f=n(null!==(a=null==e||null===(s=e.ignore)||void 0===s?void 0:s.className)&&void 0!==a?a:[]);return(null!==(d=t.target.getAttribute(t.attributeName))&&void 0!==d?d:"").split(" ").filter(function(t){return!f.includes(t)}).join(" ")!==(null!==(c=t.oldValue)&&void 0!==c?c:"").split(" ").filter(function(t){return!f.includes(t)}).join(" ")}return["style","dir"].includes(t.attributeName)};v(t,w,{getResizeValue:p,observeIntersection:!0,observeDirectChildrenResize:!0,targetMutation:{options:{attributes:!0,attributeFilter:["style","dir","data-unitone-layout","class"],attributeOldValue:!0},shouldApply:function(e){return function(t,e){return t.some(function(t){return"attributes"===t.type&&e(t)})}(e,function(e){return e.target===t&&i(e)})}},directChildMutation:{attributeFilter:["style","data-unitone-layout","class"],attributeOldValue:!0,shouldApply:i}})},exports.marqueeResizeObserver=function(t){var e;v(t,function(t){e=S(t)},{observeResize:!1,observeIntersection:!0,targetMutation:{options:{childList:!0},shouldApply:function(t){var n,i=t.flatMap(function(t){var e;return Array.from(null!==(e=t.addedNodes)&&void 0!==e?e:[])}),r=t.flatMap(function(t){var e;return Array.from(null!==(e=t.removedNodes)&&void 0!==e?e:[])});return null!==(n=e)&&void 0!==n&&n.isConnected&&1===i.length&&0===r.length&&i[0]===e?(e=null,!1):(e=null,!0)}}})},exports.setColumnCountForVertical=z,exports.setDividerLinewrap=w,exports.setMarquee=S,exports.setStairsStep=A,exports.stairsResizeObserver=function(t){v(t,A,{observeIntersection:!0,observeDirectChildrenResize:!0})},exports.verticalsResizeObserver=function(t){v(t,function(t){var e;null!==(e=t.parentNode)&&void 0!==e&&e.style&&(t.parentNode.style.height=""),z(t)},{getResizeValue:y,observeIntersection:!0,targetMutation:{options:{attributes:!0,attributeFilter:["style"],childList:!0,subtree:!0},shouldApply:C}})};
+"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.0",
+  "version": "1.4.2",
   "description": "",
   "engines": {
     "node": ">=20.19.0",
@@ -44,7 +44,7 @@
     "docs:build": "npm run build -w website",
     "mcp:check": "npm run check -w @inc2734/unitone-css-mcp",
     "skills:install": "node packages/skills/bin/skillpack-install.mjs",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "node --test tests/*.test.mjs",
     "format:js": "prettier --write './src/**/*.{js,jsx}'",
     "format": "run-p format:*"
   },

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,12 +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;
-  min-width: 100%;
+  justify-content: start;
+  flex-flow: row nowrap;
 
   &[data-unitone-layout~="marquee:initialized"] {
     animation-name: marquee;
@@ -45,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);
@@ -64,10 +71,10 @@
 
 @keyframes marquee {
     0% { translate: 0; }
-  100% { translate: calc(-100% - var(--unitone--gap)); }
+  100% { translate: var(--unitone--marquee-travel, 0px); }
 }
 
 @keyframes marquee-reverse {
-    0% { translate: 0; }
-  100% { translate: calc(100% + 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>
   );
-};
+});