@pathscale/ui 0.0.161 → 0.0.163

package/dist/components/tooltip/tooltip.css

@@ -0,0 +1,198 @@
+@layer components {
+  .tooltip {
+      position: relative;
+      display: inline-block;
+      --tt-bg: var(--color-neutral);
+      --tt-off: calc(100% + 0.5rem);
+      --tt-tail: calc(100% + 1px + 0.25rem);
+    }
+
+  .tooltip > .tooltip-content,
+    .tooltip[data-tip]:before {
+      position: absolute;
+      max-width: 20rem;
+      border-radius: var(--radius-field);
+      padding-inline: calc(0.25rem * 2);
+      padding-block: calc(0.25rem * 1);
+      text-align: center;
+      white-space: normal;
+      color: var(--color-neutral-content);
+      opacity: 0%;
+      font-size: 0.875rem;
+      line-height: 1.25;
+      background-color: var(--tt-bg);
+      width: max-content;
+      pointer-events: none;
+      z-index: 2;
+      --tw-content: attr(data-tip);
+      content: var(--tw-content);
+    }
+
+  .tooltip:after {
+      opacity: 0%;
+      background-color: var(--tt-bg);
+      content: "";
+      pointer-events: none;
+      width: 0.625rem;
+      height: 0.25rem;
+      display: block;
+      position: absolute;
+      mask-repeat: no-repeat;
+      mask-position: -1px 0;
+      --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A");
+      mask-image: var(--mask-tooltip);
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .tooltip > .tooltip-content,
+    .tooltip[data-tip]:before,
+    .tooltip:after {
+      transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;
+    }
+    }
+
+  .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open > .tooltip-content,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open[data-tip]:before,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open:after,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover > .tooltip-content,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover[data-tip]:before,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover:after,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible) > .tooltip-content,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible)[data-tip]:before,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible):after {
+      opacity: 100%;
+      --tt-pos: 0rem;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open > .tooltip-content,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open[data-tip]:before,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open:after,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover > .tooltip-content,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover[data-tip]:before,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover:after,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible) > .tooltip-content,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible)[data-tip]:before,
+    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible):after {
+      transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s;
+    }
+    }
+
+  .tooltip > .tooltip-content,
+    .tooltip[data-tip]:before {
+      transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
+      inset: auto auto var(--tt-off) 50%;
+    }
+
+  .tooltip:after {
+      transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
+      inset: auto auto var(--tt-tail) 50%;
+    }
+
+  .tooltip-bottom > .tooltip-content,
+    .tooltip-bottom[data-tip]:before {
+      transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem));
+      inset: var(--tt-off) auto auto 50%;
+    }
+
+  .tooltip-bottom:after {
+      transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem)) rotate(180deg);
+      inset: var(--tt-tail) auto auto 50%;
+    }
+
+  .tooltip-left > .tooltip-content,
+    .tooltip-left[data-tip]:before {
+      transform: translateX(calc(var(--tt-pos, 0.25rem) - 0.25rem)) translateY(-50%);
+      inset: 50% var(--tt-off) auto auto;
+    }
+
+  .tooltip-left:after {
+      transform: translateX(var(--tt-pos, 0.25rem)) translateY(-50%) rotate(-90deg);
+      inset: 50% calc(var(--tt-tail) + 1px) auto auto;
+    }
+
+  .tooltip-right > .tooltip-content,
+    .tooltip-right[data-tip]:before {
+      transform: translateX(calc(var(--tt-pos, -0.25rem) + 0.25rem)) translateY(-50%);
+      inset: 50% auto auto var(--tt-off);
+    }
+
+  .tooltip-right:after {
+      transform: translateX(var(--tt-pos, -0.25rem)) translateY(-50%) rotate(90deg);
+      inset: 50% auto auto calc(var(--tt-tail) + 1px);
+    }
+
+  .tooltip-top > .tooltip-content,
+    .tooltip-top[data-tip]:before {
+      transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
+      inset: auto auto var(--tt-off) 50%;
+    }
+
+  .tooltip-top:after {
+      transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
+      inset: auto auto var(--tt-tail) 50%;
+    }
+
+  .tooltip-accent {
+      --tt-bg: var(--color-accent);
+    }
+
+  .tooltip-accent > .tooltip-content,
+    .tooltip-accent[data-tip]:before {
+      color: var(--color-accent-content);
+    }
+
+  .tooltip-error {
+      --tt-bg: var(--color-error);
+    }
+
+  .tooltip-error > .tooltip-content,
+    .tooltip-error[data-tip]:before {
+      color: var(--color-error-content);
+    }
+
+  .tooltip-info {
+      --tt-bg: var(--color-info);
+    }
+
+  .tooltip-info > .tooltip-content,
+    .tooltip-info[data-tip]:before {
+      color: var(--color-info-content);
+    }
+
+  .tooltip-primary {
+      --tt-bg: var(--color-primary);
+    }
+
+  .tooltip-primary > .tooltip-content,
+    .tooltip-primary[data-tip]:before {
+      color: var(--color-primary-content);
+    }
+
+  .tooltip-secondary {
+      --tt-bg: var(--color-secondary);
+    }
+
+  .tooltip-secondary > .tooltip-content,
+    .tooltip-secondary[data-tip]:before {
+      color: var(--color-secondary-content);
+    }
+
+  .tooltip-success {
+      --tt-bg: var(--color-success);
+    }
+
+  .tooltip-success > .tooltip-content,
+    .tooltip-success[data-tip]:before {
+      color: var(--color-success-content);
+    }
+
+  .tooltip-warning {
+      --tt-bg: var(--color-warning);
+    }
+
+  .tooltip-warning > .tooltip-content,
+    .tooltip-warning[data-tip]:before {
+      color: var(--color-warning-content);
+    }
+}

