@byeolnaerim/flex-layout 0.0.2 → 0.0.4

package/dist/components.css

@@ -0,0 +1,471 @@
+/* src/flex-layout/styles/FlexLayout.module.css */
+.flex-layout {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  overflow-wrap: revert;
+  position: relative;
+  &[data-direction=column] {
+    flex-direction: column;
+    & > .flex-resize-panel {
+      height: 4px;
+      width: auto;
+      cursor: ns-resize;
+      &:hover > .hover,
+      &:hover > .hover[data-is_hover],
+      &:active > .hover {
+        height: 3px;
+        width: 100%;
+      }
+    }
+    & > .flex-container > .flex-content-fit-wrapper {
+      width: 100%;
+      height: fit-content;
+      & > * {
+        width: 100%;
+        height: fit-content;
+      }
+    }
+  }
+  &[data-direction=row] {
+    flex-direction: row;
+    & > .flex-resize-panel {
+      width: 4px;
+      height: auto;
+      cursor: ew-resize;
+      &:hover > .hover,
+      &:hover > .hover[data-is_hover],
+      &:active > .hover {
+        width: 3px;
+        height: 100%;
+      }
+    }
+    & > .flex-container > .flex-content-fit-wrapper {
+      width: fit-content;
+      height: 100%;
+      & > * {
+        width: fit-content;
+        height: 100%;
+      }
+    }
+  }
+  & > .flex-container {
+    overflow: hidden;
+    box-sizing: border-box;
+    &[data-is_resize_panel=true] {
+      flex: 1 1 0%;
+    }
+    &[data-is_resize_panel=false] {
+      flex: 0 0 0%;
+    }
+    & > *:not(.flex-content-fit-wrapper) {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  & .flex-resize-panel {
+    background-color: rgb(115 115 115);
+    z-index: 1001;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 0 0 0.1%;
+    position: relative;
+    -moz-user-select: -moz-none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    right: 0;
+    bottom: 0;
+    &:hover,
+    &:active {
+      animation-name: drag-panel-hover;
+      animation-fill-mode: forwards;
+      animation-direction: normal;
+      animation-duration: 0.3s;
+      animation-iteration-count: 1;
+      animation-timing-function: cubic-bezier(1, -0.37, 0.73, 0.8);
+    }
+    &:hover > .hover,
+    &:hover > .hover[data-is_hover],
+    &:active > .hover {
+      background-color: #0066ffb5;
+      z-index: 3002;
+      position: absolute;
+      display: block;
+      opacity: 1;
+      visibility: inherit;
+      transition: all 1s;
+      animation-name: drag-panel-hover-highlight;
+      animation-fill-mode: forwards;
+      animation-direction: normal;
+      animation-duration: 0.3s;
+      animation-iteration-count: 1;
+      animation-timing-function: cubic-bezier(1, -0.37, 0.73, 0.8);
+    }
+    & > .hover {
+      opacity: 0;
+      visibility: hidden;
+      transition: all 1s;
+    }
+    &.bottom-cylinder {
+      &::after {
+        border-bottom-left-radius: 15px;
+        border-bottom-right-radius: 15px;
+        bottom: 100%;
+      }
+    }
+    &.bottom-cylinder-reverse {
+      &::after {
+        border-top-left-radius: 15px;
+        border-top-right-radius: 15px;
+        bottom: 100%;
+      }
+    }
+    &.top-cylinder {
+      border-bottom-left-radius: 15px;
+      border-bottom-right-radius: 15px;
+    }
+    &.right-cylinder {
+      &::after {
+        border-top-right-radius: 15px;
+        border-bottom-right-radius: 15px;
+        left: 100%;
+      }
+    }
+    &.left-cylinder {
+      &::after {
+        right: 100%;
+      }
+    }
+    &.bottom-cylinder,
+    &.bottom-cylinder-reverse,
+    &.top-cylinder,
+    &.left-cylinder,
+    &.right-cylinder {
+      &::after {
+        background-color: hsla(0, 0%, 54%, 0.32);
+        content: " ";
+        position: absolute;
+        z-index: 3002;
+      }
+      &:hover,
+      &:hover::after,
+      &:active,
+      &:active::after {
+        background-color: rgb(0 102 255 / 45%);
+        transition: background-color 1s;
+      }
+    }
+    &.bottom-cylinder,
+    &.top-cylinder,
+    &.bottom-cylinder-reverse {
+      &::after {
+        height: 1.1rem;
+        width: 60%;
+      }
+      &:not(.bottom-cylinder-reverse)::after {
+        top: 0;
+      }
+    }
+    &.left-cylinder,
+    &.right-cylinder {
+      &::after {
+        width: 1.1rem;
+        height: 60%;
+      }
+    }
+  }
+}
+@keyframes drag-panel-hover {
+  0% {
+    background-color: #b1b1b1d6;
+  }
+  10% {
+    background-color: #b1b1b1ba;
+  }
+  20% {
+    background-color: #b1b1b194;
+  }
+  40% {
+    background-color: #b1b1b17d;
+  }
+  60% {
+    background-color: #b1b1b152;
+  }
+  80% {
+    background-color: #b1b1b130;
+  }
+  100% {
+    background-color: #b1b1b100;
+    animation-play-state: paused;
+  }
+}
+@keyframes drag-panel-hover-highlight {
+  0% {
+    opacity: 0;
+  }
+  10% {
+    opacity: 0.1;
+  }
+  20% {
+    opacity: 0.2;
+  }
+  40% {
+    opacity: 0.4;
+  }
+  60% {
+    opacity: 0.6;
+  }
+  80% {
+    opacity: 0.8;
+  }
+  100% {
+    opacity: 1;
+    animation-play-state: paused;
+  }
+}
+.flex-split-screen {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  & .flex-split-screen-boundary-container {
+    position: absolute;
+    font-family: Arial, sans-serif;
+    transition: background-color 0.3s, border-color 0.3s;
+    color: #00acc1;
+    border: 2px dashed #00acc1;
+    border-radius: 10px;
+    background-color: #0014ff17;
+    font-size: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    z-index: 9001;
+  }
+  & .flex-split-screen-drag-box-title-wrapper-sticky {
+    position: sticky;
+    top: 0;
+    z-index: 2001;
+    background: #f0f0f0;
+  }
+  & .flex-split-screen-drag-box-title-wrapper {
+    html[data-color-scheme=dark] & {
+      background: #3c3c3c;
+      box-shadow: 0px 1px 20px 0px #1e1e1e;
+    }
+    html[data-color-scheme=light] & {
+      background: #edf1f5;
+      box-shadow: 0px 1px 20px 0px #e5e5e5;
+    }
+    scrollbar-width: initial;
+    scrollbar-color: initial;
+    display: flex;
+    justify-content: space-between;
+    transition:
+      background 0.3s,
+      color 0.3s,
+      box-shadow 0.3s;
+    position: relative;
+    border-bottom: 1px solid #e5e5e5;
+    & .flex-split-screen-drag-box-title-container {
+      display: flex;
+      width: 100%;
+      background: inherit;
+    }
+  }
+}
+.flex-split-screen-drag-box-title-item {
+  display: flex;
+  align-items: baseline;
+  padding-right: 0.5rem;
+  padding-left: 0.1rem;
+  &:last-child:not(:first-child) {
+    border-right: 2px solid #00000012;
+  }
+  &:not(.active) {
+    box-shadow: inset 0 0 20px 20px #00000000;
+    border-bottom: 1px solid #007fff40;
+  }
+  &:hover {
+    html[data-color-scheme=dark] & {
+      background: #494949;
+    }
+    html[data-color-scheme=light] & {
+      background: #e0e0e0;
+    }
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+  &:active {
+    box-shadow: inset 0px 0px 17px 0px #00000029;
+    transform: scale(0.97);
+  }
+  & button {
+    background: none;
+    border: none;
+    color: #bbbbbb;
+    font-weight: bold;
+    font-family: none;
+    font-size: 0.9rem;
+    cursor: pointer;
+    padding: 0 0.25rem;
+  }
+  &.active {
+    html[data-color-scheme=dark] & {
+      color: #b9af3a;
+    }
+    html[data-color-scheme=light] & {
+      color: #494300;
+    }
+    font-weight: bold;
+    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
+    & button {
+      color: #5f5f5f;
+    }
+  }
+}
+.flex-split-screen-drag-box-title-more {
+  display: flex;
+  flex-direction: column;
+  line-height: 0.3;
+  padding: 0rem 0.65rem 0.5rem;
+  font-size: 1.2rem;
+  font-weight: bold;
+  border: none;
+  background: none;
+  color: black;
+  justify-content: space-evenly;
+  cursor: pointer;
+  background: inherit;
+  &:hover {
+    background: #797979;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+  &:active {
+    box-shadow: inset 0px 0px 17px 0px #00000029;
+    transform: scale(0.97);
+  }
+}
+.flex-split-screen-drag-box {
+  align-self: center;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+}
+.flex-split-screen-drag-box-clone {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  display: flex;
+  background-color: #adadad;
+  flex-direction: column;
+  padding: 0.2rem 0.4rem;
+  border-radius: 7px;
+  line-height: 99%;
+  z-index: 9001;
+  & span:first-child {
+    font-weight: bold;
+    font-size: 0.85rem;
+  }
+  & span:last-child {
+    font-size: 0.75rem;
+  }
+}
+
+/* src/flex-layout/styles/listScroll.module.css */
+.default-scroll {
+  overflow: auto;
+}
+.list-scroll {
+  position: relative;
+  flex-wrap: nowrap;
+  text-wrap: nowrap;
+  white-space: nowrap;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  scrollbar-gutter: stable both-edges;
+  &.y {
+    overflow-y: scroll;
+    overflow-x: clip;
+    padding-left: 0.15rem;
+    padding-right: 0.4rem;
+    &:not(:hover) {
+      padding-right: 0.4rem;
+      padding-top: 0.4rem;
+    }
+    &:hover {
+      padding-right: 0;
+      padding-left: top;
+    }
+  }
+  &.x {
+    overflow-y: clip;
+    overflow-x: scroll;
+    padding-top: 0.15rem;
+    padding-bottom: 0.4rem;
+    &:not(:hover) {
+      padding-bottom: 0.4rem;
+      padding-left: 0.4rem;
+    }
+    &:hover {
+      padding-bottom: 0;
+      padding-left: 0;
+    }
+  }
+  &.none {
+    scrollbar-width: none !important;
+    &::-webkit-scrollbar {
+      display: none !important;
+    }
+  }
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  &.show-scroll::-webkit-scrollbar,
+  &:hover::-webkit-scrollbar {
+    scrollbar-width: thin;
+    display: initial;
+    width: 0.45rem;
+    height: 0.45rem;
+  }
+  &.show-scroll::-webkit-scrollbar-thumb,
+  &:hover::-webkit-scrollbar-thumb {
+    background: #222;
+    border-radius: 6px;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
+    transition: background 0.3s ease, box-shadow 0.3s ease;
+  }
+  &.show-scroll::-webkit-scrollbar-thumb:hover,
+  &.show-scroll::-webkit-scrollbar-thumb:active,
+  &:hover::-webkit-scrollbar-thumb:hover {
+    background:
+      linear-gradient(
+        145deg,
+        #ffecec,
+        #f1f1f1);
+  }
+  &.show-scroll::-webkit-scrollbar-track,
+  &:hover::-webkit-scrollbar-track {
+    background:
+      linear-gradient(
+        145deg,
+        #989898,
+        #7c7c7c);
+    border-radius: 6px;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
+  }
+}
+/*# sourceMappingURL=components.css.map */

package/dist/components.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/flex-layout/styles/FlexLayout.module.css","../src/flex-layout/styles/listScroll.module.css"],"sourcesContent":[".flex-layout {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    overflow: auto;\n    overflow-wrap: revert;\n    position: relative;\n    /* -ms-overflow-style: none;\n    scrollbar-width: none; */\n    /* &::-webkit-scrollbar {\n        display: none;\n    } */\n    &[data-direction='column'] {\n        flex-direction: column;\n        & > .flex-resize-panel {\n            height: 4px;\n            width: auto;\n            cursor: ns-resize;\n            &:hover > .hover,\n            &:hover > .hover[data-is_hover],\n            &:active > .hover {\n                height: 3px;\n                width: 100%;\n            }\n        }\n        & > .flex-container > .flex-content-fit-wrapper {\n            width: 100%;\n            height: fit-content;\n            & > * {\n                width: 100%;\n                height: fit-content;\n            }\n        }\n    }\n\n    &[data-direction='row'] {\n        flex-direction: row;\n        & > .flex-resize-panel {\n            width: 4px;\n            height: auto;\n            cursor: ew-resize;\n            &:hover > .hover,\n            &:hover > .hover[data-is_hover],\n            &:active > .hover {\n                width: 3px;\n                height: 100%;\n            }\n        }\n        & > .flex-container > .flex-content-fit-wrapper {\n            width: fit-content;\n            height: 100%;\n            & > * {\n                width: fit-content;\n                height: 100%;\n            }\n        }\n    }\n    & > .flex-container {\n        overflow: hidden;\n        box-sizing: border-box;\n        &[data-is_resize_panel='true'] {\n            flex: 1 1 0%;\n        }\n        &[data-is_resize_panel='false'] {\n            flex: 0 0 0%;\n        }\n        & > *:not(.flex-content-fit-wrapper) {\n            width: 100%;\n            height: 100%;\n        }\n    }\n    & .flex-resize-panel {\n        background-color: rgb(115 115 115);\n        z-index: 1001;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        flex: 0 0 0.1%;\n        position: relative;\n        -moz-user-select: -moz-none;\n        -khtml-user-select: none;\n        -webkit-user-select: none;\n        -ms-user-select: none;\n        user-select: none;\n        right: 0;\n        bottom: 0;\n\n        &:hover,\n        &:active {\n            animation-name: drag-panel-hover;\n            animation-fill-mode: forwards;\n            animation-direction: normal;\n            animation-duration: 0.3s;\n            animation-iteration-count: 1;\n            animation-timing-function: cubic-bezier(1, -0.37, 0.73, 0.8);\n        }\n\n        &:hover > .hover,\n        &:hover > .hover[data-is_hover],\n        &:active > .hover {\n            background-color: #0066ffb5;\n            z-index: 3002;\n            position: absolute;\n            display: block;\n            opacity: 1;\n            visibility: inherit;\n            transition: all 1s;\n            animation-name: drag-panel-hover-highlight;\n            animation-fill-mode: forwards;\n            animation-direction: normal;\n            animation-duration: 0.3s;\n            animation-iteration-count: 1;\n            animation-timing-function: cubic-bezier(1, -0.37, 0.73, 0.8);\n        }\n\n        & > .hover {\n            opacity: 0;\n            visibility: hidden;\n            transition: all 1s;\n        }\n        &.bottom-cylinder {\n            &::after {\n                border-bottom-left-radius: 15px;\n                border-bottom-right-radius: 15px;\n                bottom: 100%;\n            }\n        }\n        &.bottom-cylinder-reverse {\n            &::after {\n                border-top-left-radius: 15px;\n                border-top-right-radius: 15px;\n                bottom: 100%;\n            }\n        }\n        &.top-cylinder {\n            border-bottom-left-radius: 15px;\n            border-bottom-right-radius: 15px;\n        }\n        &.right-cylinder {\n            &::after {\n                border-top-right-radius: 15px;\n                border-bottom-right-radius: 15px;\n                left: 100%;\n            }\n        }\n        &.left-cylinder {\n            &::after {\n                right: 100%;\n            }\n        }\n        &.bottom-cylinder,\n        &.bottom-cylinder-reverse,\n        &.top-cylinder,\n        &.left-cylinder,\n        &.right-cylinder {\n            &::after {\n                background-color: hsla(0, 0%, 54%, 0.32);\n                content: ' ';\n                position: absolute;\n                z-index: 3002;\n            }\n            &:hover,\n            &:hover::after,\n            &:active,\n            &:active::after {\n                background-color: rgb(0 102 255 / 45%);\n                transition: background-color 1s;\n            }\n        }\n        &.bottom-cylinder,\n        &.top-cylinder,\n        &.bottom-cylinder-reverse {\n            &::after {\n                height: 1.1rem;\n                width: 60%;\n            }\n            &:not(.bottom-cylinder-reverse)::after {\n                top: 0;\n            }\n        }\n        &.left-cylinder,\n        &.right-cylinder {\n            &::after {\n                width: 1.1rem;\n                height: 60%;\n            }\n        }\n    }\n}\n\n@keyframes drag-panel-hover {\n    0% {\n        background-color: #b1b1b1d6;\n    }\n\n    10% {\n        background-color: #b1b1b1ba;\n    }\n\n    20% {\n        background-color: #b1b1b194;\n    }\n\n    40% {\n        background-color: #b1b1b17d;\n    }\n\n    60% {\n        background-color: #b1b1b152;\n    }\n\n    80% {\n        background-color: #b1b1b130;\n    }\n\n    100% {\n        background-color: #b1b1b100;\n        animation-play-state: paused;\n    }\n}\n\n@keyframes drag-panel-hover-highlight {\n    0% {\n        opacity: 0;\n    }\n\n    10% {\n        opacity: 0.1;\n    }\n\n    20% {\n        opacity: 0.2;\n    }\n\n    40% {\n        opacity: 0.4;\n    }\n\n    60% {\n        opacity: 0.6;\n    }\n\n    80% {\n        opacity: 0.8;\n    }\n\n    100% {\n        opacity: 1;\n        animation-play-state: paused;\n    }\n}\n\n.flex-split-screen {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    & .flex-split-screen-boundary-container {\n        position: absolute;\n        font-family: Arial, sans-serif;\n        transition:\n            background-color 0.3s,\n            border-color 0.3s;\n        color: #00acc1;\n        border: 2px dashed #00acc1;\n        border-radius: 10px;\n        background-color: #0014ff17;\n        font-size: 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-weight: bold;\n        z-index: 9001;\n    }\n    & .flex-split-screen-drag-box-title-wrapper-sticky {\n        position: sticky;\n        top: 0;\n        z-index: 2001;\n        background: #f0f0f0;\n    }\n    & .flex-split-screen-drag-box-title-wrapper {\n        html[data-color-scheme='dark'] & {\n            background: #3c3c3c;\n            box-shadow: 0px 1px 20px 0px #1e1e1e;\n        }\n        html[data-color-scheme='light'] & {\n            background: #edf1f5;\n            box-shadow: 0px 1px 20px 0px #e5e5e5;\n        }\n        scrollbar-width: initial;\n        scrollbar-color: initial;\n        display: flex;\n        justify-content: space-between;\n        transition:\n            background 0.3s,\n            color 0.3s,\n            box-shadow 0.3s;\n        position: relative;\n        border-bottom: 1px solid #e5e5e5;\n        & .flex-split-screen-drag-box-title-container {\n            display: flex;\n            width: 100%;\n            background: inherit;\n        }\n    }\n}\n.flex-split-screen-drag-box-title-item {\n    display: flex;\n    align-items: baseline;\n    padding-right: 0.5rem;\n    padding-left: 0.1rem;\n    &:last-child:not(:first-child) {\n        border-right: 2px solid #00000012;\n    }\n    &:not(.active) {\n        box-shadow: inset 0 0 20px 20px #00000000;\n        border-bottom: 1px solid #007fff40;\n    }\n    &:hover {\n        html[data-color-scheme='dark'] & {\n            background: #494949;\n        }\n        html[data-color-scheme='light'] & {\n            background: #e0e0e0;\n        }\n        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n    }\n    &:active {\n        box-shadow: inset 0px 0px 17px 0px #00000029;\n        transform: scale(0.97);\n    }\n    & button {\n        background: none;\n        border: none;\n        color: #bbbbbb;\n        font-weight: bold;\n        font-family: none;\n        font-size: 0.9rem;\n        cursor: pointer;\n        padding: 0 0.25rem;\n    }\n    &.active {\n        html[data-color-scheme='dark'] & {\n            color: #b9af3a;\n        }\n        html[data-color-scheme='light'] & {\n            color: #494300;\n        }\n        font-weight: bold;\n        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);\n        & button {\n            color: #5f5f5f;\n        }\n    }\n}\n.flex-split-screen-drag-box-title-more {\n    display: flex;\n    flex-direction: column;\n    line-height: 0.3;\n    padding: 0rem 0.65rem 0.5rem;\n    font-size: 1.2rem;\n    font-weight: bold;\n    border: none;\n    background: none;\n    color: black;\n    justify-content: space-evenly;\n    cursor: pointer;\n    background: inherit;\n    &:hover {\n        background: #797979;\n        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n    }\n    &:active {\n        box-shadow: inset 0px 0px 17px 0px #00000029;\n        transform: scale(0.97);\n    }\n}\n.flex-split-screen-drag-box {\n    align-self: center;\n    -webkit-touch-callout: none; /* iOS */\n    -webkit-user-select: none; /* Safari */\n    -khtml-user-select: none; /* Konqueror */\n    -moz-user-select: none; /* Firefox */\n    -ms-user-select: none; /* IE 10+ */\n    user-select: none; /* Standard syntax */\n    /* pointer-events: none; */\n    -webkit-tap-highlight-color: transparent;\n    /* touch-action: none; */\n    -webkit-touch-callout: none;\n}\n.flex-split-screen-drag-box-clone {\n    -webkit-touch-callout: none; /* iOS */\n    -webkit-user-select: none; /* Safari */\n    -khtml-user-select: none; /* Konqueror */\n    -moz-user-select: none; /* Firefox */\n    -ms-user-select: none; /* IE 10+ */\n    user-select: none; /* Standard syntax */\n    /* pointer-events: none; */\n    -webkit-tap-highlight-color: transparent;\n    /* touch-action: none; */\n    -webkit-touch-callout: none;\n\n    display: flex;\n    background-color: #adadad;\n    flex-direction: column;\n    padding: 0.2rem 0.4rem;\n    border-radius: 7px;\n    line-height: 99%;\n    z-index: 9001;\n    & span:first-child {\n        font-weight: bold;\n        font-size: 0.85rem;\n    }\n    & span:last-child {\n        font-size: 0.75rem;\n    }\n}\n",".default-scroll {\r\n    overflow: auto;\r\n}\r\n.list-scroll {\r\n    position: relative;\r\n    flex-wrap: nowrap;\r\n    text-wrap: nowrap;\r\n    white-space: nowrap;\r\n    scroll-snap-type: x mandatory;\r\n    scroll-behavior: smooth;\r\n    scrollbar-gutter: stable both-edges;\r\n    &.y {\r\n        overflow-y: scroll;\r\n        overflow-x: clip;\r\n        padding-left: 0.15rem;\r\n        padding-right: 0.4rem;\r\n        &:not(:hover) {\r\n            padding-right: 0.4rem;\r\n            padding-top: 0.4rem;\r\n        }\r\n        &:hover {\r\n            padding-right: 0;\r\n            padding-left: top;\r\n        }\r\n    }\r\n\r\n    &.x {\r\n        overflow-y: clip;\r\n        overflow-x: scroll;\r\n        padding-top: 0.15rem;\r\n        padding-bottom: 0.4rem;\r\n        &:not(:hover) {\r\n            padding-bottom: 0.4rem;\r\n            padding-left: 0.4rem;\r\n        }\r\n        &:hover {\r\n            padding-bottom: 0;\r\n            padding-left: 0;\r\n        }\r\n    }\r\n\r\n    &.none {\r\n        scrollbar-width: none !important;\r\n\r\n        &::-webkit-scrollbar {\r\n            display: none !important;\r\n        }\r\n    }\r\n\r\n    &::-webkit-scrollbar {\r\n        display: none;\r\n    }\r\n\r\n    &.show-scroll::-webkit-scrollbar,\r\n    &:hover::-webkit-scrollbar {\r\n        scrollbar-width: thin;\r\n        display: initial;\r\n        width: 0.45rem;\r\n        height: 0.45rem;\r\n    }\r\n\r\n    &.show-scroll::-webkit-scrollbar-thumb,\r\n    &:hover::-webkit-scrollbar-thumb {\r\n        background: #222; /* 스크롤 위치 */\r\n        border-radius: 6px;\r\n        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); /* 입체감 있는 그림자 */\r\n        transition:\r\n            background 0.3s ease,\r\n            box-shadow 0.3s ease;\r\n    }\r\n\r\n    &.show-scroll::-webkit-scrollbar-thumb:hover,\r\n    &.show-scroll::-webkit-scrollbar-thumb:active,\r\n    &:hover::-webkit-scrollbar-thumb:hover {\r\n        background: linear-gradient(145deg, #ffecec, #f1f1f1);\r\n        /* 호버 시 밝아지는 효과 */\r\n    }\r\n\r\n    &.show-scroll::-webkit-scrollbar-track,\r\n    &:hover::-webkit-scrollbar-track {\r\n        background: linear-gradient(145deg, #989898, #7c7c7c);\r\n        border-radius: 6px;\r\n        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); /* 트랙 내부에 부드러운 그림자 */\r\n    }\r\n}\r\n"],"mappings":";AAAA,CAAC;AACG,WAAS;AACT,UAAQ;AACR,SAAO;AACP,YAAU;AACV,iBAAe;AACf,YAAU;AAMV,GAAC,CAAC;AACE,oBAAgB;AAChB,MAAE,EAAE,CAAC;AACD,cAAQ;AACR,aAAO;AACP,cAAQ;AACR,OAAC,OAAO,EAAE,CAAC;AAAA,MACX,CAAC,OAAO,EAAE,CADC,KACK,CAAC;AAAA,MACjB,CAAC,QAAQ,EAAE,CAFA;AAGP,gBAAQ;AACR,eAAO;AACX;AACJ;AACA,MAAE,EAAE,CAAC,eAAe,EAAE,CAAC;AACnB,aAAO;AACP,cAAQ;AACR,QAAE,EAAE;AACA,eAAO;AACP,gBAAQ;AACZ;AACJ;AACJ;AAEA,GAAC,CAAC;AACE,oBAAgB;AAChB,MAAE,EAAE,CAvBC;AAwBD,aAAO;AACP,cAAQ;AACR,cAAQ;AACR,OAAC,OAAO,EAAE,CAvBC;AAAA,MAwBX,CAAC,OAAO,EAAE,CAxBC,KAwBK,CAAC;AAAA,MACjB,CAAC,QAAQ,EAAE,CAzBA;AA0BP,eAAO;AACP,gBAAQ;AACZ;AACJ;AACA,MAAE,EAAE,CAvBC,eAuBe,EAAE,CAvBC;AAwBnB,aAAO;AACP,cAAQ;AACR,QAAE,EAAE;AACA,eAAO;AACP,gBAAQ;AACZ;AACJ;AACJ;AACA,IAAE,EAAE,CAhCK;AAiCL,cAAU;AACV,gBAAY;AACZ,KAAC,CAAC;AACE,YAAM,EAAE,EAAE;AACd;AACA,KAAC,CAAC;AACE,YAAM,EAAE,EAAE;AACd;AACA,MAAE,EAAE,CAAC,KAAK,CAzCa;AA0CnB,aAAO;AACP,cAAQ;AACZ;AACJ;AACA,IAAE,CAzDO;AA0DL,sBAAkB,IAAI,IAAI,IAAI;AAC9B,aAAS;AACT,aAAS;AACT,qBAAiB;AACjB,iBAAa;AACb,UAAM,EAAE,EAAE;AACV,cAAU;AACV,sBAAkB;AAClB,wBAAoB;AACpB,yBAAqB;AACrB,qBAAiB;AACjB,iBAAa;AACb,WAAO;AACP,YAAQ;AAER,KAAC;AAAA,IACD,CAAC;AACG,sBAAgB;AAChB,2BAAqB;AACrB,2BAAqB;AACrB,0BAAoB;AACpB,iCAA2B;AAC3B,iCAA2B,aAAa,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE;AAC5D;AAEA,KAAC,OAAO,EAAE,CA/EK;AAAA,IAgFf,CAAC,OAAO,EAAE,CAhFK,KAgFC,CAAC;AAAA,IACjB,CAAC,QAAQ,EAAE,CAjFI;AAkFX,wBAAkB;AAClB,eAAS;AACT,gBAAU;AACV,eAAS;AACT,eAAS;AACT,kBAAY;AACZ,kBAAY,IAAI;AAChB,sBAAgB;AAChB,2BAAqB;AACrB,2BAAqB;AACrB,0BAAoB;AACpB,iCAA2B;AAC3B,iCAA2B,aAAa,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE;AAC5D;AAEA,MAAE,EAAE,CAjGW;AAkGX,eAAS;AACT,kBAAY;AACZ,kBAAY,IAAI;AACpB;AACA,KAAC,CAAC;AACE,OAAC;AACG,mCAA2B;AAC3B,oCAA4B;AAC5B,gBAAQ;AACZ;AACJ;AACA,KAAC,CAAC;AACE,OAAC;AACG,gCAAwB;AACxB,iCAAyB;AACzB,gBAAQ;AACZ;AACJ;AACA,KAAC,CAAC;AACE,iCAA2B;AAC3B,kCAA4B;AAChC;AACA,KAAC,CAAC;AACE,OAAC;AACG,iCAAyB;AACzB,oCAA4B;AAC5B,cAAM;AACV;AACJ;AACA,KAAC,CAAC;AACE,OAAC;AACG,eAAO;AACX;AACJ;AACA,KAAC,CA9BC;AAAA,IA+BF,CAAC,CAxBC;AAAA,IAyBF,CAAC,CAlBC;AAAA,IAmBF,CAAC,CARC;AAAA,IASF,CAAC,CAhBC;AAiBE,OAAC;AACG,0BAAkB,KAAK,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE;AACnC,iBAAS;AACT,kBAAU;AACV,iBAAS;AACb;AACA,OAAC;AAAA,MACD,CAAC,MAAM;AAAA,MACP,CAAC;AAAA,MACD,CAAC,OAAO;AACJ,0BAAkB,IAAI,EAAE,IAAI,IAAI,EAAE;AAClC,oBAAY,iBAAiB;AACjC;AACJ;AACA,KAAC,CAjDC;AAAA,IAkDF,CAAC,CApCC;AAAA,IAqCF,CAAC,CA5CC;AA6CE,OAAC;AACG,gBAAQ;AACR,eAAO;AACX;AACA,OAAC,KAAK,CAjDR,wBAiDiC;AAC3B,aAAK;AACT;AACJ;AACA,KAAC,CAnCC;AAAA,IAoCF,CAAC,CA3CC;AA4CE,OAAC;AACG,eAAO;AACP,gBAAQ;AACZ;AACJ;AACJ;AACJ;AAEA,WArG4B;AAsGxB;AACI,sBAAkB;AACtB;AAEA;AACI,sBAAkB;AACtB;AAEA;AACI,sBAAkB;AACtB;AAEA;AACI,sBAAkB;AACtB;AAEA;AACI,sBAAkB;AACtB;AAEA;AACI,sBAAkB;AACtB;AAEA;AACI,sBAAkB;AAClB,0BAAsB;AAC1B;AACJ;AAEA,WAlH4B;AAmHxB;AACI,aAAS;AACb;AAEA;AACI,aAAS;AACb;AAEA;AACI,aAAS;AACb;AAEA;AACI,aAAS;AACb;AAEA;AACI,aAAS;AACb;AAEA;AACI,aAAS;AACb;AAEA;AACI,aAAS;AACT,0BAAsB;AAC1B;AACJ;AAEA,CAAC;AACG,SAAO;AACP,UAAQ;AACR,YAAU;AACV,IAAE,CAAC;AACC,cAAU;AACV,iBAAa,KAAK,EAAE;AACpB,gBACI,iBAAiB,IAAI,EACrB,aAAa;AACjB,WAAO;AACP,YAAQ,IAAI,OAAO;AACnB,mBAAe;AACf,sBAAkB;AAClB,eAAW;AACX,aAAS;AACT,iBAAa;AACb,qBAAiB;AACjB,iBAAa;AACb,aAAS;AACb;AACA,IAAE,CAAC;AACC,cAAU;AACV,SAAK;AACL,aAAS;AACT,gBAAY;AAChB;AACA,IAAE,CAAC;AACC,QAAI,CAAC,wBAA0B;AAC3B,kBAAY;AACZ,kBAAY,IAAI,IAAI,KAAK,IAAI;AACjC;AACA,QAAI,CAAC,yBAA2B;AAC5B,kBAAY;AACZ,kBAAY,IAAI,IAAI,KAAK,IAAI;AACjC;AACA,qBAAiB;AACjB,qBAAiB;AACjB,aAAS;AACT,qBAAiB;AACjB;AAAA,MACI,WAAW,IAAI;AAAA,MACf,MAAM,IAAI;AAAA,MACV,WAAW;AACf,cAAU;AACV,mBAAe,IAAI,MAAM;AACzB,MAAE,CAAC;AACC,eAAS;AACT,aAAO;AACP,kBAAY;AAChB;AACJ;AACJ;AACA,CAAC;AACG,WAAS;AACT,eAAa;AACb,iBAAe;AACf,gBAAc;AACd,GAAC,WAAW,KAAK;AACb,kBAAc,IAAI,MAAM;AAC5B;AACA,GAAC,KAAK,CAAC;AACH,gBAAY,MAAM,EAAE,EAAE,KAAK,KAAK;AAChC,mBAAe,IAAI,MAAM;AAC7B;AACA,GAAC;AACG,QAAI,CAAC,wBAA0B;AAC3B,kBAAY;AAChB;AACA,QAAI,CAAC,yBAA2B;AAC5B,kBAAY;AAChB;AACA,gBAAY,EAAE,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACxC;AACA,GAAC;AACG,gBAAY,MAAM,IAAI,IAAI,KAAK,IAAI;AACnC,eAAW,MAAM;AACrB;AACA,IAAE;AACE,gBAAY;AACZ,YAAQ;AACR,WAAO;AACP,iBAAa;AACb,iBAAa;AACb,eAAW;AACX,YAAQ;AACR,aAAS,EAAE;AACf;AACA,GAAC,CA3BM;AA4BH,QAAI,CAAC,wBAA0B;AAC3B,aAAO;AACX;AACA,QAAI,CAAC,yBAA2B;AAC5B,aAAO;AACX;AACA,iBAAa;AACb,gBAAY,EAAE,KAAK,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACrC,MAAE;AACE,aAAO;AACX;AACJ;AACJ;AACA,CAAC;AACG,WAAS;AACT,kBAAgB;AAChB,eAAa;AACb,WAAS,KAAK,QAAQ;AACtB,aAAW;AACX,eAAa;AACb,UAAQ;AACR,cAAY;AACZ,SAAO;AACP,mBAAiB;AACjB,UAAQ;AACR,cAAY;AACZ,GAAC;AACG,gBAAY;AACZ,gBAAY,EAAE,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACxC;AACA,GAAC;AACG,gBAAY,MAAM,IAAI,IAAI,KAAK,IAAI;AACnC,eAAW,MAAM;AACrB;AACJ;AACA,CAAC;AACG,cAAY;AACZ,yBAAuB;AACvB,uBAAqB;AACrB,sBAAoB;AACpB,oBAAkB;AAClB,mBAAiB;AACjB,eAAa;AAEb,+BAA6B;AAE7B,yBAAuB;AAC3B;AACA,CAAC;AACG,yBAAuB;AACvB,uBAAqB;AACrB,sBAAoB;AACpB,oBAAkB;AAClB,mBAAiB;AACjB,eAAa;AAEb,+BAA6B;AAE7B,yBAAuB;AAEvB,WAAS;AACT,oBAAkB;AAClB,kBAAgB;AAChB,WAAS,OAAO;AAChB,iBAAe;AACf,eAAa;AACb,WAAS;AACT,IAAE,IAAI;AACF,iBAAa;AACb,eAAW;AACf;AACA,IAAE,IAAI;AACF,eAAW;AACf;AACJ;;;AC/ZA,CAAC;AACG,YAAU;AACd;AACA,CAAC;AACG,YAAU;AACV,aAAW;AACX,aAAW;AACX,eAAa;AACb,oBAAkB,EAAE;AACpB,mBAAiB;AACjB,oBAAkB,OAAO;AACzB,GAAC,CAAC;AACE,gBAAY;AACZ,gBAAY;AACZ,kBAAc;AACd,mBAAe;AACf,KAAC,KAAK;AACF,qBAAe;AACf,mBAAa;AACjB;AACA,KAAC;AACG,qBAAe;AACf,oBAAc;AAClB;AACJ;AAEA,GAAC,CAAC;AACE,gBAAY;AACZ,gBAAY;AACZ,iBAAa;AACb,oBAAgB;AAChB,KAAC,KAAK;AACF,sBAAgB;AAChB,oBAAc;AAClB;AACA,KAAC;AACG,sBAAgB;AAChB,oBAAc;AAClB;AACJ;AAEA,GAAC,CAAC;AACE,qBAAiB;AAEjB,KAAC;AACG,eAAS;AACb;AACJ;AAEA,GAAC;AACG,aAAS;AACb;AAEA,GAAC,CAAC,WAAW;AAAA,EACb,CAAC,MAAM;AACH,qBAAiB;AACjB,aAAS;AACT,WAAO;AACP,YAAQ;AACZ;AAEA,GAAC,CARC,WAQW;AAAA,EACb,CAAC,MAAM;AACH,gBAAY;AACZ,mBAAe;AACf,gBAAY,MAAM,EAAE,EAAE,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACxC,gBACI,WAAW,KAAK,IAAI,EACpB,WAAW,KAAK;AACxB;AAEA,GAAC,CAlBC,WAkBW,yBAAyB;AAAA,EACtC,CAAC,CAnBC,WAmBW,yBAAyB;AAAA,EACtC,CAAC,MAAM,yBAAyB;AAC5B;AAAA,MAAY;AAAA,QAAgB,MAAhB;AAAA,QAAwB,OAAxB;AAAA,QAAiC;AAEjD;AAEA,GAAC,CAzBC,WAyBW;AAAA,EACb,CAAC,MAAM;AACH;AAAA,MAAY;AAAA,QAAgB,MAAhB;AAAA,QAAwB,OAAxB;AAAA,QAAiC;AAC7C,mBAAe;AACf,gBAAY,MAAM,EAAE,EAAE,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAC5C;AACJ;","names":[]}

package/dist/components.d.cts

@@ -0,0 +1,122 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+import React__default, { ReactElement, ReactNode, HTMLAttributes } from 'react';
+import { D as DropDocumentOutsideOption } from './FlexLayoutSplitScreenDragBox-eCtq4kLd.cjs';
+export { F as FlexLayoutSplitScreenDragBox } from './FlexLayoutSplitScreenDragBox-eCtq4kLd.cjs';
+
+type ResizePanelMode =
+    | 'default'
+    | 'bottom-cylinder'
+    | 'bottom-cylinder-reverse'
+    | 'top-cylinder'
+    | 'left-cylinder'
+    | 'right-cylinder';
+
+type Direction = 'row' | 'column';
+type PanelMovementMode = 'bulldozer' | 'divorce' | 'stalker';
+type FitContent = 'width' | 'height';
+
+interface FlexLayoutChildrenType {
+    isInitialResizable?: boolean;
+    grow?: number;
+    prevGrow?: number;
+    panelMode?: ResizePanelMode;
+    isFitContent?: boolean;
+    isFitResize?: boolean;
+    isResizePanel?: boolean;
+    containerName: string;
+    children: ReactNode;
+    className?: string;
+}
+
+interface FlexContainerProps extends FlexLayoutChildrenType {
+    readonly fitContent?: FitContent;
+    readonly containerCount?: number;
+    readonly layoutName?: string;
+}
+
+interface FlexLayoutProps
+    extends Omit<
+        React.HTMLAttributes<HTMLDivElement>,
+        'children',
+        'id',
+        'panelClassName'
+    > {
+    direction: Direction;
+    children:
+        | ReactElement<FlexLayoutChildrenType>[]
+        | ReactElement<FlexLayoutChildrenType>;
+    layoutName: string;
+    isSplitScreen?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
+    className?: string;
+    panelClassName?: string;
+    panelMovementMode?: PanelMovementMode;
+}
+
+type FlexLayoutResizePanelProps = {
+    direction: string;
+    containerCount: number;
+    panelMode?: ResizePanelMode;
+    containerName: string;
+    layoutName: string;
+    panelMovementMode: PanelMovementMode;
+    panelClassName?: string;
+};
+
+declare const FlexLayout: ({ layoutName, direction, children, ref, className, panelClassName, panelMovementMode, ...props }: FlexLayoutProps) => react_jsx_runtime.JSX.Element | null;
+
+declare const FlexLayoutContainer: ({ isFitContent, isFitResize, containerName, grow: initialGrow, prevGrow: initialPrevGrow, isInitialResizable, isResizePanel, children, className, panelMode, }: FlexContainerProps) => react_jsx_runtime.JSX.Element;
+
+declare const FlexLayoutResizePanel: ({ direction, containerCount, panelMode, containerName, layoutName, panelClassName, panelMovementMode, }: FlexLayoutResizePanelProps) => react_jsx_runtime.JSX.Element;
+
+type FlexLayoutSplitScreenProps = {
+    layoutName: string;
+    containerName: string;
+    children: ReactElement;
+    navigationTitle: string;
+    dropDocumentOutsideOption?: DropDocumentOutsideOption;
+    screenKey?: string;
+};
+declare function FlexLayoutSplitScreen({ children, containerName, layoutName, navigationTitle, dropDocumentOutsideOption, screenKey, }: FlexLayoutSplitScreenProps): react_jsx_runtime.JSX.Element;
+declare namespace FlexLayoutSplitScreen {
+    var displayName: string;
+}
+
+interface FlexLayoutSplitScreenScrollBoxProps extends HTMLAttributes<HTMLDivElement> {
+    keyName: string;
+    className?: string;
+    direction?: "x" | "y";
+    isDefaultScrollStyle?: boolean;
+}
+declare const _default: React$1.MemoExoticComponent<({ className, children, keyName, direction, isDefaultScrollStyle, ...props }: FlexLayoutSplitScreenScrollBoxProps) => react_jsx_runtime.JSX.Element>;
+
+type Edge = 'auto' | 'top' | 'bottom' | 'left' | 'right';
+interface FlexLayoutStickyBoxProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    /** 어느 방향으로 붙일지. 기본은 'auto' (세로 스크롤이면 top, 가로 스크롤이면 left) */
+    edge?: Edge;
+    /** 화면 모서리와의 여백(px). 기본 16 */
+    offset?: number;
+    /** 스크롤 루트. 명시 안 하면 가장 흔한 케이스인 <main> → 없으면 window(=viewport) */
+    scrollRoot?: Element | null;
+    /** 디버그 보조선 표시 */
+    debug?: boolean;
+    /** 자식 */
+    children: React__default.ReactNode;
+    onTranslateChange?: (value: number, rootRef: React__default.RefObject<HTMLDivElement | null>, contentRef: React__default.RefObject<HTMLDivElement | null>) => void;
+}
+/**
+ * FlexLayoutStickyBox
+ * 부모(실제 경계) 안에서만 움직이며, `transform`을 동적으로 부여해
+ * “sticky처럼 보이도록” 만든다.
+ *
+ * 구조:
+ * <div data-root>      // 이 박스가 부모 경계 안에서 공간을 차지
+ * <div data-content> // 이 박스가 transform으로 부드럽게 움직임
+ * {children}
+ * </div>
+ * </div>
+ */
+declare const FlexLayoutStickyBox: React__default.FC<FlexLayoutStickyBoxProps>;
+
+export { FlexLayout, FlexLayoutContainer, FlexLayoutResizePanel, FlexLayoutSplitScreen, _default as FlexLayoutSplitScreenScrollBox, FlexLayoutStickyBox };