@wyxos/vibe 4.4.0 → 4.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +3 -1
  2. package/lib/components/FeedFooter.vue.d.ts +0 -1
  3. package/lib/components/GalleryFooter.vue.d.ts +0 -1
  4. package/lib/index.cjs +1 -1
  5. package/lib/index.js +301 -315
  6. package/lib/style.css +1 -1
  7. package/package.json +1 -1
package/lib/style.css CHANGED
@@ -1,2 +1,2 @@
1
- .vibe-surface,.vibe-surface *{box-sizing:border-box}.vibe-surface{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#080808;height:100%;min-height:0;position:relative;overflow:hidden;container-type:inline-size}.vibe-reel-overlay{z-index:10;clip-path:inset(0);background:#080808;outline:none;min-height:0;position:absolute;inset:0;overflow:hidden}.vibe-reel-overlay>.reel-layout{height:100%}.vibe-reel-viewer-enter-active,.vibe-reel-viewer-leave-active{will-change:clip-path, opacity;transition:clip-path .42s cubic-bezier(.22,1,.36,1),opacity .24s}.vibe-reel-viewer-enter-active>.reel-layout,.vibe-reel-viewer-leave-active>.reel-layout{will-change:opacity, transform;transition:opacity .24s,transform .42s cubic-bezier(.22,1,.36,1)}.vibe-reel-viewer-enter-from,.vibe-reel-viewer-leave-to{opacity:.72;clip-path:inset(var(--vibe-reel-origin-top,0) var(--vibe-reel-origin-right,0) var(--vibe-reel-origin-bottom,0) var(--vibe-reel-origin-left,0) round .5rem)}.vibe-reel-viewer-enter-from>.reel-layout,.vibe-reel-viewer-leave-to>.reel-layout{opacity:.68;transform:scale(.985)}.reel-layout{background:#080808;flex-direction:column;width:100%;min-width:0;height:100%;min-height:0;display:flex;position:relative;overflow:hidden}.reel-layout-main{flex:1 1 0;min-width:0;min-height:0;overflow:hidden}.reel-layout-main>.reel-shell{height:100%}.reel-info-sheet-layer{z-index:12;background:#111;min-width:0;min-height:0;overflow:hidden}.reel-info-sheet{overscroll-behavior:contain;background:#111;outline:none;width:100%;min-width:0;max-width:100%;min-height:0;overflow:auto}.reel-layout--overlay>.reel-info-sheet-layer{background:#00000094;align-items:flex-end;display:flex;position:absolute;inset:0}.reel-layout--overlay .reel-info-sheet{border-top:1px solid #333;max-height:80%;box-shadow:0 -1rem 2.5rem #0006}.reel-layout--layout>.reel-info-sheet-layer{border-top:1px solid #333;flex:0 0 50%;width:100%;height:50%;max-height:50%}.reel-layout--layout .reel-info-sheet{height:100%;max-height:100%}.vibe-info-sheet-enter-active,.vibe-info-sheet-leave-active{will-change:max-height, opacity;transition:max-height .3s cubic-bezier(.22,1,.36,1),opacity .22s}.vibe-info-sheet-enter-active>.reel-info-sheet,.vibe-info-sheet-leave-active>.reel-info-sheet{will-change:opacity, transform;transition:opacity .22s,transform .3s cubic-bezier(.22,1,.36,1)}.reel-layout--overlay>.vibe-info-sheet-enter-from,.reel-layout--overlay>.vibe-info-sheet-leave-to{opacity:0}.reel-layout--layout>.vibe-info-sheet-enter-from,.reel-layout--layout>.vibe-info-sheet-leave-to{opacity:0;max-height:0}.reel-layout--overlay>.vibe-info-sheet-enter-from>.reel-info-sheet,.reel-layout--overlay>.vibe-info-sheet-leave-to>.reel-info-sheet,.reel-layout--layout>.vibe-info-sheet-enter-from>.reel-info-sheet,.reel-layout--layout>.vibe-info-sheet-leave-to>.reel-info-sheet{opacity:0;transform:translateY(100%)}@container (width>=1025px){.reel-layout--layout{flex-direction:row}.reel-layout--layout>.reel-info-sheet-layer{border-top:0;border-left:1px solid #333;flex:0 0 25cqw;width:25cqw;height:100%;max-height:none}.reel-layout--layout>.vibe-info-sheet-enter-active,.reel-layout--layout>.vibe-info-sheet-leave-active{will-change:flex-basis, width, opacity;transition:flex-basis .3s cubic-bezier(.22,1,.36,1),width .3s cubic-bezier(.22,1,.36,1),opacity .22s}.reel-layout--layout>.vibe-info-sheet-enter-from,.reel-layout--layout>.vibe-info-sheet-leave-to{flex-basis:0;width:0;max-height:none}.reel-layout--layout>.vibe-info-sheet-enter-from>.reel-info-sheet,.reel-layout--layout>.vibe-info-sheet-leave-to>.reel-info-sheet{transform:translate(100%)}}@media (width>=1920px){@container (width>=1025px){.reel-layout--layout>.reel-info-sheet-layer{flex-basis:40cqw;width:40cqw}.reel-layout--layout>.vibe-info-sheet-enter-from,.reel-layout--layout>.vibe-info-sheet-leave-to{flex-basis:0;width:0}}}.gallery-shell{--gallery-padding:clamp(.375rem, 1vw, .875rem);overscroll-behavior-y:contain;height:100%;min-height:0;padding:var(--gallery-padding);scrollbar-color:#525252 #111;scrollbar-gutter:stable;scrollbar-width:thin;overflow:hidden auto}.gallery-shell::-webkit-scrollbar{width:.625rem}.gallery-shell::-webkit-scrollbar-track{background:#111}.gallery-shell::-webkit-scrollbar-thumb{background:#525252;border:.125rem solid #111;border-radius:999px}.gallery-shell::-webkit-scrollbar-thumb:hover{background:#737373}.masonry-feed-shell{--gallery-padding:clamp(.375rem, 1vw, .875rem);height:100%;min-height:0;position:relative;overflow:hidden}.masonry-feed{padding-right:calc(var(--gallery-padding) + .5rem);scrollbar-gutter:auto;scrollbar-width:none;flex-direction:column;display:flex}.masonry-feed::-webkit-scrollbar{width:0;height:0;display:none}.gallery-scrollbar{z-index:8;top:var(--gallery-padding);right:.125rem;bottom:var(--gallery-padding);opacity:0;visibility:hidden;cursor:pointer;pointer-events:none;touch-action:none;-webkit-user-select:none;user-select:none;background:#111;border-radius:999px;width:.625rem;transition:opacity .16s,visibility .16s;position:absolute;overflow:hidden}.gallery-scrollbar--visible{opacity:1;visibility:visible;pointer-events:auto}.gallery-scrollbar-thumb{cursor:grab;touch-action:none;background:#525252;border:.125rem solid #111;border-radius:999px;width:100%;min-height:2rem;position:absolute;top:0;left:0}.gallery-scrollbar--ready:not(.gallery-scrollbar--interacting):not(.gallery-scrollbar--dragging) .gallery-scrollbar-thumb{will-change:height, transform;transition:height .22s cubic-bezier(.22,1,.36,1),transform .22s cubic-bezier(.22,1,.36,1)}.gallery-scrollbar-thumb:hover{background:#737373}.gallery-scrollbar-thumb:focus-visible{outline-offset:-1px;outline:2px solid #d4d4d4}.gallery-scrollbar--dragging .gallery-scrollbar-thumb{cursor:grabbing}.gallery-status{color:#a3a3a3;place-items:center;min-height:calc(100% - 1.75rem);margin:0;font:500 .875rem/1.5 system-ui,sans-serif;display:grid}.masonry{opacity:0;flex:1 0 auto;transition:opacity .16s;position:relative;overflow:clip}.masonry-feed--suspended{pointer-events:none;overflow:hidden}.masonry--ready{opacity:1}.masonry-item{transition:width .16s ease, height .16s ease, transform .42s cubic-bezier(.22, 1, .36, 1) var(--masonry-entry-delay,0s);background:#171717;border-radius:.5rem;position:absolute;top:0;left:0;overflow:hidden}.masonry-item.media-card--entering{will-change:transform;transition:none}.masonry-item.media-card--leaving{pointer-events:none;will-change:transform}.media-card{background:#171717}.media-card[role=button]{cursor:pointer}.media-card[role=button]:focus-visible{outline-offset:-2px;outline:2px solid #f5f5f5}.media-card-focus-silent:focus{outline:none!important}.media-card--error{background:#121212}.media-card--transparent-chrome{background:0 0}.media-card-content{flex-direction:column;width:100%;height:100%;display:flex;position:relative}.media-card-media{background:#171717;flex:auto;min-width:0;min-height:0;position:relative;overflow:hidden}.media-card-media--carousel{touch-action:pan-y}.media-card-frame{position:absolute;inset:0}.media-slide-next-enter-active,.media-slide-next-leave-active,.media-slide-previous-enter-active,.media-slide-previous-leave-active{will-change:opacity, transform;transition:opacity .22s,transform .28s cubic-bezier(.22,1,.36,1)}.media-slide-next-enter-from,.media-slide-previous-leave-to{opacity:.72;transform:translate(100%)}.media-slide-next-leave-to,.media-slide-previous-enter-from{opacity:.72;transform:translate(-100%)}.media-card-header,.media-card-footer{z-index:2;pointer-events:auto;background:#111;flex:none;min-width:0;position:relative;overflow:hidden}.media-card-region--transparent{background:0 0}.media-card-activator{z-index:1;cursor:pointer;background:0 0;border:0;padding:0;position:absolute;inset:0}.media-card-activator:focus-visible{outline-offset:-2px;outline:2px solid #f5f5f5}.media-carousel-controls{z-index:4;pointer-events:none;opacity:0;visibility:hidden;justify-content:space-between;transition:opacity .16s,visibility .16s;display:flex;position:absolute;top:50%;left:.625rem;right:.625rem;transform:translateY(-50%)}.media-card:hover .media-carousel-controls,.media-carousel-controls--persistent{opacity:1;visibility:visible}.media-card:focus-within:not(.media-card-focus-silent):not(:has(.media-card-focus-silent)) .media-carousel-controls{opacity:1;visibility:visible}.media-carousel-control{color:#f5f5f5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;pointer-events:auto;background:#080808c7;border:1px solid #ffffff59;border-radius:50%;place-items:center;width:2.5rem;height:2.5rem;padding:0;transition:background .16s,opacity .16s,transform .16s;display:grid}.media-carousel-control:hover:not(:disabled){background:#262626f0;transform:scale(1.04)}.media-carousel-control:active:not(:disabled){transform:scale(.96)}.media-carousel-control:disabled{cursor:default;opacity:.28}.media-carousel-control:focus-visible{outline-offset:3px;outline:2px solid #f5f5f5}.media-preview--reel-video{cursor:pointer}.media-controls{z-index:5;color:#f5f5f5;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#080808d1;border:0;border-radius:0;gap:0;padding:0;display:grid;position:absolute;bottom:0;left:0;right:0}.media-controls--masonry{-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0}.media-controls-row{justify-content:flex-start;align-items:center;gap:.5rem;min-width:0;min-height:2.5rem;display:flex}.media-control-playback{margin-left:.375rem}.media-controls-audio{align-items:center;gap:.375rem;min-width:0;display:flex}.media-control-button{width:1.75rem;height:1.75rem;color:inherit;cursor:pointer;background:0 0;border:0;border-radius:50%;flex:none;place-items:center;padding:0;transition:background .16s,transform .16s;display:grid}.media-control-button:hover{background:#ffffff24}.media-control-button:active{transform:scale(.92)}.media-control-button:focus-visible,.media-control-range:focus-visible{outline-offset:2px;outline:2px solid #f5f5f5}.media-control-time{color:#f5f5f5;font-variant-numeric:tabular-nums;white-space:nowrap;flex:none;font:500 .72rem/1 system-ui,sans-serif}.media-control-range{appearance:none;background:linear-gradient(to right, #f5f5f5 var(--media-range-progress), #ffffff4d var(--media-range-progress));cursor:pointer;height:.9rem;margin:0}.media-control-range::-webkit-slider-thumb{appearance:none;background:#f5f5f5;border:0;border-radius:50%;width:.75rem;height:.75rem;box-shadow:0 0 0 1px #0000004d}.media-control-range::-webkit-slider-runnable-track{background:0 0;height:100%}.media-control-range::-moz-range-thumb{background:#f5f5f5;border:0;border-radius:50%;width:.75rem;height:.75rem;box-shadow:0 0 0 1px #0000004d}.media-control-range::-moz-range-track{background:0 0;height:100%}.media-control-range:disabled{cursor:default;opacity:.45}.media-control-seek{border-radius:0;width:100%;height:.45rem}.media-control-seek::-webkit-slider-thumb{appearance:none;width:0;height:0;box-shadow:none;background:0 0;border-radius:0}.media-control-seek::-moz-range-thumb{width:0;height:0;box-shadow:none;background:0 0;border:0;border-radius:0}.media-control-volume{border-radius:999px;flex:0 5rem;width:clamp(2.75rem,18%,5rem);min-width:2.75rem}.reel-feed{scroll-snap-type:y mandatory;scrollbar-color:auto;scrollbar-gutter:auto;scrollbar-width:none;flex:auto;width:100%;min-height:0;padding:0;container-type:size}.reel-shell{--gallery-padding:clamp(.375rem, 1vw, .875rem);width:100%;height:100%;min-height:0;padding:var(--gallery-padding);background:#080808;flex-direction:column;display:flex;overflow:hidden}.reel-shell>.media-card-region{width:100%}.reel-shell>.media-card-header{border-radius:.5rem .5rem 0 0}.reel-shell>.media-card-footer{border-radius:0 0 .5rem .5rem}.reel-feed::-webkit-scrollbar{width:0;height:0;display:none}.reel-feed[data-resizing]{scroll-snap-type:none}.reel-track{width:100%;display:grid}.reel-item{scroll-snap-align:start;scroll-snap-stop:always;background:#080808;width:100%;min-width:0;height:100%;padding:0;position:relative}.reel-item .media-card-content{background:#171717;border-radius:.5rem;overflow:hidden}.reel-shell--has-header .reel-item .media-card-content{border-top-left-radius:0;border-top-right-radius:0}.reel-shell--has-footer .reel-item .media-card-content{border-bottom-right-radius:0;border-bottom-left-radius:0}.reel-item .media-preview{object-fit:contain}.reel-feed .gallery-footer{scroll-snap-align:end}.reel-auto-advance{width:calc(100% + (var(--gallery-padding) * 2));margin-right:calc(var(--gallery-padding) * -1);margin-bottom:calc(var(--gallery-padding) * -1);margin-left:calc(var(--gallery-padding) * -1);background:#ffffff2e;flex:0 0 .25rem;overflow:hidden}.reel-auto-advance-progress{transform-origin:0;width:100%;height:100%;animation:reel-auto-advance var(--vibe-reel-auto-advance-duration) linear forwards;background:#f5f5f5;display:block;transform:scaleX(0)}@keyframes reel-auto-advance{to{transform:scaleX(1)}}.media-loading,.media-error{z-index:1;position:absolute;inset:0}.media-loading{background:#171717;overflow:hidden}.media-loading-shimmer{background:linear-gradient(105deg,#0000 30%,#ffffff12 46%,#ffffff1c 50%,#ffffff12 54%,#0000 70%);animation:1.4s ease-in-out infinite media-loading-shimmer;position:absolute;inset:0;transform:translate(-100%)}.media-error{color:#a3a3a3;text-align:center;background:linear-gradient(145deg,#171717,#101010);align-content:center;justify-items:center;gap:.375rem;padding:1rem;font:500 .75rem/1.35 system-ui,sans-serif;display:grid}.media-error-code{color:#e5e5e5;letter-spacing:.04em;font:650 1rem/1 system-ui,sans-serif}.media-preview{opacity:0;object-fit:cover;background:#171717;width:100%;height:100%;transition:opacity .22s,transform .32s;display:block;transform:scale(1.01)}.media-preview--ready{opacity:1;transform:none}.gallery-footer{place-items:center;min-height:5rem;display:grid}.gallery-sentinel{width:1px;height:2rem}.load-more-status{color:#a3a3a3;margin:0;font:500 .8125rem/1.5 system-ui,sans-serif}.end-feed{justify-items:center;gap:.625rem;animation:.22s both end-feed-enter;display:grid}.end-feed-message{color:#a3a3a3;margin:0;font:500 .8125rem/1.5 system-ui,sans-serif}.load-more-button{color:#f5f5f5;cursor:pointer;background:#171717;border:1px solid #404040;border-radius:999px;min-width:8rem;min-height:2.5rem;padding:.625rem 1rem;font:600 .8125rem/1 system-ui,sans-serif;transition:border-color .16s,background .16s,transform .16s}.load-more-button:not(:disabled):hover{background:#262626;border-color:#737373}.load-more-button:not(:disabled):active{transform:translateY(1px)}.load-more-button:disabled{color:#737373;cursor:not-allowed;background:#171717;border-color:#262626}.load-more-button:focus-visible{outline-offset:3px;outline:2px solid #a3a3a3}@keyframes media-loading-shimmer{to{transform:translate(100%)}}@keyframes end-feed-enter{0%{opacity:0;transform:translateY(.375rem)}}@media (prefers-reduced-motion:reduce){.masonry,.masonry-item,.load-more-button,.end-feed,.media-control-button,.media-carousel-control,.media-carousel-controls,.media-slide-next-enter-active,.media-slide-next-leave-active,.media-slide-previous-enter-active,.media-slide-previous-leave-active,.media-preview,.gallery-scrollbar,.gallery-scrollbar-thumb,.vibe-reel-viewer-enter-active,.vibe-reel-viewer-leave-active,.vibe-reel-viewer-enter-active>.reel-layout,.vibe-reel-viewer-leave-active>.reel-layout,.vibe-info-sheet-enter-active,.vibe-info-sheet-leave-active,.vibe-info-sheet-enter-active>.reel-info-sheet,.vibe-info-sheet-leave-active>.reel-info-sheet{transition:none}.media-loading-shimmer{animation:none}}
1
+ .vibe-surface,.vibe-surface *{box-sizing:border-box}.vibe-surface{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#080808;height:100%;min-height:0;position:relative;overflow:hidden;container-type:inline-size}.vibe-reel-overlay{z-index:10;clip-path:inset(0);background:#080808;outline:none;min-height:0;position:absolute;inset:0;overflow:hidden}.vibe-reel-overlay>.reel-layout{height:100%}.vibe-reel-viewer-enter-active,.vibe-reel-viewer-leave-active{will-change:clip-path, opacity;transition:clip-path .42s cubic-bezier(.22,1,.36,1),opacity .24s}.vibe-reel-viewer-enter-active>.reel-layout,.vibe-reel-viewer-leave-active>.reel-layout{will-change:opacity, transform;transition:opacity .24s,transform .42s cubic-bezier(.22,1,.36,1)}.vibe-reel-viewer-enter-from,.vibe-reel-viewer-leave-to{opacity:.72;clip-path:inset(var(--vibe-reel-origin-top,0) var(--vibe-reel-origin-right,0) var(--vibe-reel-origin-bottom,0) var(--vibe-reel-origin-left,0) round .5rem)}.vibe-reel-viewer-enter-from>.reel-layout,.vibe-reel-viewer-leave-to>.reel-layout{opacity:.68;transform:scale(.985)}.reel-layout{background:#080808;flex-direction:column;width:100%;min-width:0;height:100%;min-height:0;display:flex;position:relative;overflow:hidden}.reel-layout-main{flex:1 1 0;min-width:0;min-height:0;overflow:hidden}.reel-layout-main>.reel-shell{height:100%}.reel-info-sheet-layer{z-index:12;background:#111;min-width:0;min-height:0;overflow:hidden}.reel-info-sheet{overscroll-behavior:contain;background:#111;outline:none;width:100%;min-width:0;max-width:100%;min-height:0;overflow:auto}.reel-layout--overlay>.reel-info-sheet-layer{background:#00000094;align-items:flex-end;display:flex;position:absolute;inset:0}.reel-layout--overlay .reel-info-sheet{border-top:1px solid #333;max-height:80%;box-shadow:0 -1rem 2.5rem #0006}.reel-layout--layout>.reel-info-sheet-layer{border-top:1px solid #333;flex:0 0 50%;width:100%;height:50%;max-height:50%}.reel-layout--layout .reel-info-sheet{height:100%;max-height:100%}.vibe-info-sheet-enter-active,.vibe-info-sheet-leave-active{will-change:max-height, opacity;transition:max-height .3s cubic-bezier(.22,1,.36,1),opacity .22s}.vibe-info-sheet-enter-active>.reel-info-sheet,.vibe-info-sheet-leave-active>.reel-info-sheet{will-change:opacity, transform;transition:opacity .22s,transform .3s cubic-bezier(.22,1,.36,1)}.reel-layout--overlay>.vibe-info-sheet-enter-from,.reel-layout--overlay>.vibe-info-sheet-leave-to{opacity:0}.reel-layout--layout>.vibe-info-sheet-enter-from,.reel-layout--layout>.vibe-info-sheet-leave-to{opacity:0;max-height:0}.reel-layout--overlay>.vibe-info-sheet-enter-from>.reel-info-sheet,.reel-layout--overlay>.vibe-info-sheet-leave-to>.reel-info-sheet,.reel-layout--layout>.vibe-info-sheet-enter-from>.reel-info-sheet,.reel-layout--layout>.vibe-info-sheet-leave-to>.reel-info-sheet{opacity:0;transform:translateY(100%)}@container (width>=1025px){.reel-layout--layout{flex-direction:row}.reel-layout--layout>.reel-info-sheet-layer{border-top:0;border-left:1px solid #333;flex:0 0 25cqw;width:25cqw;height:100%;max-height:none}.reel-layout--layout>.vibe-info-sheet-enter-active,.reel-layout--layout>.vibe-info-sheet-leave-active{will-change:flex-basis, width, opacity;transition:flex-basis .3s cubic-bezier(.22,1,.36,1),width .3s cubic-bezier(.22,1,.36,1),opacity .22s}.reel-layout--layout>.vibe-info-sheet-enter-from,.reel-layout--layout>.vibe-info-sheet-leave-to{flex-basis:0;width:0;max-height:none}.reel-layout--layout>.vibe-info-sheet-enter-from>.reel-info-sheet,.reel-layout--layout>.vibe-info-sheet-leave-to>.reel-info-sheet{transform:translate(100%)}}@media (width>=1920px){@container (width>=1025px){.reel-layout--layout>.reel-info-sheet-layer{flex-basis:40cqw;width:40cqw}.reel-layout--layout>.vibe-info-sheet-enter-from,.reel-layout--layout>.vibe-info-sheet-leave-to{flex-basis:0;width:0}}}.gallery-shell{--gallery-padding:clamp(.375rem, 1vw, .875rem);overscroll-behavior-y:contain;height:100%;min-height:0;padding:var(--gallery-padding);scrollbar-color:#525252 #111;scrollbar-gutter:stable;scrollbar-width:thin;overflow:hidden auto}.gallery-shell::-webkit-scrollbar{width:.625rem}.gallery-shell::-webkit-scrollbar-track{background:#111}.gallery-shell::-webkit-scrollbar-thumb{background:#525252;border:.125rem solid #111;border-radius:999px}.gallery-shell::-webkit-scrollbar-thumb:hover{background:#737373}.masonry-feed-shell{--gallery-padding:clamp(.375rem, 1vw, .875rem);height:100%;min-height:0;position:relative;overflow:hidden}.masonry-feed{padding-right:calc(var(--gallery-padding) + .5rem);scrollbar-gutter:auto;scrollbar-width:none;flex-direction:column;display:flex}.masonry-feed::-webkit-scrollbar{width:0;height:0;display:none}.gallery-scrollbar{z-index:8;top:var(--gallery-padding);right:.125rem;bottom:var(--gallery-padding);opacity:0;visibility:hidden;cursor:pointer;pointer-events:none;touch-action:none;-webkit-user-select:none;user-select:none;background:#111;border-radius:999px;width:.625rem;transition:opacity .16s,visibility .16s;position:absolute;overflow:hidden}.gallery-scrollbar--visible{opacity:1;visibility:visible;pointer-events:auto}.gallery-scrollbar-thumb{cursor:grab;touch-action:none;background:#525252;border:.125rem solid #111;border-radius:999px;width:100%;min-height:2rem;position:absolute;top:0;left:0}.gallery-scrollbar--ready:not(.gallery-scrollbar--interacting):not(.gallery-scrollbar--dragging) .gallery-scrollbar-thumb{will-change:height, transform;transition:height .22s cubic-bezier(.22,1,.36,1),transform .22s cubic-bezier(.22,1,.36,1)}.gallery-scrollbar-thumb:hover{background:#737373}.gallery-scrollbar-thumb:focus-visible{outline-offset:-1px;outline:2px solid #d4d4d4}.gallery-scrollbar--dragging .gallery-scrollbar-thumb{cursor:grabbing}.gallery-status{color:#a3a3a3;place-items:center;min-height:calc(100% - 1.75rem);margin:0;font:500 .875rem/1.5 system-ui,sans-serif;display:grid}.masonry{opacity:0;flex:1 0 auto;transition:opacity .16s;position:relative;overflow:clip}.masonry-feed--suspended{pointer-events:none;overflow:hidden}.masonry--ready{opacity:1}.masonry-item{transition:width .16s ease, height .16s ease, transform .42s cubic-bezier(.22, 1, .36, 1) var(--masonry-entry-delay,0s);background:#171717;border-radius:.5rem;position:absolute;top:0;left:0;overflow:hidden}.masonry-item.media-card--entering{will-change:transform;transition:none}.masonry-item.media-card--leaving{pointer-events:none;will-change:transform}.media-card{background:#171717}.media-card[role=button]{cursor:pointer}.media-card[role=button]:focus-visible{outline-offset:-2px;outline:2px solid #f5f5f5}.media-card-focus-silent:focus{outline:none!important}.media-card--error{background:#121212}.media-card--transparent-chrome{background:0 0}.media-card-content{flex-direction:column;width:100%;height:100%;display:flex;position:relative}.media-card-media{background:#171717;flex:auto;min-width:0;min-height:0;position:relative;overflow:hidden}.media-card-media--carousel{touch-action:pan-y}.media-card-frame{position:absolute;inset:0}.media-slide-next-enter-active,.media-slide-next-leave-active,.media-slide-previous-enter-active,.media-slide-previous-leave-active{will-change:opacity, transform;transition:opacity .22s,transform .28s cubic-bezier(.22,1,.36,1)}.media-slide-next-enter-from,.media-slide-previous-leave-to{opacity:.72;transform:translate(100%)}.media-slide-next-leave-to,.media-slide-previous-enter-from{opacity:.72;transform:translate(-100%)}.media-card-header,.media-card-footer{z-index:2;pointer-events:auto;background:#111;flex:none;min-width:0;position:relative;overflow:hidden}.media-card-region--transparent{background:0 0}.media-card-activator{z-index:1;cursor:pointer;background:0 0;border:0;padding:0;position:absolute;inset:0}.media-card-activator:focus-visible{outline-offset:-2px;outline:2px solid #f5f5f5}.media-carousel-controls{z-index:4;pointer-events:none;opacity:0;visibility:hidden;justify-content:space-between;transition:opacity .16s,visibility .16s;display:flex;position:absolute;top:50%;left:.625rem;right:.625rem;transform:translateY(-50%)}.media-card:hover .media-carousel-controls,.media-carousel-controls--persistent{opacity:1;visibility:visible}.media-card:focus-within:not(.media-card-focus-silent):not(:has(.media-card-focus-silent)) .media-carousel-controls{opacity:1;visibility:visible}.media-carousel-control{color:#f5f5f5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;pointer-events:auto;background:#080808c7;border:1px solid #ffffff59;border-radius:50%;place-items:center;width:2.5rem;height:2.5rem;padding:0;transition:background .16s,opacity .16s,transform .16s;display:grid}.media-carousel-control:hover:not(:disabled){background:#262626f0;transform:scale(1.04)}.media-carousel-control:active:not(:disabled){transform:scale(.96)}.media-carousel-control:disabled{cursor:default;opacity:.28}.media-carousel-control:focus-visible{outline-offset:3px;outline:2px solid #f5f5f5}.media-preview--reel-video{cursor:pointer}.media-controls{z-index:5;color:#f5f5f5;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#080808d1;border:0;border-radius:0;gap:0;padding:0;display:grid;position:absolute;bottom:0;left:0;right:0}.media-controls--masonry{-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0}.media-controls-row{justify-content:flex-start;align-items:center;gap:.5rem;min-width:0;min-height:2.5rem;display:flex}.media-control-playback{margin-left:.375rem}.media-controls-audio{align-items:center;gap:.375rem;min-width:0;display:flex}.media-control-button{width:1.75rem;height:1.75rem;color:inherit;cursor:pointer;background:0 0;border:0;border-radius:50%;flex:none;place-items:center;padding:0;transition:background .16s,transform .16s;display:grid}.media-control-button:hover{background:#ffffff24}.media-control-button:active{transform:scale(.92)}.media-control-button:focus-visible,.media-control-range:focus-visible{outline-offset:2px;outline:2px solid #f5f5f5}.media-control-time{color:#f5f5f5;font-variant-numeric:tabular-nums;white-space:nowrap;flex:none;font:500 .72rem/1 system-ui,sans-serif}.media-control-range{appearance:none;background:linear-gradient(to right, #f5f5f5 var(--media-range-progress), #ffffff4d var(--media-range-progress));cursor:pointer;height:.9rem;margin:0}.media-control-range::-webkit-slider-thumb{appearance:none;background:#f5f5f5;border:0;border-radius:50%;width:.75rem;height:.75rem;box-shadow:0 0 0 1px #0000004d}.media-control-range::-webkit-slider-runnable-track{background:0 0;height:100%}.media-control-range::-moz-range-thumb{background:#f5f5f5;border:0;border-radius:50%;width:.75rem;height:.75rem;box-shadow:0 0 0 1px #0000004d}.media-control-range::-moz-range-track{background:0 0;height:100%}.media-control-range:disabled{cursor:default;opacity:.45}.media-control-seek{border-radius:0;width:100%;height:.45rem}.media-control-seek::-webkit-slider-thumb{appearance:none;width:0;height:0;box-shadow:none;background:0 0;border-radius:0}.media-control-seek::-moz-range-thumb{width:0;height:0;box-shadow:none;background:0 0;border:0;border-radius:0}.media-control-volume{border-radius:999px;flex:0 5rem;width:clamp(2.75rem,18%,5rem);min-width:2.75rem}.reel-feed{scroll-snap-type:y mandatory;scrollbar-color:auto;scrollbar-gutter:auto;scrollbar-width:none;flex:auto;width:100%;min-height:0;padding:0;container-type:size}.reel-shell{--gallery-padding:clamp(.375rem, 1vw, .875rem);width:100%;height:100%;min-height:0;padding:var(--gallery-padding);background:#080808;flex-direction:column;display:flex;overflow:hidden}.reel-shell>.media-card-region{width:100%}.reel-shell>.media-card-header{border-radius:.5rem .5rem 0 0}.reel-shell>.media-card-footer{border-radius:0 0 .5rem .5rem}.reel-feed::-webkit-scrollbar{width:0;height:0;display:none}.reel-feed[data-resizing]{scroll-snap-type:none}.reel-track{width:100%;display:grid}.reel-item{scroll-snap-align:start;scroll-snap-stop:always;background:#080808;width:100%;min-width:0;height:100%;padding:0;position:relative}.reel-item .media-card-content{background:#171717;border-radius:.5rem;overflow:hidden}.reel-shell--has-header .reel-item .media-card-content{border-top-left-radius:0;border-top-right-radius:0}.reel-shell--has-footer .reel-item .media-card-content{border-bottom-right-radius:0;border-bottom-left-radius:0}.reel-item .media-preview{object-fit:contain}.reel-feed .gallery-footer{scroll-snap-align:end}.reel-auto-advance{width:calc(100% + (var(--gallery-padding) * 2));margin-right:calc(var(--gallery-padding) * -1);margin-bottom:calc(var(--gallery-padding) * -1);margin-left:calc(var(--gallery-padding) * -1);background:#ffffff2e;flex:0 0 .25rem;overflow:hidden}.reel-auto-advance-progress{transform-origin:0;width:100%;height:100%;animation:reel-auto-advance var(--vibe-reel-auto-advance-duration) linear forwards;background:#f5f5f5;display:block;transform:scaleX(0)}@keyframes reel-auto-advance{to{transform:scaleX(1)}}.media-loading,.media-error{z-index:1;position:absolute;inset:0}.media-loading{background:#171717;overflow:hidden}.media-loading-shimmer{background:linear-gradient(105deg,#0000 30%,#ffffff12 46%,#ffffff1c 50%,#ffffff12 54%,#0000 70%);animation:1.4s ease-in-out infinite media-loading-shimmer;position:absolute;inset:0;transform:translate(-100%)}.media-error{color:#a3a3a3;text-align:center;background:linear-gradient(145deg,#171717,#101010);align-content:center;justify-items:center;gap:.375rem;padding:1rem;font:500 .75rem/1.35 system-ui,sans-serif;display:grid}.media-error-code{color:#e5e5e5;letter-spacing:.04em;font:650 1rem/1 system-ui,sans-serif}.media-preview{opacity:0;object-fit:cover;background:#171717;width:100%;height:100%;transition:opacity .22s,transform .32s;display:block;transform:scale(1.01)}.media-preview--ready{opacity:1;transform:none}.gallery-footer{place-items:center;min-height:5rem;display:grid}.load-more-status{color:#a3a3a3;margin:0;font:500 .8125rem/1.5 system-ui,sans-serif}.end-feed{justify-items:center;gap:.625rem;animation:.22s both end-feed-enter;display:grid}.end-feed-message{color:#a3a3a3;margin:0;font:500 .8125rem/1.5 system-ui,sans-serif}.load-more-button{color:#f5f5f5;cursor:pointer;background:#171717;border:1px solid #404040;border-radius:999px;min-width:8rem;min-height:2.5rem;padding:.625rem 1rem;font:600 .8125rem/1 system-ui,sans-serif;transition:border-color .16s,background .16s,transform .16s}.load-more-button:not(:disabled):hover{background:#262626;border-color:#737373}.load-more-button:not(:disabled):active{transform:translateY(1px)}.load-more-button:disabled{color:#737373;cursor:not-allowed;background:#171717;border-color:#262626}.load-more-button:focus-visible{outline-offset:3px;outline:2px solid #a3a3a3}@keyframes media-loading-shimmer{to{transform:translate(100%)}}@keyframes end-feed-enter{0%{opacity:0;transform:translateY(.375rem)}}@media (prefers-reduced-motion:reduce){.masonry,.masonry-item,.load-more-button,.end-feed,.media-control-button,.media-carousel-control,.media-carousel-controls,.media-slide-next-enter-active,.media-slide-next-leave-active,.media-slide-previous-enter-active,.media-slide-previous-leave-active,.media-preview,.gallery-scrollbar,.gallery-scrollbar-thumb,.vibe-reel-viewer-enter-active,.vibe-reel-viewer-leave-active,.vibe-reel-viewer-enter-active>.reel-layout,.vibe-reel-viewer-leave-active>.reel-layout,.vibe-info-sheet-enter-active,.vibe-info-sheet-leave-active,.vibe-info-sheet-enter-active>.reel-info-sheet,.vibe-info-sheet-leave-active>.reel-info-sheet{transition:none}.media-loading-shimmer{animation:none}}
2
2
  /*$vite$:1*/
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wyxos/vibe",
3
- "version": "4.4.0",
3
+ "version": "4.4.1",
4
4
  "description": "An initializable Vue 3 media feed with virtualized masonry and reel layouts.",
5
5
  "keywords": [
6
6
  "vue",