opus-react 0.6.4 → 0.6.6

package/dist/index.css

@@ -966,12 +966,26 @@
   width: 78px;
 }
 
+.opus_EdjT2u_hint {
+  color: var(--opus-muted);
+  letter-spacing: .02em;
+  text-align: center;
+  text-transform: uppercase;
+  margin: 0;
+  font-size: .72rem;
+  font-weight: 600;
+}
+
 .opus_EdjT2u_weekdays, .opus_EdjT2u_grid {
   grid-template-columns: repeat(7, minmax(0, 1fr));
   gap: 2px;
   display: grid;
 }
 
+.opus_EdjT2u_rangeGrid {
+  gap: 4px 0;
+}
+
 .opus_EdjT2u_weekday {
   height: 24px;
   color: var(--opus-muted);
@@ -997,7 +1011,15 @@
   display: grid;
 }
 
-.opus_EdjT2u_day:hover:not(:disabled) {
+.opus_EdjT2u_dayLabel {
+  border-radius: inherit;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+  display: grid;
+}
+
+.opus_EdjT2u_day:hover:not(:disabled):not(.opus_EdjT2u_selected):not(.opus_EdjT2u_inRange):not(.opus_EdjT2u_rangePreview) {
   background: color-mix(in srgb, var(--opus-accent) 10%, transparent);
 }
 
@@ -1017,17 +1039,38 @@
   font-weight: 500;
 }
 
-.opus_EdjT2u_today {
+.opus_EdjT2u_today:not(.opus_EdjT2u_selected):not(.opus_EdjT2u_inRange):not(.opus_EdjT2u_rangePreview) {
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--opus-accent) 45%, transparent);
 }
 