package/dist/components/types.js

@@ -0,0 +1,8 @@
+const breakpoints = [
+    "base",
+    "sm",
+    "md",
+    "lg",
+    "xl"
+];
+export { breakpoints };

package/dist/components/utils.js

@@ -0,0 +1,46 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE__types_js_7eec16d2__ from "./types.js";
+function isJSXElement(node) {
+    return "object" == typeof node && null !== node;
+}
+function wrapWithElementIfInvalid({ node, wrapper = "div", className = "" }) {
+    null == node || "string" == typeof node || "number" == typeof node || isJSXElement(node);
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, {
+        component: wrapper,
+        class: className,
+        children: node
+    });
+}
+function mapResponsiveProp(prop, classMap) {
+    if (void 0 === prop) return [];
+    if ("string" == typeof prop || "boolean" == typeof prop) return [
+        classMap[String(prop)]
+    ];
+    return __WEBPACK_EXTERNAL_MODULE__types_js_7eec16d2__.breakpoints.flatMap((bp)=>{
+        const value = prop[bp];
+        if (void 0 === value) return [];
+        const className = classMap[String(value)];
+        return "base" === bp ? [
+            className
+        ] : [
+            `${bp}:${className}`
+        ];
+    });
+}
+function useDesktop(breakpoint = 1024) {
+    const [isDesktop, setIsDesktop] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const checkIfDesktop = ()=>{
+        const width = window.innerWidth;
+        setIsDesktop(width >= breakpoint);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        checkIfDesktop();
+        window.addEventListener("resize", checkIfDesktop);
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        window.removeEventListener("resize", checkIfDesktop);
+    });
+    return isDesktop;
+}
+export { mapResponsiveProp, useDesktop, wrapWithElementIfInvalid };

package/dist/components/video-preview/VideoPreview.js

