@flux-ui/components 3.0.0-next.58 → 3.0.0-next.59

package/dist/index.css

@@ -66,8 +66,8 @@
     --surface-loader: rgb(from var(--gray-25) r g b / .75);
     --surface-stroke: var(--gray-200);
     --surface-stroke-hover: var(--gray-300);
-    --surface-stroke-out: rgb(from var(--gray-900) r g b / .1);
-    --surface-stroke-out-hover: rgb(from var(--gray-950) r g b / .1);
+    --surface-stroke-out: rgb(from var(--gray-400) r g b / .2);
+    --surface-stroke-out-hover: rgb(from var(--gray-500) r g b / .2);
     --surface-hover: var(--gray-50);
     --surface-active: var(--gray-100);
     --surface-disabled: var(--gray-100);
@@ -441,20 +441,20 @@
   border-bottom: 1px solid var(--gray-100);
   box-shadow: var(--shadow-xs);
 }
-.slide-over > .base-pane-structure > .pane-header:has(+ :where(.tabs, .tab-bar)) {
+.slide-over > .base-pane-structure > .pane-header:has(+ :where(.tabs, .tab-bar-default)) {
   padding-bottom: 0;
   border-bottom: 0;
   box-shadow: none;
 }
-.slide-over > .base-pane-structure > .pane-header:not(:has(+ :where(.tabs, .tab-bar))) {
+.slide-over > .base-pane-structure > .pane-header:not(:has(+ :where(.tabs, .tab-bar-default))) {
   background: inherit;
 }
-.slide-over > .base-pane-structure > .pane-header + .tab-bar {
+.slide-over > .base-pane-structure > .pane-header + .tab-bar-default {
   position: sticky;
   top: 45px;
   z-index: 100;
 }
-.slide-over > .base-pane-structure > .pane-header:has(.pane-header-caption > :is(span)) + .tab-bar {
+.slide-over > .base-pane-structure > .pane-header:has(.pane-header-caption > :is(span)) + .tab-bar-default {
   top: 66px;
 }
 .slide-over > .base-pane-structure > .pane-footer {
@@ -1117,9 +1117,10 @@
 :is(.pane-default, .pane-flat, .pane-well):is(a, button) {
   cursor: pointer;
   transition: 210ms var(--swift-out);
-  transition-property: background, box-shadow;
+  transition-property: background, border-color, box-shadow;
 }
 :is(.pane-default, .pane-flat, .pane-well):is(a, button):hover {
+  border-color: var(--surface-stroke-out-hover);
   box-shadow: var(--shadow-lg);
 }
 :is(.pane-default, .pane-flat, .pane-well):is(a, button):active {
@@ -1434,28 +1435,26 @@
   flex-flow: column;
 }.adaptive-group {
   display: flex;
-  overflow: hidden;
+  min-width: 0;
   flex-flow: row nowrap;
   gap: var(--gap, 9px);
-  min-width: 0;
 }
 
 .adaptive-slot {
   display: flex;
-  overflow: hidden;
-  flex-flow: row nowrap;
   min-width: 0;
+  flex-flow: row nowrap;
 }
 
 .adaptive-slot-measurer {
   position: absolute;
+  display: flex;
   top: 0;
   left: 0;
-  display: flex;
-  visibility: hidden;
-  flex-flow: row nowrap;
   width: max-content;
+  flex-flow: row nowrap;
   pointer-events: none;
+  visibility: hidden;
 }@property --shine-degrees {
   syntax: "<angle>";
   initial-value: 0deg;
@@ -1969,417 +1968,525 @@
 }
 
 .tag-warning {
-}.filter {
-  max-height: 50dvh;
-  max-width: 100%;
-  padding: 9px;
-  width: 270px;
-  overflow: auto;
-  scrollbar-width: none;
-  transition: height 150ms var(--deceleration-curve);
-  z-index: 0;
+}.calendar {
+  display: flex;
+  flex-flow: column;
+  flex-grow: 1;
+  box-shadow: var(--shadow-sm);
+  contain: paint;
 }
-.filter::-webkit-scrollbar {
+
+.calendar-item-registry {
   display: none;
-  height: 0;
-  width: 0;
 }
-.filter .menu > :where(.divider, .separator) {
-  margin: 3px -9px;
+
+.calendar-actions {
+  align-items: center;
 }
-.filter .menu > .menu-group > .menu-sub-header {
-  top: 51px;
+
+.calendar-loader {
 }
-.filter .menu > .menu-group:has(.filter-search) > .menu-sub-header {
-  top: 105px;
+
+.calendar-current {
+  display: flex;
+  gap: 9px;
 }
-.filter .menu .menu-item-label {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+
+.calendar-current-value {
+  padding: 0;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  font-size: 30px;
+  letter-spacing: -0.05em;
+  line-height: 1.5em;
+  text-transform: capitalize;
 }
-.filter .pane-body {
-  margin: -9px;
+@media (hover: hover) {
+  .calendar-current-value:hover {
+    color: var(--primary-600);
+  }
 }
 
-.filter-badge {
-  padding-left: 6px;
-  padding-right: 6px;
-  background: var(--primary-50);
-  border: 1px dashed var(--primary-300);
-  font-weight: 500;
+.calendar-current-month {
+  color: var(--foreground-prominent);
+  font-weight: 700;
 }
-.filter-badge .badge-label {
-  color: var(--primary-900);
+
+.calendar-current-year {
+  color: var(--foreground);
 }
 
-.filter-button {
-  border: 1px solid var(--surface-stroke);
-  box-shadow: none;
+.calendar-range-label {
+  color: var(--foreground-prominent);
+  font-weight: 700;
 }
-.filter-button .badge {
-  border-radius: var(--radius-half);
+
+.calendar-item {
+  display: block;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  cursor: default;
+  text-align: left;
+  outline: 2px solid rgb(from var(--primary-600) r g b/0);
+  outline-offset: 0;
 }
-.filter-button .button-icon {
-  color: var(--primary-700);
-  font-size: 16px;
+.calendar-item:focus-visible {
+  outline-color: var(--primary-600);
+  outline-offset: 0;
 }
-
-.filter-header {
-  position: sticky;
-  margin: -9px -9px 3px;
-  padding: 9px;
-  top: -9px;
-  background: var(--surface);
-  border-bottom: 1px solid var(--surface-stroke);
-  z-index: 2;
+.calendar-item.is-clickable {
+  cursor: pointer;
 }
-.filter-header:first-child {
-  border-top-left-radius: var(--radius);
-  border-top-right-radius: var(--radius);
+.calendar-item.is-draggable {
+  cursor: grab;
+}
+.calendar-item.is-draggable:active {
+  cursor: grabbing;
+}
+.calendar-item.is-grabbed {
+  outline: 2px solid var(--primary-500);
+  outline-offset: 2px;
 }
 
-.filter-back {
+/* region Month view */
+.calendar-cells {
+  display: grid;
   flex-grow: 1;
+  gap: 1px;
+  grid-template-columns: repeat(7, minmax(180px, 1fr));
+  grid-auto-rows: auto;
+  overflow-x: auto;
+  background: var(--gray-100);
 }
 
-.filter-reset {
-  width: 42px;
-  justify-content: center;
+.calendar-cell {
+  padding: 9px;
+  background: var(--gray-25);
 }
 
-.filter-date-picker {
-  margin: -9px;
+.calendar-day {
+  padding-left: 0;
+  padding-right: 0;
+  color: var(--foreground-secondary);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1em;
+  text-align: center;
+  text-transform: capitalize;
 }
 
-.filter-search {
-  position: sticky;
-  margin: -9px -9px 0;
-  padding: 9px;
-  background: linear-gradient(to bottom, var(--surface) 75%, transparent);
+.calendar-entry {
+  position: relative;
+  min-height: 90px;
+  padding-top: 33px;
+  outline: 2px dashed transparent;
+  outline-offset: 2px;
+  transition: 210ms var(--swift-out);
+  transition-property: background, outline-color, z-index;
+  z-index: 0;
+}
+.calendar-entry.is-disabled {
+  background: var(--gray-50);
+  color: var(--foreground-secondary);
+}
+.calendar-entry.is-disabled .calendar-entry-date {
+  opacity: 0.25;
+}
+.calendar-entry.is-disabled .calendar-events {
+  opacity: 0.75;
+  pointer-events: none;
+}
+.calendar-entry.is-focused, .calendar-entry.is-drop-target {
   z-index: 1;
 }
+.calendar-entry.is-focused {
+  box-shadow: inset 0 0 0 2px var(--primary-200);
+}
+.calendar-entry.is-drop-target {
+  background: var(--primary-50);
+  outline-color: var(--primary-600);
+}
+.calendar-entry.is-today .calendar-entry-date {
+  color: var(--primary-600);
+}
 
-.filter-header + .menu-group .filter-search {
-  top: 52px;
+.calendar-entry-date {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  color: var(--foreground);
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1em;
 }
 
-.filter-bar {
+.calendar-events {
+  display: grid;
+  grid-auto-rows: auto;
+  gap: 3px;
+}
+
+/* endregion */
+/* region Time-grid view */
+.time-grid {
   display: flex;
-  flex-flow: row nowrap;
+  flex-flow: column;
   flex-grow: 1;
-  gap: 15px;
+  overflow: hidden;
+  background: var(--gray-25);
 }
 
-.filter-bar-search {
-  max-width: 300px;
-}.menu {
+.time-grid-inner {
   display: flex;
   flex-flow: column;
+  flex-grow: 1;
+  overflow: hidden;
 }
 
-.menu-normal {
-  gap: 6px;
+.time-grid-header {
+  display: grid;
+  grid-template-columns: 64px 1fr;
+  background: var(--gray-25);
+  border-bottom: 1px solid var(--gray-100);
 }
 
-.menu-large {
-  gap: 9px;
+.time-grid-header-gutter {
+  background: var(--gray-25);
 }
 
-.menu-group {
-  counter-reset: menu-group;
+.time-grid-header-days {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+  gap: 1px;
+  background: var(--gray-100);
 }
 
-.menu-group-horizontal {
+.time-grid-header-day {
+  padding: 9px 12px;
+  background: var(--gray-25);
+  color: var(--foreground-secondary);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1em;
+  text-align: center;
+  text-transform: capitalize;
+}
+.time-grid-header-day.is-today {
+  color: var(--primary-600);
+}
+
+.time-grid-all-day {
+  display: grid;
+  grid-template-columns: 64px 1fr;
+  background: var(--gray-25);
+  border-bottom: 1px solid var(--gray-100);
+}
+
+.time-grid-all-day-label {
+  align-self: stretch;
+  padding: 6px 9px;
+  color: var(--foreground-secondary);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1em;
+  text-align: right;
+}
+
+.time-grid-all-day-days {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+  gap: 1px;
+  min-height: 36px;
+  background: var(--gray-100);
+}
+
+.time-grid-all-day-cell {
   display: flex;
+  flex-flow: column;
   gap: 3px;
+  padding: 6px;
+  background: var(--gray-25);
+}
+.time-grid-all-day-cell.is-drop-target {
+  box-shadow: inset 0 0 0 2px var(--primary-300);
 }
 
-.menu-group-vertical {
+.time-grid-body {
+  display: grid;
+  grid-template-columns: 64px 1fr;
+  flex-grow: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+}
+
+.time-grid-hours {
   display: flex;
   flex-flow: column;
-  gap: 1px;
+  background: var(--gray-25);
 }
 
-.menu-item {
-  height: unset;
-  min-height: 42px;
-  gap: 15px;
-  justify-content: flex-start;
-  border: 0;
-  box-shadow: none;
-  color: var(--foreground);
-  text-align: left;
-}
-@media (hover: hover) {
-  .menu-item:hover {
-    background: var(--gray-100);
-  }
-}
-.menu-item:active {
-  background: var(--gray-200);
+.time-grid-hour-label {
+  position: relative;
+  box-sizing: border-box;
+  padding-right: 9px;
+  color: var(--foreground-secondary);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1em;
+  text-align: right;
 }
-.menu-item .badge:last-child {
-  margin-right: -6px;
+
+.time-grid-hour-label-text {
+  position: absolute;
+  top: 0;
+  right: 9px;
+  transform: translateY(-50%);
+  background: var(--gray-25);
+  padding: 0 2px;
 }
 
-.menu-item-icon {
+.time-grid-days {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+  gap: 1px;
+  background: var(--gray-100);
 }
 
-.menu-item-label {
-  flex-grow: 1;
-  font-weight: 400;
-  text-align: left;
+.time-grid-day {
+  position: relative;
+  background: var(--gray-25);
+  background-image: repeating-linear-gradient(to bottom, transparent, transparent calc(var(--hour-height, 48px) - 1px), var(--gray-100) calc(var(--hour-height, 48px) - 1px), var(--gray-100) var(--hour-height, 48px));
 }
-.menu-item-label:only-child {
-  margin-left: 0;
-  margin-right: 0;
-  min-width: unset;
+.time-grid-day.is-drop-target {
+  box-shadow: inset 0 0 0 2px var(--primary-300);
 }
 
-.menu-item-active {
-  background: var(--primary-600);
-  color: var(--primary-50);
+.time-grid-day-item {
+  position: absolute;
+  box-sizing: border-box;
+  overflow: hidden;
+  padding: 2px;
 }
-.menu-item-active .menu-item-icon {
-  color: var(--primary-25);
+.time-grid-day-item.is-clipped-top {
+  border-top: 2px dashed var(--warning-300);
 }
-@media (hover: hover) {
-  .menu-item-active:hover {
-    background: var(--primary-600);
-  }
+.time-grid-day-item.is-clipped-bottom {
+  border-bottom: 2px dashed var(--warning-300);
 }
-.menu-item-active:active {
-  background: var(--primary-600);
+.time-grid-day-item.is-resizing {
+  opacity: 0.8;
 }
 
-.menu-item-destructive .menu-item-icon {
-  color: var(--danger-700);
+.time-grid-day-item-body {
+  position: relative;
+  height: 100%;
+  width: 100%;
 }
-.menu-item-destructive .menu-item-label {
-  color: var(--danger-700);
+.time-grid-day-item-body > button {
+  display: block;
+  width: 100%;
+  height: 100%;
 }
 
-.menu-item-highlighted {
-  background: var(--primary-100);
-  color: var(--primary-600);
-}
-.menu-item-highlighted .menu-item-icon {
-  color: var(--primary-700);
+.time-grid-day-item-handle {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 6px;
+  cursor: ns-resize;
+  z-index: 2;
+  background: transparent;
 }
 @media (hover: hover) {
-  .menu-item-highlighted:hover {
-    background: var(--primary-100);
+  .time-grid-day-item-handle:hover {
+    background: var(--primary-300);
   }
 }
-.menu-item-highlighted:active {
-  background: var(--primary-100);
+.time-grid-day-item-handle.is-top {
+  top: 0;
 }
-.menu-item-highlighted .badge {
-  --surface-stroke: var(--primary-200);
+.time-grid-day-item-handle.is-bottom {
+  bottom: 0;
 }
 
-.menu-item-indented {
-  margin-left: 33px;
+.time-grid-drop-indicator {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--primary-500);
+  z-index: 5;
+  pointer-events: none;
 }
 
-.menu-collapsible {
+/* endregion */.date-picker {
   display: flex;
+  max-height: 420px;
   flex-flow: column;
+  border-radius: inherit;
+  overflow: auto;
+  user-select: none;
+  z-index: 0;
 }
 
-.menu-collapsible-opened {
-}
-
-.menu-collapsible-body {
-  position: relative;
-  min-height: 0;
-  transition: height 300ms var(--swift-out), opacity 200ms var(--swift-out);
-}
-.menu-collapsible-body::before {
-  content: "";
-  position: absolute;
-  top: 3px;
-  bottom: 3px;
-  left: 21px;
-  width: 2px;
-  background: var(--surface-stroke);
-}
-.menu-collapsible-body.v-enter-from, .menu-collapsible-body.v-leave-to {
-  opacity: 0;
-}
-.menu-collapsible-body.v-enter-to, .menu-collapsible-body.v-leave-from {
-  opacity: 1;
-}
-.menu-collapsible-body.v-enter-active, .menu-collapsible-body.v-leave-active {
-  overflow: hidden;
+.date-picker-dates,
+.date-picker-months,
+.date-picker-years,
+.date-picker-header {
+  padding: 15px;
 }
 
-.menu-collapsible-content {
+.date-picker-header {
+  position: sticky;
   display: flex;
-  padding-top: 3px;
-  padding-bottom: 3px;
-  padding-left: 35px;
-  flex-flow: column;
-  gap: 3px;
+  top: 0;
+  align-items: center;
+  background: var(--gray-50);
+  border-bottom: 1px solid var(--surface-stroke);
+  z-index: 1;
 }
 
-.menu-item-selectable-icon {
+.date-picker-header-view {
+  display: flex;
+  height: 42px;
+  margin-left: auto;
+  margin-right: auto;
+  align-items: center;
+  gap: 9px;
+  font-size: 16px;
+  font-weight: 600;
 }
 
-.menu-item-selected .menu-item-selectable-icon {
-  color: var(--primary-600);
+.date-picker-header-view-button {
+  padding: 0;
+  background: unset;
+  border: 0;
+  cursor: pointer;
+  text-transform: capitalize;
 }
-
-.menu-item-command {
-  margin-top: 1px;
-  margin-left: auto;
-  padding-left: 6px;
-  color: var(--foreground-secondary);
-  font: inherit;
-  font-size: 14px;
-  white-space: nowrap;
+.date-picker-header-view-button:first-child {
+  color: var(--foreground-prominent);
 }
-
-.menu-item-command-icon {
-  margin-right: -6px;
+.date-picker-header-view-button:last-child {
   color: var(--foreground-secondary);
 }
-.menu-item-command-icon.icon {
-  font-size: 16px;
+@media (hover: hover) {
+  .date-picker-header-view-button:hover {
+    color: var(--primary-600);
+  }
 }
 
-.menu-item-command + .menu-item-command-icon {
-  margin-left: -9px;
+.date-picker-date {
+  display: flex;
+  padding: 0;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1;
+  background: unset;
+  border: 0;
+  border-radius: var(--radius);
+  color: var(--foreground-prominent);
+  cursor: pointer;
+  font-size: 14px;
+  outline: 0;
+  transition: var(--transition-default);
+  transition-property: background, border-radius, color, opacity;
 }
-
-.menu-item-active .menu-item-command,
-.menu-item-active .menu-item-command-icon {
-  color: var(--primary-300);
+@media (hover: hover) {
+  .date-picker-date:hover {
+    background: var(--gray-100);
+    color: var(--foreground-prominent);
+  }
 }
-
-.menu-item-image {
-  margin-left: -2px;
-  margin-right: -2px;
-  height: 24px;
-  width: 24px;
-  border-radius: 3px;
+.date-picker-date.is-disabled:not(.is-range-entry, .is-range-end, .is-range-start, .is-selection-entry, .is-selection-end, .is-selection-start) {
+  opacity: 0.25;
+  pointer-events: none;
 }
-
-.menu-item .avatar {
-  margin: -3px;
-  font-size: 24px;
+.date-picker-date:not(.is-disabled) {
+  font-weight: 500;
 }
-
-.menu-group-horizontal .menu-item {
-  flex-basis: 0;
-  flex-grow: 1;
+.date-picker-date.is-selected {
+  background: var(--primary-600);
+  color: var(--primary-50);
+  font-weight: 700;
 }
-.menu-group-horizontal .menu-item:has(.menu-item-icon:only-child) {
-  justify-content: center;
+.date-picker-date.is-range-entry {
+  background: var(--primary-200);
+  border-radius: 0;
+  color: var(--primary-950);
 }
-
-.menu-title {
-  padding: 0 12px;
-  color: var(--foreground-prominent);
-  font-size: 18px;
+.date-picker-date.is-range-end, .date-picker-date.is-range-start {
+  background: var(--primary-600);
+  color: var(--primary-50);
   font-weight: 700;
 }
-
-.menu-sub-header {
-  position: sticky;
-  display: flex;
-  top: 0;
-  margin-top: -9px;
-  margin-bottom: -3px;
-  padding: 12px 12px 6px;
-  align-items: center;
-  gap: 9px;
-  background: linear-gradient(to bottom, var(--surface) 75%, transparent);
-  pointer-events: none;
-  z-index: 1;
-}
-
-.menu-sub-header-icon,
-.menu-sub-header-label {
-  color: var(--foreground-secondary);
+.date-picker-date.is-range-entry:nth-child(7n+8), .date-picker-date.is-range-start {
+  border-top-left-radius: var(--radius);
+  border-bottom-left-radius: var(--radius);
 }
-
-.menu-sub-header-icon {
-  font-size: 16px;
+.date-picker-date.is-range-entry:nth-child(7n), .date-picker-date.is-range-end {
+  border-top-right-radius: var(--radius);
+  border-bottom-right-radius: var(--radius);
 }
-
-.menu-sub-header-label {
-  flex-grow: 1;
-  font-size: 14px;
+.date-picker-date.is-selection-entry {
+  background: var(--gray-100);
+  border-radius: 0;
+  color: var(--foreground-prominent);
 }
-
-.menu-item + .menu-sub-header {
-  margin-top: 9px;
+.date-picker-date.is-selection-end, .date-picker-date.is-selection-start {
+  background: var(--gray-200);
+  font-weight: 700;
 }
-
-.menu-large .menu-item {
-  position: relative;
-  padding-left: 15px;
-  padding-right: 15px;
+.date-picker-date.is-selection-entry:nth-child(7n+8), .date-picker-date.is-selection-start {
+  border-top-left-radius: var(--radius);
+  border-bottom-left-radius: var(--radius);
 }
-.menu-large .menu-item::after {
-  position: absolute;
-  display: block;
-  top: 12px;
-  right: 12px;
-  bottom: 12px;
-  width: 4px;
-  content: "";
-  background: var(--primary-600);
-  border-radius: var(--radius-full);
-  opacity: 0;
-  transition: opacity var(--transition-default);
+.date-picker-date.is-selection-entry:nth-child(7n), .date-picker-date.is-selection-end {
+  border-top-right-radius: var(--radius);
+  border-bottom-right-radius: var(--radius);
 }
 
-.menu-large .menu-item:not(.menu-item-indented) {
-  min-height: 48px;
-}
-.menu-large .menu-item:not(.menu-item-indented)::after {
-  background: var(--primary-25);
+.date-picker-dates {
+  position: relative;
 }
 
-.menu-large .menu-item-active::after {
-  opacity: 1;
-}
-.menu-large .menu-item-active.menu-item-indented {
-  background: var(--gray-100);
-}
-.menu-large .menu-item-active.menu-item-indented .menu-item-icon,
-.menu-large .menu-item-active.menu-item-indented .menu-item-label {
-  color: var(--foreground-prominent);
+.date-picker-dates-grid {
+  display: grid;
+  gap: 3px 0;
+  grid-template-columns: repeat(7, 1fr);
 }
 
-.base-pane > .menu {
-  margin-left: 9px;
-  margin-right: 9px;
-}
-.base-pane > .menu:first-child {
-  margin-top: 9px;
-}
-.base-pane > .menu:last-child {
-  margin-bottom: 9px;
-}
-.base-pane > .menu > :where(.divider, .separator) {
-  margin: 3px -9px;
+.date-picker-day {
+  margin-bottom: 6px;
+  color: var(--foreground-secondary);
+  font-size: 12px;
+  font-weight: 500;
+  text-align: center;
+  text-transform: uppercase;
 }
 
-.expandable-body > .menu {
-  margin-left: 9px;
-  margin-right: 9px;
-}
-.expandable-body > .menu:last-child {
-  margin-bottom: 9px;
+.date-picker-months,
+.date-picker-years {
+  display: grid;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 300px;
+  width: 100%;
+  gap: 9px;
+  grid-template-columns: repeat(3, 1fr);
 }
-.expandable-body > .menu > :where(.divider, .separator) {
-  margin-left: 18px;
-  margin-right: 18px;
+.date-picker-months .button,
+.date-picker-years .button {
+  contain: size layout;
+  contain-intrinsic-size: 0 42px;
+  content-visibility: auto;
+  text-transform: capitalize;
 }.form-input-group > .button-group > .button, .form-input-group > :is(.form-input, .form-select, .button) {
   height: 100%;
   min-height: unset;
@@ -3182,1062 +3289,1167 @@
 .toggle-input::after {
   transition: 210ms var(--swift-out);
   transition-property: background, border-color, color, opacity, scale, translate, outline-color, outline-offset;
-}.slider {
-  position: relative;
+}.chip {
   display: flex;
-  margin: 6px;
-  flex-flow: column;
+  height: 36px;
+  padding: 0 12px;
+  align-items: center;
+  flex-grow: 0;
   gap: 9px;
-  touch-action: pan-y;
-}
-.slider.is-disabled {
-  cursor: not-allowed;
-}
-.slider.is-dragging {
-  cursor: grabbing;
-}
-
-.slider-thumb {
-  position: absolute;
-  top: 50%;
-  height: 24px;
-  width: 24px;
-  padding: 0;
-  background: var(--surface);
-  background-clip: padding-box;
-  border: 1px solid var(--surface-stroke-out);
+  background: var(--gray-50);
+  border: 1px solid var(--gray-200);
   border-radius: var(--radius-full);
-  box-shadow: var(--shadow-sm);
-  cursor: grab;
-  outline: 0;
-  translate: -50% -50%;
+  color: var(--foreground);
   transition: var(--transition-default);
-  transition-property: outline-color, outline-offset;
+  transition-property: background, border, color, outline-color, outline-offset;
+}
+.chip.is-selectable {
+  cursor: pointer;
   outline: 2px solid rgb(from var(--primary-600) r g b/0);
   outline-offset: 0;
 }
-.slider-thumb:focus-visible {
+.chip.is-selectable:focus-visible {
   outline-color: var(--primary-600);
   outline-offset: 2px;
 }
 @media (hover: hover) {
-  .slider-thumb:hover {
-    background-color: var(--surface-hover);
+  .chip.is-selectable:hover {
+    background: var(--gray-100);
   }
 }
-.slider-thumb.is-disabled {
-  background-color: var(--surface-disabled);
-  box-shadow: none;
-  pointer-events: none;
+.chip.is-selected {
+  background: var(--primary-50);
+  border-color: var(--primary-200);
+  color: var(--primary-600);
 }
-.slider-thumb.is-dragging {
-  box-shadow: var(--shadow-md);
-  cursor: grabbing;
+@media (hover: hover) {
+  .chip.is-selected:hover {
+    background: var(--primary-100);
+  }
 }
-
-.slider-track {
-  position: relative;
-  height: 12px;
-  background: var(--gray-50);
-  background-clip: padding-box;
-  border-radius: var(--radius-half);
-  box-shadow: inset 0 0 0 1px var(--surface-stroke-out);
+.chip :is(span) {
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+}.command-palette-backdrop {
+  position: fixed;
+  inset: 0;
+  background: var(--overlay);
+  backdrop-filter: blur(3px) saturate(180%);
+  animation: command-palette-backdrop-in 300ms var(--swift-out) both;
+  z-index: 99000;
 }
-
-.slider-track-value {
-  position: absolute;
-  display: block;
-  top: 0;
-  height: inherit;
-  background: var(--primary-600);
-  border-radius: inherit;
+.command-palette-backdrop.is-closing {
+  animation: command-palette-backdrop-out 210ms var(--swift-out) both;
 }
 
-.slider.is-disabled .slider-track-value {
-  background: var(--gray-300);
+.command-palette-dialog {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  padding-top: clamp(60px, 15vh, 160px);
+  align-items: flex-start;
+  justify-content: center;
+  animation: command-palette-in 300ms var(--swift-out) both;
+  z-index: 99001;
 }
-
-.tick {
-  position: absolute;
-  left: calc(var(--position) * 100% - 1px);
-  bottom: 0;
-  height: 9px;
-  width: 2px;
-  background: var(--gray-300);
-  border-radius: var(--radius-full);
-  color: var(--foreground-prominent);
-  font-size: 10px;
-  font-weight: 600;
+.command-palette-dialog.is-closing {
+  animation: command-palette-out 210ms var(--swift-out) both;
   pointer-events: none;
 }
 
-.tick-large {
-}
-.tick-large :is(span) {
-  position: relative;
-  display: inline-block;
-  translate: -50% -100%;
-}
-
-.tick-small {
-  height: 6px;
-  opacity: 0.5;
+.command-palette {
+  display: flex;
+  overflow: hidden;
+  width: min(600px, 100dvw - 48px);
+  max-height: min(480px, 100dvh - 120px - clamp(60px, 15vh, 160px));
+  flex-flow: column nowrap;
+  background: var(--surface);
+  background-clip: padding-box;
+  border: 1px solid var(--surface-stroke-out);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-lg);
+  transition: height 120ms var(--deceleration-curve);
 }
 
-.ticks {
-  position: relative;
-  display: block;
-  height: 21px;
-}.tree-node {
+.command-palette-search {
   display: flex;
-  width: 100%;
-  min-height: 36px;
-  padding: 0 8px;
+  height: 54px;
+  padding: 0 18px;
   align-items: center;
-  border-radius: var(--radius-half);
-  color: var(--foreground);
-  font-size: 14px;
-  gap: 8px;
-  outline: 0;
-  transition: 150ms var(--swift-out);
-  transition-property: background, color;
-  user-select: none;
-}
-
-.tree-node-line-area {
-  display: flex;
-  align-self: stretch;
   flex-shrink: 0;
+  gap: 12px;
+  border-bottom: 1px solid var(--gray-100);
 }
 
-.tree-indent {
-  position: relative;
-  width: 20px;
-  align-self: stretch;
+.command-palette-search-icon {
   flex-shrink: 0;
-  pointer-events: none;
-}
-.tree-indent.has-line::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 9px;
-  width: 1px;
-  background: var(--surface-stroke);
+  color: var(--foreground-secondary);
+  font-size: 16px;
 }
 
-.tree-connector {
-  position: relative;
-  width: 20px;
-  align-self: stretch;
-  flex-shrink: 0;
-  pointer-events: none;
-}
-.tree-connector:not(.is-last)::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 9px;
-  width: 1px;
-  background: var(--surface-stroke);
+.command-palette-search-input {
+  height: 100%;
+  flex-grow: 1;
+  background: transparent;
+  border: 0;
+  color: var(--foreground);
+  font: inherit;
+  font-size: 16px;
+  outline: 0;
 }
-.tree-connector::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 50%;
-  left: 9px;
-  right: 0;
-  border-left: 1px solid var(--surface-stroke);
-  border-bottom: 1px solid var(--surface-stroke);
-  border-bottom-left-radius: 6px;
+.command-palette-search-input::placeholder {
+  color: var(--foreground-secondary);
 }
 
-.tree-node-expand {
-  display: flex;
-  width: 16px;
+.command-palette-breadcrumb {
+  padding: 0;
   flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
   color: var(--foreground-secondary);
+  font: inherit;
+  font-size: 15px;
+  font-weight: 500;
+  white-space: nowrap;
+  transition: color 150ms;
 }
-.tree-node-expand:not(:empty) {
-  cursor: pointer;
+@media (hover: hover) {
+  .command-palette-breadcrumb:hover {
+    color: var(--foreground);
+  }
 }
 
-.tree-node-color-dot {
-  display: block;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
+.command-palette-breadcrumb-separator {
   flex-shrink: 0;
-}
-
-.tree-node-icon {
+  opacity: 0.5;
   color: var(--foreground-secondary);
-  flex-shrink: 0;
+  font-size: 14px;
 }
 
-.tree-node-label {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}.divider {
-  position: relative;
-  display: grid;
-  contain: paint;
-  margin-top: 18px;
-  margin-bottom: 18px;
-  align-items: center;
+.command-palette-tabs {
+  display: flex;
+  overflow-x: auto;
+  scrollbar-width: none;
+  padding: 6px 15px;
   flex-shrink: 0;
+  gap: 3px;
+  border-bottom: 1px solid var(--gray-100);
 }
-
-.divider-content-start {
-  justify-items: start;
-}
-
-.divider-content-center {
-  justify-items: center;
-}
-
-.divider-content-end {
-  justify-items: end;
+.command-palette-tabs::-webkit-scrollbar {
+  display: none;
 }
 
-.divider-content {
-  position: relative;
+.command-palette-tab {
   display: flex;
+  height: 30px;
+  padding: 0 10px;
+  align-items: center;
+  gap: 6px;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-half);
+  cursor: pointer;
+  color: var(--foreground-secondary);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  transition: background 150ms, color 150ms;
 }
-.divider-content::before, .divider-content::after {
-  position: absolute;
-  display: block;
-  top: 50%;
-  translate: 0 -50%;
-}
-.divider-content::before {
-  left: -100dvh;
-  right: calc(100% + 15px);
-}
-.divider-content::after {
-  left: calc(100% + 15px);
-  right: -100dvh;
+@media (hover: hover) {
+  .command-palette-tab:hover {
+    background: var(--gray-100);
+    color: var(--foreground);
+  }
 }
 
-.divider-line {
-  width: 100%;
-  border: 0;
+.command-palette-tab-active {
+  background: var(--primary-100);
+  color: var(--primary-700);
 }
-
-.divider-content::before,
-.divider-content::after,
-.divider-line {
-  height: 1px;
-  content: "";
-  background: var(--gray-100);
+@media (hover: hover) {
+  .command-palette-tab-active:hover {
+    background: var(--primary-100);
+    color: var(--primary-700);
+  }
 }
 
-.separator {
-  background: var(--gray-200);
+.command-palette-tab-icon {
+  font-size: 13px;
 }
 
-.separator-horizontal {
-  height: 1px;
+.command-palette-results {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-padding-block: 42px 6px;
+  scrollbar-width: thin;
+  padding: 6px;
+  flex-grow: 1;
 }
 
-.separator-vertical {
-  width: 1px;
-}.calendar {
+.command-palette-loading {
   display: flex;
-  flex-flow: column;
-  box-shadow: var(--shadow-sm);
-  contain: paint;
+  padding: 24px;
+  align-items: center;
+  justify-content: center;
 }
 
-.calendar-actions {
+.command-palette-empty {
+  display: flex;
+  padding: 24px;
   align-items: center;
+  justify-content: center;
+  color: var(--foreground-secondary);
+  font-size: 14px;
 }
 
-.calendar-loader {
+.command-palette-group {
+  display: flex;
+  padding: 9px 10px 3px;
+  align-items: center;
+  gap: 6px;
+  color: var(--foreground-secondary);
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  pointer-events: none;
 }
 
-.calendar-current {
-  display: flex;
-  gap: 9px;
+.command-palette-group-icon {
+  font-size: 12px;
 }
 
-.calendar-current-value {
-  padding: 0;
-  background: none;
+.command-palette-item {
+  display: flex;
+  width: 100%;
+  padding: 8px 10px;
+  align-items: center;
+  gap: 10px;
+  background: transparent;
   border: 0;
+  border-radius: var(--radius-half);
   cursor: pointer;
-  font-size: 30px;
-  letter-spacing: -0.05em;
-  line-height: 1.5em;
-  text-transform: capitalize;
+  color: var(--foreground);
+  font: inherit;
+  font-size: 14px;
+  text-align: left;
+  transition: background 100ms;
 }
 @media (hover: hover) {
-  .calendar-current-value:hover {
-    color: var(--primary-600);
+  .command-palette-item:hover {
+    background: var(--gray-100);
   }
 }
+.command-palette-item:active {
+  background: var(--gray-200);
+}
 
-.calendar-current-month {
-  color: var(--foreground-prominent);
-  font-weight: 700;
+.command-palette-item-highlighted {
+  background: var(--gray-100);
+}
+@media (hover: hover) {
+  .command-palette-item-highlighted:hover {
+    background: var(--gray-100);
+  }
 }
 
-.calendar-current-year {
+.command-palette-item-icon {
+  display: flex;
+  width: 30px;
+  height: 30px;
+  align-items: center;
+  align-self: flex-start;
+  flex-shrink: 0;
+  justify-content: center;
+  background: var(--gray-100);
+  border-radius: var(--radius-half);
   color: var(--foreground);
+  transition: background 100ms, color 100ms;
+}
+.command-palette-item-icon .icon {
+  font-size: 16px;
 }
 
-.calendar-cells {
-  display: grid;
+.command-palette-item-highlighted .command-palette-item-icon {
+  background: var(--gray-200);
+}
+
+.command-palette-item-content {
+  overflow: hidden;
   flex-grow: 1;
-  gap: 1px;
-  grid-template-columns: repeat(7, 1fr);
-  grid-template-rows: min-content repeat(6, auto);
-  background: var(--gray-100);
 }
 
-.calendar-cell {
-  padding: 12px 18px;
-  background: var(--gray-25);
+.command-palette-item-label {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
-.calendar-day {
-  padding-left: 0;
-  padding-right: 0;
+.command-palette-item-sub-label {
+  overflow: hidden;
+  margin-top: 1px;
   color: var(--foreground-secondary);
   font-size: 12px;
-  font-weight: 400;
-  line-height: 1em;
-  text-align: center;
-  text-transform: capitalize;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  transition: color 100ms;
 }
 
-.calendar-entry {
-  position: relative;
-  min-height: 105px;
-  padding-bottom: 39px;
+.command-palette-item-highlighted .command-palette-item-sub-label {
+  color: var(--primary-500);
 }
-.calendar-entry.is-disabled {
-  background: var(--gray-50);
+
+.command-palette-item-sub-action-indicator {
+  flex-shrink: 0;
   color: var(--foreground-secondary);
-  pointer-events: none;
-}
-.calendar-entry.is-disabled .calendar-entry-date {
-  opacity: 0.25;
-}
-.calendar-entry.is-disabled .calendar-events {
-  opacity: 0.75;
-  pointer-events: none;
+  font-size: 12px;
+  transition: color 100ms;
 }
 
-.calendar-entry-date {
-  position: absolute;
-  right: 18px;
-  bottom: 15px;
-  color: var(--foreground);
-  font-size: 15px;
-  font-weight: 700;
-  line-height: 1em;
+.command-palette-item-highlighted .command-palette-item-sub-action-indicator {
+  color: var(--primary-500);
 }
 
-.calendar-events {
+@keyframes command-palette-in {
+  from {
+    opacity: 0;
+    scale: 1.05;
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
+}
+@keyframes command-palette-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes command-palette-backdrop-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes command-palette-backdrop-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}.comment {
   display: grid;
-  grid-auto-rows: 1fr;
-  gap: 3px;
+  max-width: 100%;
+  gap: 3px 15px;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: repeat(2, auto);
 }
-
-.calendar-event {
-  margin-left: -9px;
-  margin-right: -9px;
-  padding: 6px 9px;
-  background: var(--primary-100);
-  border: 0;
-  color: var(--primary-800);
-  cursor: pointer;
-  font-size: 14px;
-  line-height: 1.3em;
-  text-align: left;
-  /** note: This works in all browsers. */
-  display: -webkit-box;
-  overflow: hidden;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
+.comment .avatar {
+  align-self: end;
+  grid-column: 2;
+  grid-row: 1;
 }
-.calendar-event.is-single {
-  border-radius: var(--radius-half);
+.comment .comment-content {
+  grid-column: 1;
+  grid-row: 1;
 }
-.calendar-event.is-middle {
-  margin-left: -22px;
-  margin-right: -22px;
+.comment .comment-footer {
+  grid-column: 1;
+  grid-row: 2;
 }
-.calendar-event.is-start {
-  margin-right: -18px;
-  border-top-left-radius: var(--radius-half);
-  border-bottom-left-radius: var(--radius-half);
+.comment.is-received {
+  grid-template-columns: auto 1fr;
 }
-.calendar-event.is-end {
-  margin-left: -18px;
-  border-top-right-radius: var(--radius-half);
-  border-bottom-right-radius: var(--radius-half);
+.comment.is-received .avatar {
+  grid-column: 1;
 }
-.calendar-event:not(.is-single):not(.is-start) span {
-  opacity: 0;
+.comment.is-received .comment-content {
+  grid-column: 2;
 }
-@media (hover: hover) {
-  .calendar-event:hover {
-    background: var(--primary-200);
-  }
-}.date-picker {
-  display: flex;
-  max-height: 420px;
-  flex-flow: column;
-  border-radius: inherit;
-  overflow: auto;
-  user-select: none;
-  z-index: 0;
+.comment.is-received .comment-footer {
+  grid-column: 2;
 }
 
-.date-picker-dates,
-.date-picker-months,
-.date-picker-years,
-.date-picker-header {
-  padding: 15px;
+.comment-content {
+  min-width: 0;
+  padding: 12px 18px;
+  background: linear-gradient(to bottom, var(--gray-25), var(--gray-50));
+  border: 1px solid var(--gray-200);
+  border-radius: calc(var(--radius) * 2);
+  box-shadow: var(--shadow-xs);
 }
 
-.date-picker-header {
-  position: sticky;
-  display: flex;
-  top: 0;
-  align-items: center;
-  background: var(--gray-50);
-  border-bottom: 1px solid var(--surface-stroke);
-  z-index: 1;
+.comment:not(.is-received) .comment-content {
+  border-bottom-right-radius: var(--radius);
 }
 
-.date-picker-header-view {
-  display: flex;
-  height: 42px;
-  margin-left: auto;
-  margin-right: auto;
-  align-items: center;
-  gap: 9px;
-  font-size: 16px;
-  font-weight: 600;
+.comment.is-received .comment-content {
+  background: linear-gradient(to bottom, var(--gray-50), var(--gray-100));
+  border-color: var(--gray-200);
+  border-bottom-left-radius: var(--radius);
 }
 
-.date-picker-header-view-button {
-  padding: 0;
-  background: unset;
-  border: 0;
-  cursor: pointer;
-  text-transform: capitalize;
+.comment.is-typing .comment-content {
+  width: min-content;
 }
-.date-picker-header-view-button:first-child {
-  color: var(--foreground-prominent);
+
+.comment-typing {
+  display: block;
+  margin: 6px;
+  height: 6px;
+  width: 6px;
+  border-radius: 6px;
+  animation: comment-typing 1s linear infinite both;
 }
-.date-picker-header-view-button:last-child {
+
+.comment-footer {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  justify-content: flex-end;
+  font-size: 12px;
+  font-weight: 500;
+}
+.comment-footer span {
+  margin-right: auto;
+}
+.comment-footer time {
   color: var(--foreground-secondary);
 }
-@media (hover: hover) {
-  .date-picker-header-view-button:hover {
-    color: var(--primary-600);
-  }
+
+[dark] .comment-content {
+  background: linear-gradient(to bottom, var(--gray-50), var(--gray-25));
 }
 
-.date-picker-date {
-  display: flex;
-  padding: 0;
-  align-items: center;
-  justify-content: center;
-  aspect-ratio: 1;
-  background: unset;
-  border: 0;
-  border-radius: var(--radius);
-  color: var(--foreground-prominent);
-  cursor: pointer;
-  font-size: 14px;
+[dark] .comment.is-received .comment-content {
+  background: linear-gradient(to bottom, var(--gray-100), var(--gray-50));
+}
+
+@keyframes comment-typing {
+  0%, 80%, 100% {
+    background: var(--gray-200);
+    box-shadow: -9px 0 var(--gray-200), 9px 0 var(--gray-200);
+    translate: 0 0;
+  }
+  20% {
+    background: var(--gray-200);
+    box-shadow: -9px -4px var(--gray-300), 9px 0 var(--gray-200);
+    translate: 0 0;
+  }
+  40% {
+    background: var(--gray-300);
+    box-shadow: -9px 4px var(--gray-200), 9px 4px var(--gray-200);
+    translate: 0 -4px;
+  }
+  60% {
+    background: var(--gray-200);
+    box-shadow: -9px 0 var(--gray-200), 9px -4px var(--gray-300);
+    translate: 0 0;
+  }
+}.slider {
+  position: relative;
+  display: flex;
+  margin: 6px;
+  flex-flow: column;
+  gap: 9px;
+  touch-action: pan-y;
+}
+.slider.is-disabled {
+  cursor: not-allowed;
+}
+.slider.is-dragging {
+  cursor: grabbing;
+}
+
+.slider-thumb {
+  position: absolute;
+  top: 50%;
+  height: 24px;
+  width: 24px;
+  padding: 0;
+  background: var(--surface);
+  background-clip: padding-box;
+  border: 1px solid var(--surface-stroke-out);
+  border-radius: var(--radius-full);
+  box-shadow: var(--shadow-sm);
+  cursor: grab;
   outline: 0;
+  translate: -50% -50%;
   transition: var(--transition-default);
-  transition-property: background, border-radius, color, opacity;
+  transition-property: outline-color, outline-offset;
+  outline: 2px solid rgb(from var(--primary-600) r g b/0);
+  outline-offset: 0;
+}
+.slider-thumb:focus-visible {
+  outline-color: var(--primary-600);
+  outline-offset: 2px;
 }
 @media (hover: hover) {
-  .date-picker-date:hover {
-    background: var(--gray-100);
-    color: var(--foreground-prominent);
+  .slider-thumb:hover {
+    background-color: var(--surface-hover);
   }
 }
-.date-picker-date.is-disabled:not(.is-range-entry, .is-range-end, .is-range-start, .is-selection-entry, .is-selection-end, .is-selection-start) {
-  opacity: 0.25;
+.slider-thumb.is-disabled {
+  background-color: var(--surface-disabled);
+  box-shadow: none;
   pointer-events: none;
 }
-.date-picker-date:not(.is-disabled) {
-  font-weight: 500;
-}
-.date-picker-date.is-selected {
-  background: var(--primary-600);
-  color: var(--primary-50);
-  font-weight: 700;
+.slider-thumb.is-dragging {
+  box-shadow: var(--shadow-md);
+  cursor: grabbing;
 }
-.date-picker-date.is-range-entry {
-  background: var(--primary-200);
-  border-radius: 0;
-  color: var(--primary-950);
+
+.slider-track {
+  position: relative;
+  height: 12px;
+  background: var(--gray-50);
+  background-clip: padding-box;
+  border-radius: var(--radius-half);
+  box-shadow: inset 0 0 0 1px var(--surface-stroke-out);
 }
-.date-picker-date.is-range-end, .date-picker-date.is-range-start {
+
+.slider-track-value {
+  position: absolute;
+  display: block;
+  top: 0;
+  height: inherit;
   background: var(--primary-600);
-  color: var(--primary-50);
-  font-weight: 700;
-}
-.date-picker-date.is-range-entry:nth-child(7n+8), .date-picker-date.is-range-start {
-  border-top-left-radius: var(--radius);
-  border-bottom-left-radius: var(--radius);
+  border-radius: inherit;
 }
-.date-picker-date.is-range-entry:nth-child(7n), .date-picker-date.is-range-end {
-  border-top-right-radius: var(--radius);
-  border-bottom-right-radius: var(--radius);
+
+.slider.is-disabled .slider-track-value {
+  background: var(--gray-300);
 }
-.date-picker-date.is-selection-entry {
-  background: var(--gray-100);
-  border-radius: 0;
+
+.tick {
+  position: absolute;
+  left: calc(var(--position) * 100% - 1px);
+  bottom: 0;
+  height: 9px;
+  width: 2px;
+  background: var(--gray-300);
+  border-radius: var(--radius-full);
   color: var(--foreground-prominent);
+  font-size: 10px;
+  font-weight: 600;
+  pointer-events: none;
 }
-.date-picker-date.is-selection-end, .date-picker-date.is-selection-start {
-  background: var(--gray-200);
-  font-weight: 700;
+
+.tick-large {
 }
-.date-picker-date.is-selection-entry:nth-child(7n+8), .date-picker-date.is-selection-start {
-  border-top-left-radius: var(--radius);
-  border-bottom-left-radius: var(--radius);
+.tick-large :is(span) {
+  position: relative;
+  display: inline-block;
+  translate: -50% -100%;
 }
-.date-picker-date.is-selection-entry:nth-child(7n), .date-picker-date.is-selection-end {
-  border-top-right-radius: var(--radius);
-  border-bottom-right-radius: var(--radius);
+
+.tick-small {
+  height: 6px;
+  opacity: 0.5;
 }
 
-.date-picker-dates {
+.ticks {
+  position: relative;
+  display: block;
+  height: 21px;
+}.coordinate-picker {
   position: relative;
+  aspect-ratio: 5/3;
+  background: var(--gray-50);
+  border: 1px solid var(--surface-stroke-out);
+  border-radius: var(--radius-half);
+  z-index: 0;
 }
 
-.date-picker-dates-grid {
-  display: grid;
-  gap: 3px 0;
-  grid-template-columns: repeat(7, 1fr);
+.coordinate-picker-thumb {
+  z-index: 1;
 }
-
-.date-picker-day {
-  margin-bottom: 6px;
-  color: var(--foreground-secondary);
-  font-size: 12px;
-  font-weight: 500;
-  text-align: center;
-  text-transform: uppercase;
+.coordinate-picker-thumb.is-disabled {
+  counter-reset: t;
 }
-
-.date-picker-months,
-.date-picker-years {
-  display: grid;
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 300px;
-  width: 100%;
-  gap: 9px;
-  grid-template-columns: repeat(3, 1fr);
+.coordinate-picker-thumb.is-dragging {
+  counter-reset: t;
+}.filter {
+  max-height: 50dvh;
+  max-width: 100%;
+  padding: 9px;
+  width: 270px;
+  overflow: auto;
+  scrollbar-width: none;
+  transition: height 150ms var(--deceleration-curve);
+  z-index: 0;
 }
-.date-picker-months .button,
-.date-picker-years .button {
-  contain: size layout;
-  contain-intrinsic-size: 0 42px;
-  content-visibility: auto;
-  text-transform: capitalize;
-}.chip {
-  display: flex;
-  height: 36px;
-  padding: 0 12px;
-  align-items: center;
-  flex-grow: 0;
-  gap: 9px;
-  background: var(--gray-50);
-  border: 1px solid var(--gray-200);
-  border-radius: var(--radius-full);
-  color: var(--foreground);
-  transition: var(--transition-default);
-  transition-property: background, border, color, outline-color, outline-offset;
+.filter::-webkit-scrollbar {
+  display: none;
+  height: 0;
+  width: 0;
 }
-.chip.is-selectable {
-  cursor: pointer;
-  outline: 2px solid rgb(from var(--primary-600) r g b/0);
-  outline-offset: 0;
+.filter .menu > :where(.divider, .separator) {
+  margin: 3px -9px;
 }
-.chip.is-selectable:focus-visible {
-  outline-color: var(--primary-600);
-  outline-offset: 2px;
+.filter .menu > .menu-group > .menu-sub-header {
+  top: 51px;
 }
-@media (hover: hover) {
-  .chip.is-selectable:hover {
-    background: var(--gray-100);
-  }
+.filter .menu > .menu-group:has(.filter-search) > .menu-sub-header {
+  top: 105px;
 }
-.chip.is-selected {
-  background: var(--primary-50);
-  border-color: var(--primary-200);
-  color: var(--primary-600);
+.filter .menu .menu-item-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-@media (hover: hover) {
-  .chip.is-selected:hover {
-    background: var(--primary-100);
-  }
+.filter .pane-body {
+  margin: -9px;
 }
-.chip :is(span) {
-  font-size: 14px;
+
+.filter-badge {
+  padding-left: 6px;
+  padding-right: 6px;
+  background: var(--primary-50);
+  border: 1px dashed var(--primary-300);
   font-weight: 500;
-  white-space: nowrap;
-}.command-palette-backdrop {
-  position: fixed;
-  inset: 0;
-  background: var(--overlay);
-  backdrop-filter: blur(3px) saturate(180%);
-  animation: command-palette-backdrop-in 300ms var(--swift-out) both;
-  z-index: 99000;
 }
-.command-palette-backdrop.is-closing {
-  animation: command-palette-backdrop-out 210ms var(--swift-out) both;
+.filter-badge .badge-label {
+  color: var(--primary-900);
 }
 
-.command-palette-dialog {
-  position: fixed;
-  inset: 0;
-  display: flex;
-  padding-top: clamp(60px, 15vh, 160px);
-  align-items: flex-start;
+.filter-button {
+  border: 1px solid var(--surface-stroke);
+  box-shadow: none;
+}
+.filter-button .badge {
+  border-radius: var(--radius-half);
+}
+.filter-button .button-icon {
+  color: var(--primary-700);
+  font-size: 16px;
+}
+
+.filter-header {
+  position: sticky;
+  margin: -9px -9px 3px;
+  padding: 9px;
+  top: -9px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--surface-stroke);
+  z-index: 2;
+}
+.filter-header:first-child {
+  border-top-left-radius: var(--radius);
+  border-top-right-radius: var(--radius);
+}
+
+.filter-back {
+  flex-grow: 1;
+}
+
+.filter-reset {
+  width: 42px;
   justify-content: center;
-  animation: command-palette-in 300ms var(--swift-out) both;
-  z-index: 99001;
 }
-.command-palette-dialog.is-closing {
-  animation: command-palette-out 210ms var(--swift-out) both;
-  pointer-events: none;
+
+.filter-date-picker {
+  margin: -9px;
 }
 
-.command-palette {
+.filter-search {
+  position: sticky;
+  margin: -9px -9px 0;
+  padding: 9px;
+  background: linear-gradient(to bottom, var(--surface) 75%, transparent);
+  z-index: 1;
+}
+
+.filter-header + .menu-group .filter-search {
+  top: 52px;
+}
+
+.filter-bar {
   display: flex;
-  overflow: hidden;
-  width: min(600px, 100dvw - 48px);
-  max-height: min(480px, 100dvh - 120px - clamp(60px, 15vh, 160px));
-  flex-flow: column nowrap;
-  background: var(--surface);
-  background-clip: padding-box;
-  border: 1px solid var(--surface-stroke-out);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow-lg);
-  transition: height 120ms var(--deceleration-curve);
+  flex-flow: row nowrap;
+  flex-grow: 1;
+  gap: 15px;
 }
 
-.command-palette-search {
+.filter-bar-search {
+  max-width: 300px;
+}.menu {
   display: flex;
-  height: 54px;
-  padding: 0 18px;
-  align-items: center;
-  flex-shrink: 0;
-  gap: 12px;
-  border-bottom: 1px solid var(--gray-100);
+  flex-flow: column;
 }
 
-.command-palette-search-icon {
-  flex-shrink: 0;
-  color: var(--foreground-secondary);
-  font-size: 16px;
+.menu-normal {
+  gap: 6px;
 }
 
-.command-palette-search-input {
-  height: 100%;
-  flex-grow: 1;
-  background: transparent;
-  border: 0;
-  color: var(--foreground);
-  font: inherit;
-  font-size: 16px;
-  outline: 0;
+.menu-large {
+  gap: 9px;
 }
-.command-palette-search-input::placeholder {
-  color: var(--foreground-secondary);
+
+.menu-group {
+  counter-reset: menu-group;
 }
 
-.command-palette-breadcrumb {
-  padding: 0;
-  flex-shrink: 0;
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-  color: var(--foreground-secondary);
-  font: inherit;
-  font-size: 15px;
-  font-weight: 500;
-  white-space: nowrap;
-  transition: color 150ms;
+.menu-group-horizontal {
+  display: flex;
+  gap: 3px;
+}
+
+.menu-group-vertical {
+  display: flex;
+  flex-flow: column;
+  gap: 1px;
+}
+
+.menu-item {
+  height: unset;
+  min-height: 42px;
+  gap: 15px;
+  justify-content: flex-start;
+  border: 0;
+  box-shadow: none;
+  color: var(--foreground);
+  text-align: left;
 }
 @media (hover: hover) {
-  .command-palette-breadcrumb:hover {
-    color: var(--foreground);
+  .menu-item:hover {
+    background: var(--gray-100);
   }
 }
+.menu-item:active {
+  background: var(--gray-200);
+}
+.menu-item .badge:last-child {
+  margin-right: -6px;
+}
 
-.command-palette-breadcrumb-separator {
-  flex-shrink: 0;
-  opacity: 0.5;
-  color: var(--foreground-secondary);
-  font-size: 14px;
+.menu-item-icon {
 }
 
-.command-palette-tabs {
-  display: flex;
-  overflow-x: auto;
-  scrollbar-width: none;
-  padding: 6px 15px;
-  flex-shrink: 0;
-  gap: 3px;
-  border-bottom: 1px solid var(--gray-100);
+.menu-item-label {
+  flex-grow: 1;
+  font-weight: 400;
+  text-align: left;
 }
-.command-palette-tabs::-webkit-scrollbar {
-  display: none;
+.menu-item-label:only-child {
+  margin-left: 0;
+  margin-right: 0;
+  min-width: unset;
 }
 
-.command-palette-tab {
-  display: flex;
-  height: 30px;
-  padding: 0 10px;
-  align-items: center;
-  gap: 6px;
-  background: transparent;
-  border: 0;
-  border-radius: var(--radius-half);
-  cursor: pointer;
-  color: var(--foreground-secondary);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  white-space: nowrap;
-  transition: background 150ms, color 150ms;
+.menu-item-active {
+  background: var(--primary-600);
+  color: var(--primary-50);
+}
+.menu-item-active .menu-item-icon {
+  color: var(--primary-25);
 }
 @media (hover: hover) {
-  .command-palette-tab:hover {
-    background: var(--gray-100);
-    color: var(--foreground);
+  .menu-item-active:hover {
+    background: var(--primary-600);
   }
 }
+.menu-item-active:active {
+  background: var(--primary-600);
+}
 
-.command-palette-tab-active {
+.menu-item-destructive .menu-item-icon {
+  color: var(--danger-700);
+}
+.menu-item-destructive .menu-item-label {
+  color: var(--danger-700);
+}
+
+.menu-item-highlighted {
   background: var(--primary-100);
+  color: var(--primary-600);
+}
+.menu-item-highlighted .menu-item-icon {
   color: var(--primary-700);
 }
 @media (hover: hover) {
-  .command-palette-tab-active:hover {
+  .menu-item-highlighted:hover {
     background: var(--primary-100);
-    color: var(--primary-700);
   }
 }
-
-.command-palette-tab-icon {
-  font-size: 13px;
+.menu-item-highlighted:active {
+  background: var(--primary-100);
+}
+.menu-item-highlighted .badge {
+  --surface-stroke: var(--primary-200);
 }
 
-.command-palette-results {
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  scroll-padding-block: 42px 6px;
-  scrollbar-width: thin;
-  padding: 6px;
-  flex-grow: 1;
+.menu-item-indented {
+  margin-left: 33px;
 }
 
-.command-palette-loading {
+.menu-collapsible {
   display: flex;
-  padding: 24px;
-  align-items: center;
-  justify-content: center;
+  flex-flow: column;
 }
 
-.command-palette-empty {
+.menu-collapsible-opened {
+}
+
+.menu-collapsible-body {
+  position: relative;
+  min-height: 0;
+  transition: height 300ms var(--swift-out), opacity 200ms var(--swift-out);
+}
+.menu-collapsible-body::before {
+  content: "";
+  position: absolute;
+  top: 3px;
+  bottom: 3px;
+  left: 21px;
+  width: 2px;
+  background: var(--surface-stroke);
+}
+.menu-collapsible-body.v-enter-from, .menu-collapsible-body.v-leave-to {
+  opacity: 0;
+}
+.menu-collapsible-body.v-enter-to, .menu-collapsible-body.v-leave-from {
+  opacity: 1;
+}
+.menu-collapsible-body.v-enter-active, .menu-collapsible-body.v-leave-active {
+  overflow: hidden;
+}
+
+.menu-collapsible-content {
   display: flex;
-  padding: 24px;
-  align-items: center;
-  justify-content: center;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  padding-left: 35px;
+  flex-flow: column;
+  gap: 3px;
+}
+
+.menu-item-selectable-icon {
+}
+
+.menu-item-selected .menu-item-selectable-icon {
+  color: var(--primary-600);
+}
+
+.menu-item-command {
+  margin-top: 1px;
+  margin-left: auto;
+  padding-left: 6px;
   color: var(--foreground-secondary);
+  font: inherit;
   font-size: 14px;
+  white-space: nowrap;
 }
 
-.command-palette-group {
-  display: flex;
-  padding: 9px 10px 3px;
-  align-items: center;
-  gap: 6px;
+.menu-item-command-icon {
+  margin-right: -6px;
   color: var(--foreground-secondary);
-  font-size: 12px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  pointer-events: none;
+}
+.menu-item-command-icon.icon {
+  font-size: 16px;
 }
 
-.command-palette-group-icon {
-  font-size: 12px;
+.menu-item-command + .menu-item-command-icon {
+  margin-left: -9px;
 }
 
-.command-palette-item {
-  display: flex;
-  width: 100%;
-  padding: 8px 10px;
-  align-items: center;
-  gap: 10px;
-  background: transparent;
-  border: 0;
-  border-radius: var(--radius-half);
-  cursor: pointer;
-  color: var(--foreground);
-  font: inherit;
-  font-size: 14px;
-  text-align: left;
-  transition: background 100ms;
+.menu-item-active .menu-item-command,
+.menu-item-active .menu-item-command-icon {
+  color: var(--primary-300);
 }
-@media (hover: hover) {
-  .command-palette-item:hover {
-    background: var(--gray-100);
-  }
+
+.menu-item-image {
+  margin-left: -2px;
+  margin-right: -2px;
+  height: 24px;
+  width: 24px;
+  border-radius: 3px;
 }
-.command-palette-item:active {
-  background: var(--gray-200);
+
+.menu-item .avatar {
+  margin: -3px;
+  font-size: 24px;
 }
 
-.command-palette-item-highlighted {
-  background: var(--gray-100);
+.menu-group-horizontal .menu-item {
+  flex-basis: 0;
+  flex-grow: 1;
 }
-@media (hover: hover) {
-  .command-palette-item-highlighted:hover {
-    background: var(--gray-100);
-  }
+.menu-group-horizontal .menu-item:has(.menu-item-icon:only-child) {
+  justify-content: center;
 }
 
-.command-palette-item-icon {
+.menu-title {
+  padding: 0 12px;
+  color: var(--foreground-prominent);
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.menu-sub-header {
+  position: sticky;
   display: flex;
-  width: 30px;
-  height: 30px;
+  top: 0;
+  margin-top: -9px;
+  margin-bottom: -3px;
+  padding: 12px 12px 6px;
   align-items: center;
-  align-self: flex-start;
-  flex-shrink: 0;
-  justify-content: center;
-  background: var(--gray-100);
-  border-radius: var(--radius-half);
-  color: var(--foreground);
-  transition: background 100ms, color 100ms;
+  gap: 9px;
+  background: linear-gradient(to bottom, var(--surface) 75%, transparent);
+  pointer-events: none;
+  z-index: 1;
 }
-.command-palette-item-icon .icon {
-  font-size: 16px;
+
+.menu-sub-header-icon,
+.menu-sub-header-label {
+  color: var(--foreground-secondary);
 }
 
-.command-palette-item-highlighted .command-palette-item-icon {
-  background: var(--gray-200);
+.menu-sub-header-icon {
+  font-size: 16px;
 }
 
-.command-palette-item-content {
-  overflow: hidden;
+.menu-sub-header-label {
   flex-grow: 1;
+  font-size: 14px;
 }
 
-.command-palette-item-label {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+.menu-item + .menu-sub-header {
+  margin-top: 9px;
 }
 
-.command-palette-item-sub-label {
-  overflow: hidden;
-  margin-top: 1px;
-  color: var(--foreground-secondary);
-  font-size: 12px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  transition: color 100ms;
+.menu-large .menu-item {
+  position: relative;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+.menu-large .menu-item::after {
+  position: absolute;
+  display: block;
+  top: 12px;
+  right: 12px;
+  bottom: 12px;
+  width: 4px;
+  content: "";
+  background: var(--primary-600);
+  border-radius: var(--radius-full);
+  opacity: 0;
+  transition: opacity var(--transition-default);
 }
 
-.command-palette-item-highlighted .command-palette-item-sub-label {
-  color: var(--primary-500);
+.menu-large .menu-item:not(.menu-item-indented) {
+  min-height: 48px;
+}
+.menu-large .menu-item:not(.menu-item-indented)::after {
+  background: var(--primary-25);
 }
 
-.command-palette-item-sub-action-indicator {
-  flex-shrink: 0;
-  color: var(--foreground-secondary);
-  font-size: 12px;
-  transition: color 100ms;
+.menu-large .menu-item-active::after {
+  opacity: 1;
+}
+.menu-large .menu-item-active.menu-item-indented {
+  background: var(--gray-100);
+}
+.menu-large .menu-item-active.menu-item-indented .menu-item-icon,
+.menu-large .menu-item-active.menu-item-indented .menu-item-label {
+  color: var(--foreground-prominent);
 }
 
-.command-palette-item-highlighted .command-palette-item-sub-action-indicator {
-  color: var(--primary-500);
+.base-pane > .menu {
+  margin-left: 9px;
+  margin-right: 9px;
+}
+.base-pane > .menu:first-child {
+  margin-top: 9px;
+}
+.base-pane > .menu:last-child {
+  margin-bottom: 9px;
+}
+.base-pane > .menu > :where(.divider, .separator) {
+  margin: 3px -9px;
 }
 
-@keyframes command-palette-in {
-  from {
-    opacity: 0;
-    scale: 1.05;
-  }
-  to {
-    opacity: 1;
-    scale: 1;
-  }
+.expandable-body > .menu {
+  margin-left: 9px;
+  margin-right: 9px;
 }
-@keyframes command-palette-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
+.expandable-body > .menu:last-child {
+  margin-bottom: 9px;
 }
-@keyframes command-palette-backdrop-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+.expandable-body > .menu > :where(.divider, .separator) {
+  margin-left: 18px;
+  margin-right: 18px;
+}.tree-node {
+  display: flex;
+  width: 100%;
+  min-height: 36px;
+  padding: 0 8px;
+  align-items: center;
+  border-radius: var(--radius-half);
+  color: var(--foreground);
+  font-size: 14px;
+  gap: 8px;
+  outline: 0;
+  transition: 150ms var(--swift-out);
+  transition-property: background, color;
+  user-select: none;
 }
-@keyframes command-palette-backdrop-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}.comment {
-  display: grid;
-  max-width: 100%;
-  gap: 3px 15px;
-  grid-template-columns: 1fr auto;
-  grid-template-rows: repeat(2, auto);
+
+.tree-node-line-area {
+  display: flex;
+  align-self: stretch;
+  flex-shrink: 0;
 }
-.comment .avatar {
-  align-self: end;
-  grid-column: 2;
-  grid-row: 1;
+
+.tree-indent {
+  position: relative;
+  width: 20px;
+  align-self: stretch;
+  flex-shrink: 0;
+  pointer-events: none;
 }
-.comment .comment-content {
-  grid-column: 1;
-  grid-row: 1;
+.tree-indent.has-line::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 9px;
+  width: 1px;
+  background: var(--surface-stroke);
 }
-.comment .comment-footer {
-  grid-column: 1;
-  grid-row: 2;
+
+.tree-connector {
+  position: relative;
+  width: 20px;
+  align-self: stretch;
+  flex-shrink: 0;
+  pointer-events: none;
 }
-.comment.is-received {
-  grid-template-columns: auto 1fr;
+.tree-connector:not(.is-last)::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 9px;
+  width: 1px;
+  background: var(--surface-stroke);
 }
-.comment.is-received .avatar {
-  grid-column: 1;
+.tree-connector::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 50%;
+  left: 9px;
+  right: 0;
+  border-left: 1px solid var(--surface-stroke);
+  border-bottom: 1px solid var(--surface-stroke);
+  border-bottom-left-radius: 6px;
 }
-.comment.is-received .comment-content {
-  grid-column: 2;
+
+.tree-node-expand {
+  display: flex;
+  width: 16px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  color: var(--foreground-secondary);
 }
-.comment.is-received .comment-footer {
-  grid-column: 2;
+.tree-node-expand:not(:empty) {
+  cursor: pointer;
 }
 
-.comment-content {
-  min-width: 0;
-  padding: 12px 18px;
-  background: linear-gradient(to bottom, var(--gray-25), var(--gray-50));
-  border: 1px solid var(--gray-200);
-  border-radius: calc(var(--radius) * 2);
-  box-shadow: var(--shadow-xs);
+.tree-node-color-dot {
+  display: block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
 }
 
-.comment:not(.is-received) .comment-content {
-  border-bottom-right-radius: var(--radius);
+.tree-node-icon {
+  color: var(--foreground-secondary);
+  flex-shrink: 0;
 }
 
-.comment.is-received .comment-content {
-  background: linear-gradient(to bottom, var(--gray-50), var(--gray-100));
-  border-color: var(--gray-200);
-  border-bottom-left-radius: var(--radius);
+.tree-node-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}.divider {
+  position: relative;
+  display: grid;
+  contain: paint;
+  margin-top: 18px;
+  margin-bottom: 18px;
+  align-items: center;
+  flex-shrink: 0;
 }
 
-.comment.is-typing .comment-content {
-  width: min-content;
+.divider-content-start {
+  justify-items: start;
 }
 
-.comment-typing {
-  display: block;
-  margin: 6px;
-  height: 6px;
-  width: 6px;
-  border-radius: 6px;
-  animation: comment-typing 1s linear infinite both;
+.divider-content-center {
+  justify-items: center;
+}
+
+.divider-content-end {
+  justify-items: end;
 }
 
-.comment-footer {
+.divider-content {
+  position: relative;
   display: flex;
-  align-items: center;
-  gap: 12px;
-  justify-content: flex-end;
-  font-size: 12px;
-  font-weight: 500;
 }
-.comment-footer span {
-  margin-right: auto;
+.divider-content::before, .divider-content::after {
+  position: absolute;
+  display: block;
+  top: 50%;
+  translate: 0 -50%;
 }
-.comment-footer time {
-  color: var(--foreground-secondary);
+.divider-content::before {
+  left: -100dvh;
+  right: calc(100% + 15px);
 }
-
-[dark] .comment-content {
-  background: linear-gradient(to bottom, var(--gray-50), var(--gray-25));
+.divider-content::after {
+  left: calc(100% + 15px);
+  right: -100dvh;
 }
 
-[dark] .comment.is-received .comment-content {
-  background: linear-gradient(to bottom, var(--gray-100), var(--gray-50));
+.divider-line {
+  width: 100%;
+  border: 0;
 }
 
-@keyframes comment-typing {
-  0%, 80%, 100% {
-    background: var(--gray-200);
-    box-shadow: -9px 0 var(--gray-200), 9px 0 var(--gray-200);
-    translate: 0 0;
-  }
-  20% {
-    background: var(--gray-200);
-    box-shadow: -9px -4px var(--gray-300), 9px 0 var(--gray-200);
-    translate: 0 0;
-  }
-  40% {
-    background: var(--gray-300);
-    box-shadow: -9px 4px var(--gray-200), 9px 4px var(--gray-200);
-    translate: 0 -4px;
-  }
-  60% {
-    background: var(--gray-200);
-    box-shadow: -9px 0 var(--gray-200), 9px -4px var(--gray-300);
-    translate: 0 0;
-  }
-}.coordinate-picker {
-  position: relative;
-  aspect-ratio: 5/3;
-  background: var(--gray-50);
-  border: 1px solid var(--surface-stroke-out);
-  border-radius: var(--radius-half);
-  z-index: 0;
+.divider-content::before,
+.divider-content::after,
+.divider-line {
+  height: 1px;
+  content: "";
+  background: var(--gray-100);
 }
 
-.coordinate-picker-thumb {
-  z-index: 1;
+.separator {
+  background: var(--gray-200);
 }
-.coordinate-picker-thumb.is-disabled {
-  counter-reset: t;
+
+.separator-horizontal {
+  height: 1px;
 }
-.coordinate-picker-thumb.is-dragging {
-  counter-reset: t;
+
+.separator-vertical {
+  width: 1px;
 }.color-picker {
   --transparent: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2N89uzZfwY8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC);
   display: flex;
@@ -5242,41 +5454,52 @@ tfoot .table-cell {
 
 .info-body {
   align-items: center;
-}/* region root */
-.kanban {
+}.kanban {
   position: relative;
-  display: flex;
-  flex-flow: row;
-  gap: 15px;
-  block-size: 100%;
-  inline-size: 100%;
+  display: grid;
+  flex-grow: 1;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(300px, 1fr);
+  grid-template-rows: auto 1fr auto;
+  margin: -9px;
+  padding: 9px;
+  gap: 0 15px;
   overflow-x: auto;
-  padding-bottom: 6px;
 }
 
 .kanban-live-region {
   position: absolute;
+  grid-row: 1;
   width: 1px;
   height: 1px;
   margin: -1px;
   padding: 0;
   border: 0;
-  overflow: hidden;
   clip: rect(0, 0, 0, 0);
+  overflow: hidden;
   white-space: nowrap;
 }
 
-/* endregion */
-/* region column */
 .kanban-column {
-  display: flex;
-  flex-flow: column;
-  flex: 1 0 300px;
-  background: var(--gray-100);
-  border: 1px solid var(--gray-200);
+  display: grid;
+  grid-template-rows: subgrid;
+  grid-row: span 2;
+  min-width: 0;
+  background: var(--gray-50);
+  border: 1px solid var(--surface-stroke);
   border-radius: var(--radius);
+  outline: 2px dashed transparent;
+  outline-offset: 2px;
   overflow: hidden;
-  transition: opacity 180ms var(--swift-out);
+  transition: 210ms var(--swift-out);
+  transition-property: background, border, outline-color, opacity, z-index;
+  z-index: 0;
+}
+.kanban-column.is-over {
+  background: var(--primary-50);
+  border-color: var(--primary-200);
+  outline-color: var(--primary-600);
+  z-index: 1;
 }
 
 .kanban-column.is-column-dragging {
@@ -5291,8 +5514,7 @@ tfoot .table-cell {
   display: flex;
   align-items: center;
   gap: 9px;
-  padding: 12px 15px;
-  border-bottom: 1px solid var(--gray-200);
+  padding: 12px 12px 0;
   outline: 2px solid rgb(from var(--primary-600) r g b/0);
   outline-offset: 0;
 }
@@ -5311,28 +5533,24 @@ tfoot .table-cell {
 
 .kanban-column-label {
   flex: 1;
-  font-size: 0.8125rem;
+  font-size: 14px;
   font-weight: 600;
   color: var(--foreground);
-  letter-spacing: 0.01em;
   text-transform: uppercase;
 }
 
 .kanban-column-body {
+  position: relative;
   display: flex;
   flex-flow: column;
-  gap: 9px;
-  padding: 9px;
+  gap: 12px;
+  padding: 12px;
   min-height: 60px;
   flex: 1;
   overflow-y: auto;
   transition: background 180ms var(--swift-out);
 }
 
-.is-over .kanban-column-body {
-  background: rgb(from var(--primary-500) r g b/0.06);
-}
-
 .is-over.is-drop-disallowed .kanban-column-body {
   background: rgb(from var(--danger-500) r g b/0.06);
   cursor: not-allowed;
@@ -5368,55 +5586,52 @@ tfoot .table-cell {
 }
 
 .kanban-drop-indicator {
-  flex-shrink: 0;
-  height: 2px;
+  position: absolute;
+  top: -3px;
+  inset-inline: 15px;
+  height: 4px;
   border-radius: 999px;
-  background: transparent;
-  transition: background 180ms var(--swift-out);
+  background: var(--primary-500);
+  opacity: 0;
+  pointer-events: none;
+  transition: 300ms var(--swift-out);
+  transition-property: background, opacity;
+  will-change: transform;
 }
 
-.is-drop-end-active {
-  background: var(--primary-500);
+.kanban-drop-indicator.is-visible {
+  opacity: 1;
 }
 
-.is-drop-end-active.is-drop-end-disallowed {
+.kanban-drop-indicator.is-disallowed {
   background: var(--danger-500);
 }
 
-/* endregion */
-/* region card */
-.kanban-card {
+.kanban-item {
   position: relative;
-  padding: 12px;
-  background: var(--gray-25);
-  border: 1px solid var(--gray-200);
-  border-radius: var(--radius);
+  display: block;
+  background: transparent;
+  border: 0;
   cursor: grab;
   scroll-margin: 9px;
-  transition: opacity 180ms var(--swift-out), box-shadow 180ms var(--swift-out), transform 180ms var(--swift-out);
+  transition: opacity 180ms var(--swift-out), transform 180ms var(--swift-out);
   user-select: none;
   outline: 2px solid rgb(from var(--primary-600) r g b/0);
   outline-offset: 0;
 }
-.kanban-card:focus-visible {
+.kanban-item:focus-visible {
   outline-color: var(--primary-600);
-  outline-offset: -2;
+  outline-offset: 2;
 }
-.kanban-card:active {
+.kanban-item:active {
   cursor: grabbing;
 }
-.kanban-card:hover {
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
-}
 
-.kanban-card.is-disabled {
+.kanban-item.is-disabled {
   cursor: not-allowed;
   opacity: 0.6;
 }
-.kanban-card.is-disabled:hover {
-  box-shadow: none;
-}
-.kanban-card.is-disabled:active {
+.kanban-item.is-disabled:active {
   cursor: not-allowed;
 }
 
@@ -5427,26 +5642,10 @@ tfoot .table-cell {
 
 .is-grabbed {
   transform: scale(1.04);
-  background: var(--surface);
-  box-shadow: 0 0 0 2px var(--primary-500), 0 8px 24px rgba(0, 0, 0, 0.15);
+  outline: 2px solid var(--primary-500);
+  outline-offset: 2px;
   z-index: 1;
-}
-
-.is-drop-before::before {
-  content: "";
-  position: absolute;
-  inset-inline: 0;
-  top: -6px;
-  height: 2px;
-  border-radius: 999px;
-  background: var(--primary-500);
-}
-
-.is-drop-before.is-drop-before-disallowed::before {
-  background: var(--danger-500);
-}
-
-/* endregion */.item {
+}.item {
   display: flex;
   flex-flow: row nowrap;
   gap: 18px;
@@ -6494,13 +6693,24 @@ tfoot .table-cell {
 .stepper-steps-item-particles {
 }.tab {
   position: relative;
+  display: flex;
+  flex-flow: column;
+  flex-grow: 1;
+}
+
+.base-tab-bar {
+  position: relative;
+  z-index: 0;
 }
 
-.tab-bar {
+.tab-bar-default {
   --tab-padding: 12px;
-  position: relative;
   box-shadow: inset 0 -2px var(--surface-stroke);
-  z-index: 0;
+}
+
+.tab-bar-pills {
+  padding: 3px;
+  border-radius: var(--radius);
 }
 
 .tab-bar-arrow {
@@ -6534,81 +6744,142 @@ tfoot .table-cell {
   right: -6px;
 }
 
-.tab-bar-tabs {
+.base-tab-bar-tabs {
+  position: relative;
+  display: flex;
+  align-items: center;
+  overflow: auto;
+  scrollbar-width: none;
+}
+
+.tab-bar-tabs-default {
   --mask-start: 0%;
   --mask-end: 100%;
   --mask: linear-gradient(to right, transparent, black var(--mask-start), black, black var(--mask-end), transparent);
-  display: flex;
   margin-left: -3px;
   margin-right: -3px;
   padding-left: 3px;
   padding-right: 3px;
-  align-items: center;
   gap: 27px;
-  overflow: auto;
-  scrollbar-width: none;
   -webkit-mask-image: var(--mask);
   mask-image: var(--mask);
 }
-.tab-bar-tabs.is-start-masked {
+.tab-bar-tabs-default.is-start-masked {
   --mask-start: 60px;
 }
-.tab-bar-tabs.is-end-masked {
+.tab-bar-tabs-default.is-end-masked {
   --mask-end: calc(100% - 60px);
 }
 
-.tab-bar-item {
+.tab-bar-tabs-pills {
+  gap: 0;
+}
+
+.base-tab-bar-item {
   display: inline-flex;
-  padding: var(--tab-padding) 0;
   align-items: center;
-  gap: 9px;
   background: unset;
   border: 0;
-  border-bottom: 2px solid transparent;
   color: var(--foreground);
   contain: layout;
   cursor: pointer;
   font-weight: 500;
   outline: 0;
-  transition: var(--transition-default);
-  transition-property: border-color, color;
   white-space: nowrap;
 }
-.tab-bar-item::before {
+.base-tab-bar-item::before {
   position: absolute;
   inset: 0;
   content: "";
-  border-radius: var(--radius);
   pointer-events: none;
   transition: var(--transition-default) outline-color, outline-offset;
 }
-.tab-bar-item::before {
+.base-tab-bar-item::before {
   outline: 2px solid rgb(from var(--primary-600) r g b/0);
   outline-offset: 0;
 }
-.tab-bar-item:focus-visible::before {
+.base-tab-bar-item:focus-visible::before {
   outline-color: var(--primary-600);
-  outline-offset: 0;
+  outline-offset: -2px;
 }
-@media (hover: hover) {
-  .tab-bar-item:hover {
-    border-color: var(--foreground);
-  }
+.base-tab-bar-item::before {
+  outline-offset: -2px;
 }
-.tab-bar-item:disabled, .tab-bar-item[aria-disabled=true] {
+.base-tab-bar-item:disabled, .base-tab-bar-item[aria-disabled=true] {
   box-shadow: none;
   opacity: 0.5;
   pointer-events: none;
 }
 
-.tab-bar-item-active {
-  border-color: var(--primary-600);
+.tab-bar-item-default {
+  padding: var(--tab-padding) 0;
+  gap: 9px;
+  border-bottom: 2px solid transparent;
+  transition: var(--transition-default);
+  transition-property: border-color, color;
+}
+.tab-bar-item-default::before {
+  border-radius: var(--radius);
+}
+@media (hover: hover) {
+  .tab-bar-item-default:hover {
+    border-color: var(--foreground);
+  }
+}
+
+.tab-bar-item-default-active {
+  color: var(--foreground-prominent);
+}
+
+.tab-bar-item-pills {
+  position: relative;
+  height: 36px;
+  padding: 0 12px;
+  gap: 6px;
+  border-radius: calc(var(--radius) - 2px);
+  transition: color 300ms var(--swift-out);
+  z-index: 1;
+}
+.tab-bar-item-pills::before {
+  border-radius: calc(var(--radius) - 2px);
+}
+@media (hover: hover) {
+  .tab-bar-item-pills:hover {
+    color: var(--foreground-prominent);
+  }
+}
+
+.tab-bar-item-pills-active {
   color: var(--foreground-prominent);
+  cursor: default;
+}
+
+.base-tab-bar-highlight {
+  position: absolute;
+  pointer-events: none;
+  transition: 300ms var(--swift-out);
+  transition-property: left, width;
+}
+
+.tab-bar-highlight-default {
+  bottom: 0;
+  height: 2px;
+  background: var(--primary-600);
+  z-index: 1;
+}
+
+.tab-bar-highlight-pills {
+  top: 0;
+  bottom: 0;
+  background: var(--gray-100);
+  border-radius: calc(var(--radius) - 2px);
+  z-index: 0;
 }
 
 .tabs {
   display: flex;
   flex-flow: column;
+  flex-grow: 1;
   overflow: visible;
 }
 
@@ -6616,46 +6887,54 @@ tfoot .table-cell {
   margin-bottom: 18px;
 }
 
-.base-pane-structure > .tab-bar,
-.base-pane-structure > .tabs > .tab-bar,
-.base-pane-structure > .form > .tab-bar,
-.base-pane-structure > .form > .tabs > .tab-bar {
+.base-pane-structure > .tab-bar-default,
+.base-pane-structure > .tabs > .tab-bar-default,
+.base-pane-structure > .form > .tab-bar-default,
+.base-pane-structure > .form > .tabs > .tab-bar-default {
   --tab-padding: 18px;
   padding-left: 18px;
   padding-right: 18px;
   background: var(--gray-50);
 }
-.base-pane-structure > .tab-bar:first-child,
-.base-pane-structure > .tabs > .tab-bar:first-child,
-.base-pane-structure > .form > .tab-bar:first-child,
-.base-pane-structure > .form > .tabs > .tab-bar:first-child {
+.base-pane-structure > .tab-bar-default:first-child,
+.base-pane-structure > .tabs > .tab-bar-default:first-child,
+.base-pane-structure > .form > .tab-bar-default:first-child,
+.base-pane-structure > .form > .tabs > .tab-bar-default:first-child {
   border-radius: var(--radius) var(--radius) 0 0;
 }
-.base-pane-structure > .tab-bar:not(:first-child),
-.base-pane-structure > .tabs > .tab-bar:not(:first-child),
-.base-pane-structure > .form > .tab-bar:not(:first-child),
-.base-pane-structure > .form > .tabs > .tab-bar:not(:first-child) {
+.base-pane-structure > .tab-bar-default:not(:first-child),
+.base-pane-structure > .tabs > .tab-bar-default:not(:first-child),
+.base-pane-structure > .form > .tab-bar-default:not(:first-child),
+.base-pane-structure > .form > .tabs > .tab-bar-default:not(:first-child) {
   border-top: 1px solid var(--surface-stroke);
 }
 
-.base-pane-structure > .pane-header + .tab-bar,
-.base-pane-structure > .pane-header + .tabs > .tab-bar,
-.base-pane-structure > .form > .pane-header + .tab-bar,
-.base-pane-structure > .form > .pane-header + .tabs > .tab-bar {
-  padding-top: 6px;
-}
-.base-pane-structure > .pane-header + .tab-bar:not(:first-child),
-.base-pane-structure > .pane-header + .tabs > .tab-bar:not(:first-child),
-.base-pane-structure > .form > .pane-header + .tab-bar:not(:first-child),
-.base-pane-structure > .form > .pane-header + .tabs > .tab-bar:not(:first-child) {
+.base-pane-structure > .pane-header + .tab-bar-default:not(:first-child),
+.base-pane-structure > .pane-header + .tabs > .tab-bar-default:not(:first-child),
+.base-pane-structure > .form > .pane-header + .tab-bar-default:not(:first-child),
+.base-pane-structure > .form > .pane-header + .tabs > .tab-bar-default:not(:first-child) {
   border-top: 0;
 }
 
-.pane-header:has(+ .tab-bar),
-.pane-header:has(+ .tabs > .tab-bar) {
+.pane-header:has(+ .tab-bar-default),
+.pane-header:has(+ .tabs > .tab-bar-default) {
   background: var(--gray-50);
 }
 
+.base-pane-structure > .tab-bar-pills,
+.base-pane-structure > .tabs > .tab-bar-pills,
+.base-pane-structure > .form > .tab-bar-pills,
+.base-pane-structure > .form > .tabs > .tab-bar-pills {
+  padding-left: 6px;
+  padding-right: 6px;
+}
+.base-pane-structure > .tab-bar-pills:first-child,
+.base-pane-structure > .tabs > .tab-bar-pills:first-child,
+.base-pane-structure > .form > .tab-bar-pills:first-child,
+.base-pane-structure > .form > .tabs > .tab-bar-pills:first-child {
+  padding-top: 6px;
+}
+
 .base-pane-structure > .tabs > .tabs-bar {
   margin-bottom: 0;
 }.timeline {