-.opus_EdjT2u_selected, .opus_EdjT2u_selected:hover:not(:disabled) {
+.opus_EdjT2u_selected, .opus_EdjT2u_selected:hover:not(:disabled), .opus_EdjT2u_inRange, .opus_EdjT2u_inRange:hover:not(:disabled), .opus_EdjT2u_rangePreview, .opus_EdjT2u_rangePreview:hover:not(:disabled) {
   background: color-mix(in srgb, var(--opus-accent) 82%, #111);
   color: #fff;
   box-shadow: none;
   border-color: #0000;
 }
 
+.opus_EdjT2u_inRange, .opus_EdjT2u_inRange:hover:not(:disabled), .opus_EdjT2u_rangePreview, .opus_EdjT2u_rangePreview:hover:not(:disabled) {
+  border-radius: 0;
+}
+
+.opus_EdjT2u_rangeEndpoint {
+  z-index: 1;
+  position: relative;
+}
+
+.opus_EdjT2u_rangeStart {
+  border-radius: 8px 0 0 8px;
+}
+
+.opus_EdjT2u_rangeEnd {
+  border-radius: 0 8px 8px 0;
+}
+
+.opus_EdjT2u_rangeStart.opus_EdjT2u_rangeEnd {
+  border-radius: 8px;
+}
+
 .opus_EdjT2u_footer {
   border-top: 1px solid color-mix(in srgb, var(--opus-border) 70%, transparent);
   justify-content: space-between;
@@ -18236,6 +18279,10 @@ button.opus_7Zs_d5_docCard:hover, .opus_7Zs_d5_docCard[data-kind="folder"]:hover
   --dashboard-section-panel: #11192c;
   --kanban-card-min-height: 72px;
   --kanban-card-gap: 8px;
+  --kanban-cards-viewport: calc(8 * var(--kanban-card-min-height) + 7 * var(--kanban-card-gap));
+  --kanban-header-accent: var(--opus-accent-secondary, #0284c7);
+  --kanban-header-bg: color-mix(in srgb, var(--kanban-header-accent) 18%, var(--dashboard-section-bg));
+  --kanban-header-border: color-mix(in srgb, var(--kanban-header-accent) 28%, transparent);
   border: 1px solid var(--dashboard-section-border);
   background: radial-gradient(85% 65% at 14% 0%, color-mix(in srgb, var(--opus-accent) 16%, transparent), transparent 58%),
     radial-gradient(72% 58% at 100% 100%, color-mix(in srgb, var(--opus-accent-secondary, #0284c7) 12%, transparent), transparent 62%),
@@ -18244,10 +18291,10 @@ button.opus_7Zs_d5_docCard:hover, .opus_7Zs_d5_docCard[data-kind="folder"]:hover
   color: var(--dashboard-section-text);
   box-sizing: border-box;
   border-radius: 14px;
-  align-content: start;
-  gap: 10px;
-  padding: 10px;
-  display: grid;
+  flex-direction: column;
+  gap: 0;
+  padding: 0;
+  display: flex;
   overflow: hidden;
   box-shadow: inset 0 1px #ffffff0f, 0 12px 28px #020617ad;
 }
@@ -18258,6 +18305,8 @@ button.opus_7Zs_d5_docCard:hover, .opus_7Zs_d5_docCard[data-kind="folder"]:hover
   --dashboard-section-text: #0f172a;
   --dashboard-section-muted: #0f172a94;
   --dashboard-section-panel: #fff;
+  --kanban-header-bg: color-mix(in srgb, var(--kanban-header-accent) 12%, #fff);
+  --kanban-header-border: color-mix(in srgb, var(--kanban-header-accent) 22%, transparent);
   box-shadow: inset 0 1px 0 #ffffffe6,
     0 8px 20px color-mix(in srgb, var(--opus-accent-secondary, #0284c7) 10%, transparent);
 }
@@ -18272,10 +18321,16 @@ button.opus_7Zs_d5_docCard:hover, .opus_7Zs_d5_docCard[data-kind="folder"]:hover
 }
 
 .opus_EUh8ei_columnHeader {
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--kanban-header-border);
+  background: var(--kanban-header-bg);
+  flex: none;
   justify-content: space-between;
   align-items: center;
   gap: 8px;
-  min-height: 0;
+  width: 100%;
+  min-height: 40px;
+  padding: 10px 12px;
   display: flex;
 }
 
@@ -18289,9 +18344,9 @@ button.opus_7Zs_d5_docCard:hover, .opus_7Zs_d5_docCard[data-kind="folder"]:hover
 }
 
 .opus_EUh8ei_count {
-  background: color-mix(in srgb, var(--dashboard-section-muted) 18%, transparent);
+  background: color-mix(in srgb, var(--kanban-header-accent) 18%, transparent);
   min-width: 1.5rem;
-  color: var(--dashboard-section-muted);
+  color: var(--dashboard-section-text);
   text-align: center;
   border-radius: 999px;
   padding: 2px 7px;
@@ -18300,11 +18355,35 @@ button.opus_7Zs_d5_docCard:hover, .opus_7Zs_d5_docCard[data-kind="folder"]:hover
   line-height: 1.3;
 }
 
+.opus_EUh8ei_cardsScroll {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  height: var(--kanban-cards-viewport);
+  flex: none;
+  overflow: hidden;
+}
+
+.opus_EUh8ei_cardsViewport {
+  box-sizing: border-box;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+  height: 100%;
+  padding: 10px;
+  overflow: hidden auto;
+}
+
+.opus_EUh8ei_cardsViewport::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  display: none;
+}
+
 .opus_EUh8ei_cards {
   align-content: start;
   gap: var(--kanban-card-gap, 8px);
-  min-height: calc(8 * var(--kanban-card-min-height, 72px) + 7 * var(--kanban-card-gap, 8px));
   flex-direction: column;
+  min-height: min-content;
   margin: 0;
   padding: 0;
   list-style: none;
@@ -18375,13 +18454,17 @@ button.opus_7Zs_d5_docCard:hover, .opus_7Zs_d5_docCard[data-kind="folder"]:hover
 .opus_EUh8ei_card {
   --card-accent: var(--opus-accent-secondary, #38bdf8);
   width: 100%;
+  height: var(--kanban-card-min-height, 72px);
   min-height: var(--kanban-card-min-height, 72px);
+  max-height: var(--kanban-card-min-height, 72px);
   background: color-mix(in srgb, var(--dashboard-section-panel) 88%, #fff 4%);
   color: var(--dashboard-section-text);
   cursor: grab;
   box-sizing: border-box;
   border: 0;
   border-radius: 10px;
+  grid-template-rows: auto auto;
+  align-content: center;
   gap: 8px;
   padding: 14px 12px 14px 16px;
   display: grid;
@@ -18440,21 +18523,35 @@ button.opus_EUh8ei_card {
 }
 
 .opus_EUh8ei_cardTitle {
+  min-width: 0;
   color: var(--dashboard-section-text);
+  white-space: nowrap;
+  text-overflow: ellipsis;
   font-size: .84rem;
   font-weight: 700;
   line-height: 1.3;
+  overflow: hidden;
 }
 
 .opus_EUh8ei_cardMeta {
   min-width: 0;
+  max-width: 100%;
   color: var(--card-accent);
+  white-space: nowrap;
   align-items: center;
   gap: 6px;
   font-size: .72rem;
   font-weight: 650;
   line-height: 1.3;
   display: inline-flex;
+  overflow: hidden;
+}
+
+.opus_EUh8ei_cardMeta span {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .opus_EUh8ei_cardMetaIcon {
@@ -20590,17 +20687,22 @@ button.opus_9Mof8o_block:focus-visible {
 
 /* components/MasonryGrid/MasonryGrid.module.css */
 .opus_Fxxd7-_grid {
+  column-fill: balance;
   width: 100%;
 }
 
 .opus_Fxxd7-_card {
   break-inside: avoid;
   page-break-inside: avoid;
-  background: linear-gradient(180deg, color-mix(in srgb, var(--opus-accent) 8%, transparent), transparent 48%),
-    color-mix(in srgb, var(--opus-panel) 94%, transparent);
+  border: 1px solid color-mix(in srgb, var(--opus-border) 88%, transparent);
+  background: linear-gradient(180deg, color-mix(in srgb, var(--opus-accent) 10%, transparent), transparent 52%),
+    color-mix(in srgb, var(--opus-panel) 96%, transparent);
+  border-radius: 14px;
+  align-content: start;
   gap: 8px;
   padding: 16px;
   display: grid;
+  box-shadow: 0 10px 24px #00000014;
 }
 
 button.opus_Fxxd7-_card {
@@ -20613,8 +20715,9 @@ button.opus_Fxxd7-_card {
 }
 
 button.opus_Fxxd7-_card:hover {
-  background: linear-gradient(180deg, color-mix(in srgb, var(--opus-accent) 15%, transparent), transparent 58%),
-    color-mix(in srgb, var(--opus-panel) 94%, transparent);
+  border-color: color-mix(in srgb, var(--opus-accent) 42%, var(--opus-border));
+  background: linear-gradient(180deg, color-mix(in srgb, var(--opus-accent) 16%, transparent), transparent 58%),
+    color-mix(in srgb, var(--opus-panel) 96%, transparent);
 }
 
 button.opus_Fxxd7-_card:focus-visible {