@@ -0,0 +1,55 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<video>");
+const VideoPreview = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "stream",
+        "muted",
+        "mirror",
+        "dataTheme",
+        "class",
+        "className",
+        "style"
+    ]);
+    const muted = ()=>local.muted ?? true;
+    const mirror = ()=>local.mirror ?? false;
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+        get when () {
+            return local.stream();
+        },
+        children: (stream)=>{
+            let videoRef;
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+                videoRef.srcObject = stream();
+            });
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+                videoRef.srcObject = null;
+            });
+            return (()=>{
+                var _el$ = _tmpl$();
+                var _ref$ = videoRef;
+                "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : videoRef = _el$;
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                    autoplay: true,
+                    playsinline: true,
+                    get muted () {
+                        return muted();
+                    },
+                    get ["data-theme"] () {
+                        return local.dataTheme;
+                    },
+                    get ["class"] () {
+                        return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(mirror() && "-scale-x-100", local.class, local.className);
+                    },
+                    get style () {
+                        return local.style;
+                    }
+                }), false, false);
+                return _el$;
+            })();
+        }
+    });
+};
+const video_preview_VideoPreview = VideoPreview;
+export { VideoPreview, video_preview_VideoPreview as default };

package/dist/components/video-preview/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__VideoPreview_js_8a695d89__ from "./VideoPreview.js";
+var __webpack_exports__VideoPreview = __WEBPACK_EXTERNAL_MODULE__VideoPreview_js_8a695d89__["default"];
+export { __webpack_exports__VideoPreview as VideoPreview };

package/dist/components/windowmockup/WindowMockup.js

@@ -0,0 +1,85 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div aria-label="Window mockup">');
+const WindowMockup = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "border",
+        "borderColor",
+        "backgroundColor",
+        "frameColor"
+    ]);
+    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
+    const borderColorValue = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local.borderColor || local.frameColor || "neutral");
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("mockup-window", local.class, local.className, local.border && `border border-${borderColorValue()}`, (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
+            "border-neutral": "neutral" === borderColorValue(),
+            "border-primary": "primary" === borderColorValue(),
+            "border-secondary": "secondary" === borderColorValue(),
+            "border-accent": "accent" === borderColorValue(),
+            "border-info": "info" === borderColorValue(),
+            "border-success": "success" === borderColorValue(),
+            "border-warning": "warning" === borderColorValue(),
+            "border-error": "error" === borderColorValue(),
+            "bg-neutral": "neutral" === local.frameColor,
+            "bg-primary": "primary" === local.frameColor,
+            "bg-secondary": "secondary" === local.frameColor,
+            "bg-accent": "accent" === local.frameColor,
+            "bg-info": "info" === local.frameColor,
+            "bg-success": "success" === local.frameColor,
+            "bg-warning": "warning" === local.frameColor,
+            "bg-error": "error" === local.frameColor
+        })));
+    const innerClasses = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("p-4", local.backgroundColor && `bg-${local.backgroundColor}`, local.border && `border-t border-${borderColorValue()}`, (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
+            "bg-neutral": "neutral" === local.backgroundColor,
+            "bg-primary": "primary" === local.backgroundColor,
+            "bg-secondary": "secondary" === local.backgroundColor,
+            "bg-accent": "accent" === local.backgroundColor,
+            "bg-info": "info" === local.backgroundColor,
+            "bg-success": "success" === local.backgroundColor,
+            "bg-warning": "warning" === local.backgroundColor,
+            "bg-error": "error" === local.backgroundColor
+        })));
+    const innerElement = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        const childrenArray = Array.isArray(resolvedChildren()) ? resolvedChildren() : [
+            resolvedChildren()
+        ];
+        const firstChild = childrenArray[0];
+        if (1 === childrenArray.length && "object" == typeof firstChild && null != firstChild && "type" in firstChild) {
+            const existingClass = firstChild.props?.class || firstChild.props?.className || "";
+            const mergedClass = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(innerClasses(), existingClass);
+            return {
+                ...firstChild,
+                props: {
+                    ...firstChild.props,
+                    class: mergedClass
+                }
+            };
+        }
+        return (()=>{
+            var _el$ = _tmpl$();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, resolvedChildren);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, innerClasses()));
+            return _el$;
+        })();
+    });
+    return (()=>{
+        var _el$2 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get ["class"] () {
+                return classes();
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, innerElement);
+        return _el$2;
+    })();
+};
+const windowmockup_WindowMockup = WindowMockup;
+export { windowmockup_WindowMockup as default };

package/dist/components/windowmockup/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__WindowMockup_js_be933e27__ from "./WindowMockup.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__WindowMockup_js_be933e27__["default"];
+export { __webpack_exports__default as default };

package/dist/countdown/countdown.css

@@ -0,0 +1,58 @@
+@layer components {
+  .countdown {
+      display: inline-flex;
+    }
+
+  .countdown.countdown {
+      line-height: 1em;
+    }
+
+  .countdown > * {
+      visibility: hidden;
+      position: relative;
+      display: inline-block;
+      overflow-y: clip;
+      transition: width 0.4s ease-out 0.2s;
+      height: 1em;
+      --value-v: calc(mod(max(0, var(--value)), 1000));
+      --value-hundreds: calc(round(to-zero, var(--value-v) / 100, 1));
+      --value-tens: calc(round(to-zero, mod(var(--value-v), 100) / 10, 1));
+      --value-ones: calc(mod(var(--value-v), 100));
+      --show-hundreds: clamp(clamp(0, var(--digits, 1) - 2, 1), var(--value-hundreds), 1);
+      --show-tens: clamp(
+          clamp(0, var(--digits, 1) - 1, 1),
+          var(--value-tens) + var(--show-hundreds),
+          1
+        );
+      --first-digits: calc(round(to-zero, var(--value-v) / 10, 1));
+      width: calc(1ch + var(--show-tens) * 1ch + var(--show-hundreds) * 1ch);
+      direction: ltr;
+    }
+
+  .countdown > *:before,
+    .countdown > *:after {
+      visibility: visible;
+      position: absolute;
+      overflow-x: clip;
+      --tw-content: "00\A 01\A 02\A 03\A 04\A 05\A 06\A 07\A 08\A 09\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A 51\A 52\A 53\A 54\A 55\A 56\A 57\A 58\A 59\A 60\A 61\A 62\A 63\A 64\A 65\A 66\A 67\A 68\A 69\A 70\A 71\A 72\A 73\A 74\A 75\A 76\A 77\A 78\A 79\A 80\A 81\A 82\A 83\A 84\A 85\A 86\A 87\A 88\A 89\A 90\A 91\A 92\A 93\A 94\A 95\A 96\A 97\A 98\A 99\A";
+      content: var(--tw-content);
+      font-variant-numeric: tabular-nums;
+      white-space: pre;
+      text-align: end;
+      direction: rtl;
+      transition: all 1s cubic-bezier(1, 0, 0, 1), width 0.2s ease-out 0.2s, opacity 0.2s ease-out 0.2s;
+    }
+
+  .countdown > *:before {
+      width: calc(1ch + var(--show-hundreds) * 1ch);
+      top: calc(var(--first-digits) * -1em);
+      inset-inline-end: 0;
+      opacity: var(--show-tens);
+    }
+
+  .countdown > *:after {
+      width: 1ch;
+      top: calc(var(--value-ones) * -1em);
+      inset-inline-start: 0;
+    }
+}

package/dist/diff/diff.css

@@ -0,0 +1,162 @@
+@layer components {
+  .diff {
+      position: relative;
+      display: grid;
+      width: 100%;
+      overflow: hidden;
+      webkit-user-select: none;
+      user-select: none;
+      grid-template-rows: 1fr 1.8rem 1fr;
+      direction: ltr;
+      container-type: inline-size;
+      grid-template-columns: auto 1fr;
+    }
+
+  .diff:focus-visible,
+    .diff:has(.diff-item-1:focus-visible) {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-offset: 1px;
+      outline-color: var(--color-base-content);
+    }
+
+  .diff:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-offset: 1px;
+      outline-color: var(--color-base-content);
+    }
+
+  .diff:focus-visible .diff-resizer {
+      min-width: 95cqi;
+      max-width: 95cqi;
+    }
+
+  .diff:has(.diff-item-1:focus-visible) {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-offset: 1px;
+    }
+
+  .diff:has(.diff-item-1:focus-visible) .diff-resizer {
+      min-width: 5cqi;
+      max-width: 5cqi;
+    }
+
+  @supports (-webkit-overflow-scrolling: touch) and (overflow: -webkit-paged-x) {
+    .diff:focus .diff-resizer {
+      min-width: 5cqi;
+      max-width: 5cqi;
+    }
+    .diff:has(.diff-item-1:focus) .diff-resizer {
+      min-width: 95cqi;
+      max-width: 95cqi;
+    }
+    }
+
+  .diff-item-2 {
+      position: relative;
+      grid-column-start: 1;
+      grid-row: span 3 / span 3;
+      grid-row-start: 1;
+    }
+
+  .diff-item-2:after {
+      pointer-events: none;
+      position: absolute;
+      top: calc(1/2 * 100%);
+      right: 1px;
+      bottom: calc(0.25rem * 0);
+      z-index: 2;
+      border-radius: calc(infinity * 1px);
+      background-color: var(--color-base-100);
+      width: 1.2rem;
+      height: 1.8rem;
+      border: 2px solid var(--color-base-100);
+      border: 0.5px solid #0000001f;
+      content: "";
+      outline: 1px solid var(--color-base-content);
+      outline-offset: -3px;
+      translate: 50% -50%;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .diff-item-2:after {
+      background-color: color-mix(in oklab, var(--color-base-100) 98%, transparent);
+    }
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .diff-item-2:after {
+      outline: 1px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);
+    }
+    }
+
+  .diff-item-2 > * {
+      pointer-events: none;
+      position: absolute;
+      top: calc(0.25rem * 0);
+      bottom: calc(0.25rem * 0);
+      left: calc(0.25rem * 0);
+      height: 100%;
+      width: 100cqi;
+      max-width: none;
+      object-fit: cover;
+      object-position: center;
+    }
+
+  @supports (-webkit-overflow-scrolling: touch) and (overflow: -webkit-paged-x) {
+    .diff-item-2:after {
+      --tw-content: none;
+      content: var(--tw-content);
+    }
+    }
+
+  .diff-item-1 {
+      position: relative;
+      z-index: 1;
+      grid-column-start: 1;
+      grid-row: span 3 / span 3;
+      grid-row-start: 1;
+      overflow: hidden;
+      border-right: 2px solid var(--color-base-100);
+    }
+
+  .diff-item-1:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+
+  .diff-item-1 > * {
+      pointer-events: none;
+      position: absolute;
+      top: calc(0.25rem * 0);
+      bottom: calc(0.25rem * 0);
+      left: calc(0.25rem * 0);
+      height: 100%;
+      width: 100cqi;
+      max-width: none;
+      object-fit: cover;
+      object-position: center;
+    }
+
+  .diff-resizer {
+      position: relative;
+      isolation: isolate;
+      z-index: 2;
+      grid-column-start: 1;
+      grid-row-start: 2;
+      height: calc(0.25rem * 3);
+      width: 50cqi;
+      max-width: calc(100cqi - 1rem);
+      min-width: 1rem;
+      resize: horizontal;
+      overflow: hidden;
+      opacity: 0%;
+      transform: scaleY(5) translate(0.32rem, 50%);
+      cursor: ew-resize;
+      transform-origin: 100% 100%;
+      clip-path: inset(calc(100% - 0.75rem) 0 0 calc(100% - 0.75rem));
+      transition: min-width 0.3s ease-out, max-width 0.3s ease-out;
+    }
+}