@thangph2146/lexical-editor 0.0.3 → 0.0.5

package/src/themes/ui-components.scss

@@ -1,940 +1,30 @@
 @use "variables" as *;
 @use "mixins" as *;
 
-/* --- TABS --- */
-.editor-tabs-trigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-  border-radius: calc(var(--radius) - 2px);
-  padding: 0.375rem 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  transition: all 0.2s;
-  cursor: pointer;
-  border: none;
-  background: transparent;
-  color: var(--muted-foreground);
-
-  @include focus-ring;
-
-  &:disabled {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-
-  &[data-state="active"] {
-    background-color: var(--background);
-    color: var(--foreground);
-    @include shadow-sm;
-  }
-}
-
-.editor-tabs-list {
-  display: inline-flex;
-  height: 2.5rem;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius);
-  background-color: var(--muted);
-  padding: 0.25rem;
-  color: var(--muted-foreground);
-}
-
-.editor-tabs-content {
-  margin-top: 0.5rem;
-  @include focus-ring;
-}
-
-/* --- FLEX Component Utilities --- */
-.editor-flex {
-  display: flex;
-  
-  // Align
-  &--items-start { align-items: flex-start; }
-  &--items-center { align-items: center; }
-  &--items-end { align-items: flex-end; }
-  &--items-baseline { align-items: baseline; }
-  &--items-stretch { align-items: stretch; }
-  
-  // Justify
-  &--justify-start { justify-content: flex-start; }
-  &--justify-center { justify-content: center; }
-  &--justify-end { justify-content: flex-end; }
-  &--justify-between { justify-content: space-between; }
-  &--justify-around { justify-content: space-around; }
-  &--justify-evenly { justify-content: space-evenly; }
-  
-  // Direction
-  &--flex-row { flex-direction: row; }
-  &--flex-col { flex-direction: column; }
-  &--flex-column { flex-direction: column; }
-  &--flex-row-reverse { flex-direction: row-reverse; }
-  &--flex-col-reverse { flex-direction: column-reverse; }
-  &--flex-column-reverse { flex-direction: column-reverse; }
-  
-  // Wrap
-  &--flex-nowrap { flex-wrap: nowrap; }
-  &--flex-wrap { flex-wrap: wrap; }
-  &--flex-wrap-reverse { flex-wrap: wrap-reverse; }
-}
-
-.editor-flex-1 {
-  flex: 1 1 0%;
-}
-
-.editor-w-full {
-  width: 100%;
-}
-
-.editor-w-14 {
-  width: 3.5rem;
-}
-
-.editor-w-48 {
-  width: 12rem;
-}
-
-.editor-w-\[200px\] {
-  width: 200px;
-}
-
-.editor-h-full {
-  height: 100%;
-}
-
-.editor-h-4 {
-  height: 1rem;
-}
-
-.editor-overflow-hidden {
-  overflow: hidden;
-}
-
-.editor-fixed {
-  position: fixed;
-}
-
-.editor-absolute {
-  position: absolute;
-}
-
-.editor-absolute-full {
-  position: absolute;
-  inset: 0;
-}
-
-.editor-relative {
-  position: relative;
-}
-
-.editor-relative-full {
-  position: relative;
-  width: 100%;
-  height: 100%;
-
-  &--padding {
-    padding: 0.5rem 2rem; // py-2 px-8 equivalent
-  }
-}
-
-.editor-inline-block {
-  display: inline-block;
-}
-
-.editor-block {
-  display: block;
-}
-
-.editor-inset-0 {
-  inset: 0;
-}
-
-.editor-pointer-events-none {
-  pointer-events: none;
-}
-
-.editor-select-none {
-  user-select: none;
-}
-
-.editor-text-ellipsis {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.editor-z-10 {
-  z-index: 10;
-}
-
-/* --- ROUNDED --- */
-.editor-rounded-sm { border-radius: calc(var(--radius) - 4px); }
-.editor-rounded-md { border-radius: calc(var(--radius) - 2px); }
-.editor-rounded-lg { border-radius: var(--radius); }
-.editor-rounded-full { border-radius: 9999px; }
-
-/* --- SHADOW --- */
-.editor-shadow-sm { @include shadow-sm; }
-.editor-shadow-md { @include shadow-md; }
-.editor-shadow-lg { @include shadow-lg; }
-
-/* --- BACKGROUNDS --- */
-.editor-bg-background { background-color: var(--background); }
-.editor-bg-primary { background-color: $editor-primary-color; }
-.editor-bg-muted { background-color: var(--muted); }
-.editor-bg-accent { background-color: $editor-accent-color; }
-.editor-bg-transparent { background-color: transparent; }
-.editor-bg-none { background: none; }
-
-/* --- MARGINS --- */
-.editor-mb-2 { margin-bottom: 0.5rem; }
-.editor-mb-3 { margin-bottom: 0.75rem; }
-.editor-mt-1 { margin-top: 0.25rem; }
-.editor-ml-auto { margin-left: auto; }
-.editor-ml-4 { margin-left: 1rem; }
-.editor-px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
-.editor-px-8 { padding-left: 2rem; padding-right: 2rem; }
-.editor-py-18 { padding-top: 18px; padding-bottom: 18px; }
-
-/* --- SIZES --- */
-.editor-h-2 { height: 0.5rem; }
-.editor-w-2 { width: 0.5rem; }
-
-/* --- POSITIONING --- */
-.editor--top-2-5 { top: -0.625rem; }
-.editor--right-2-5 { right: -0.625rem; }
-.editor--bottom-2-5 { bottom: -0.625rem; }
-.editor--left-2-5 { left: -0.625rem; }
-.editor-top-1-2 { top: 50%; }
-.editor-left-1-2 { left: 50%; }
-.editor-translate-x-1-2 { transform: translateX(-50%); }
-.editor-translate-y-1-2 { transform: translateY(-50%); }
-
-/* --- CURSORS --- */
-.editor-cursor-ns-resize { cursor: ns-resize; }
-.editor-cursor-ew-resize { cursor: ew-resize; }
-.editor-cursor-nesw-resize { cursor: nesw-resize; }
-.editor-cursor-nwse-resize { cursor: nwse-resize; }
-
-/* --- TEXT UTILITIES --- */
-.editor-text-muted-xs {
-  font-size: 0.75rem;
-  color: var(--muted-foreground);
-}
-
-.editor-text-sm {
-  font-size: 0.875rem;
-}
-
-.editor-font-medium {
-  font-weight: 500;
-}
-
-/* --- UTILITIES --- */
-.editor-text-muted-foreground { color: var(--muted-foreground); }
-.editor-block { display: block; }
-.editor-inline { display: inline; }
-.editor-inline-block { display: inline-block; }
-.editor-min-h-5 { min-height: 1.25rem; }
-.editor-resize-none { resize: none; }
-.editor-border-0 { border-width: 0; }
-.editor-bg-transparent { background-color: transparent; }
-.editor-px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
-.editor-py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
-.editor-whitespace-pre-wrap { white-space: pre-wrap; }
-.editor-outline-none { outline: 2px solid transparent; outline-offset: 2px; }
-.editor-word-break-break-word { word-break: break-word; }
-.editor-box-border { box-sizing: border-box; }
-.editor-cursor-text { cursor: text; }
-.editor-caret-primary { caret-color: var(--primary); }
-.editor-user-select-text { user-select: text; }
-.editor-cursor-default { cursor: default; }
-.editor-select-text { user-select: text; }
-.editor-top-0 { top: 0; }
-.editor-left-0 { left: 0; }
-.editor-text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.editor-opacity-30 { opacity: 0.3; }
-.editor-p-1 { padding: 0.25rem; }
-.editor-p-2 { padding: 0.5rem; }
-.editor-px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
-.editor-px-0 { padding-left: 0; padding-right: 0; }
-.editor-rotate-90 { transform: rotate(90deg); }
-.editor-transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
-.editor-shrink-0 { flex-shrink: 0; }
-.editor-flex-grow { flex-grow: 1; }
-.editor-flex-end { display: flex; justify-content: flex-end; align-items: center; }
-.editor-ml-auto { margin-left: auto; }
-.editor-ml-4 { margin-left: 1rem; }
-.editor-mr-1-5 { margin-right: 0.375rem; }
-.editor-mt-1 { margin-top: 0.25rem; }
-.editor-mt-2 { margin-top: 0.5rem; }
-.editor-mb-2 { margin-bottom: 0.5rem; }
-.editor-mb-3 { margin-bottom: 0.75rem; }
-.editor-gap-1 { gap: 0.25rem; }
-.editor-gap-2 { gap: 0.5rem; }
-.editor-items-center { align-items: center; }
-.editor-justify-center { justify-content: center; }
-.editor-flex-col { flex-direction: column; }
-.editor-flex-wrap { flex-wrap: wrap; }
-.editor-cursor-pointer { cursor: pointer; }
-.editor-border { border: 1px solid var(--border); }
-.editor-border-transparent { border-color: transparent; }
-.editor-uppercase { text-transform: uppercase; }
-.editor-transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
-.editor-animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
-.editor-whitespace-nowrap { white-space: nowrap; }
-.editor-text-foreground-50 { color: color-mix(in srgb, var(--foreground), transparent 50%); }
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: .5; }
-}
-
-.editor-flex-center-justify-py-8 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-}
-
-.editor-object-cover { object-fit: cover; }
-
-.editor-sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-/* --- ICONS --- */
-.editor-icon-xs { width: 0.75rem; height: 0.75rem; } // 12px
-.editor-icon-sm { width: 1rem; height: 1rem; } // 16px
-.editor-icon-md { width: 1.25rem; height: 1.25rem; } // 20px
-.editor-icon-lg { width: 1.5rem; height: 1.5rem; } // 24px
-.editor-icon-xl { width: 2rem; height: 2rem; } // 32px
-
-/* --- TYPOGRAPHY --- */
-.editor-typography-p {
-  line-height: 1.75rem;
-  &:not(:first-child) { margin-top: 1.5rem; }
-}
-
-.editor-typography-p-small {
-  font-size: 0.875rem;
-  font-weight: 500;
-  line-height: 1;
-}
-
-.editor-typography-span-small-muted {
-  font-size: 0.875rem;
-  color: var(--muted-foreground);
-}
-
-/* --- TOGGLE GROUP --- */
-.editor-toggle-group {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: 0.25rem;
-}
-
-.editor-toggle-group-item {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius);
-  font-size: 0.875rem;
-  font-weight: 500;
-  background-color: transparent;
-  color: var(--foreground);
-  transition: all 0.2s;
-  cursor: pointer;
-  border: 1px solid transparent;
-  padding: 0.5rem;
-  line-height: 1;
-
-  &:hover {
-    background-color: var(--muted);
-    color: var(--muted-foreground);
-  }
-
-  &[data-state="on"] {
-    background-color: $editor-accent-color;
-    color: $editor-accent-foreground-color !important;
-  }
-
-  &--size-sm {
-    padding: 0.25rem;
-    font-size: 0.75rem;
-  }
-
-  &--size-lg {
-    padding: 0.75rem;
-    font-size: 1rem;
-  }
-
-  &--outline {
-    border-color: var(--border);
-    &:hover {
-      background-color: $editor-accent-color;
-      border-color: $editor-accent-color;
-    }
-  }
-
-  &:disabled {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-}
-
-/* --- BUTTON --- */
-.editor-btn {
-  @include flex-center-justify;
-  white-space: nowrap;
-  border-radius: var(--radius);
-  font-weight: 500;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-  @include text-sm;
-  @include focus-ring;
-  border: 1px solid var(--input); // Default border
-  cursor: pointer;
-
-  &:disabled {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-
-  &[data-state="on"] {
-    background-color: $editor-accent-color;
-    color: $editor-accent-foreground-color !important;
-    border-color: $editor-accent-color;
-  }
-
-  &--default {
-    background-color: var(--primary);
-    color: var(--primary-foreground);
-    border-color: var(--primary);
-    &:hover {
-      background-color: color-mix(in srgb, var(--primary), black 10%);
-    }
-  }
-
-  &--destructive {
-    background-color: var(--destructive);
-    color: var(--destructive-foreground);
-    border-color: var(--destructive);
-    &:hover {
-      background-color: color-mix(in srgb, var(--destructive), black 10%);
-    }
-  }
-
-  &--outline {
-    border-color: var(--input);
-    background-color: var(--background);
-    &:hover {
-      background-color: $editor-accent-color;
-      color: $editor-accent-foreground-color;
-    }
-  }
-
-  &--secondary {
-    background-color: var(--secondary);
-    color: var(--secondary-foreground);
-    border-color: transparent;
-    &:hover {
-      background-color: color-mix(in srgb, var(--secondary), black 10%);
-    }
-  }
-
-  &--ghost {
-    background-color: transparent;
-    border-color: transparent;
-    &:hover {
-      background-color: $editor-accent-color;
-      color: $editor-accent-foreground-color;
-    }
-  }
-
-  &--link {
-    color: var(--primary);
-    text-decoration-line: underline;
-    text-underline-offset: 4px;
-    background-color: transparent;
-    &:hover {
-      text-decoration-line: underline;
-    }
-  }
-
-  /* Sizes */
-  &--size-default {
-    height: 2.25rem; /* h-9 */
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-  &--size-sm {
-    height: 2rem; /* h-8 */
-    border-radius: calc(var(--radius) - 2px);
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-    font-size: 0.75rem; /* xs */
-  }
-  &--size-md {
-    height: 2.25rem; /* h-9 */
-    width: 2.25rem; /* w-9 */
-    padding: 0;
-  }
-  &--size-lg {
-    height: 2.5rem; /* h-10 */
-    border-radius: calc(var(--radius) + 2px);
-    padding-left: 2rem;
-    padding-right: 2rem;
-  }
-  &--size-icon {
-    height: 2.25rem; /* h-9 */
-    width: 2.25rem; /* w-9 */
-    padding: 0;
-  }
-}
-
-/* --- BUTTON GROUP --- */
-.editor-button-group {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-/* --- SEPARATOR --- */
-.editor-separator {
-  background-color: var(--border);
-  flex-shrink: 0;
-
-  &--horizontal {
-    height: 1px;
-    width: 100%;
-  }
-
-  &--vertical {
-    width: 1px;
-    height: 100%;
-    min-height: 1.5rem;
-  }
-}
-
-/* --- INPUT --- */
-.editor-input {
-  display: flex;
-  height: 2.25rem; /* h-9 */
-  width: 100%;
-  border-radius: var(--radius);
-  border: 1px solid var(--input);
-  background-color: var(--background);
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  @include text-sm;
-  
-  &::file-selector-button {
-    border: 0;
-    background-color: transparent;
-    font-size: 0.875rem;
-    font-weight: 500;
-  }
-  
-  &::placeholder {
-    color: var(--muted-foreground);
-  }
-  
-  &:focus {
-    border-color: var(--primary);
-    box-shadow: 0 0 0 2px var(--ring);
-    outline: none;
-  }
-  
-  &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--ring), 0 0 0 4px var(--background);
-  }
-  
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  &:hover:not(:disabled):not([readonly]) {
-    background-color: color-mix(in srgb, var(--background), black 3%);
-    color: black !important;
-    border-color: $editor-accent-color;
-    transform: translateY(-1px);
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
-  }
-
-  /* Hide spin buttons for input[type=number] */
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  
-  &[type=number] {
-    -moz-appearance: textfield;
-  }
-}
-
-/* --- INPUT GROUP ITEM --- */
-.editor-input-group-item {
-  &--first {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-  &--middle {
-    border-radius: 0;
-    border-left-width: 0;
-  }
-  &--last {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    border-left-width: 0;
-  }
-}
-
-/* --- LABEL --- */
-.editor-label {
-  @include text-sm;
-  font-weight: 500;
-  line-height: 1;
-  
-  &--disabled {
-    cursor: not-allowed;
-    opacity: 0.7;
-  }
-}
-
-/* --- DIALOG --- */
-@keyframes editor-dialog-zoom-in {
-  from {
-    opacity: 0;
-    transform: translate(-50%, -48%) scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-}
-
-@keyframes editor-fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes editor-popover-zoom-in {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.editor-dialog-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  background-color: rgba(0, 0, 0, 0.4); /* Lighter backdrop for better feel */
-  backdrop-filter: blur(4px);
-  animation: editor-fade-in 0.2s ease-out;
-  
-  &[data-state="open"] {
-    animation: editor-fade-in 0.2s ease-out;
-  }
-}
-
-.editor-dialog-content {
-  position: fixed;
-  left: 50%;
-  top: 50%;
-  z-index: 51;
-  display: grid;
-  width: 100%;
-  max-width: 32rem; /* max-w-lg */
-  transform: translate(-50%, -50%);
-  gap: 1.5rem;
-  border: 1px solid var(--border);
-  background-color: var(--background);
-  padding: 1.5rem;
-  @include shadow-lg;
-  border-radius: calc(var(--radius) + 4px); /* rounded-lg */
-  animation: editor-dialog-zoom-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
-
-  &--lg {
-    max-width: 50rem;
-  }
-
-  &__close {
-    position: absolute;
-    right: 1rem;
-    top: 1rem;
-    border-radius: var(--radius);
-    opacity: 0.7;
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    transition: opacity 0.2s;
-    
-    &:hover {
-      opacity: 1;
-    }
-    
-    @include focus-ring;
-  }
-}
-
-.editor-dialog-header {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem; /* space-y-1.5 */
-  text-align: center;
-  
-  @media (min-width: 640px) {
-    text-align: left;
-  }
-
-  &__title {
-    font-size: 1.125rem; /* text-lg */
-    font-weight: 600;
-    line-height: 1;
-    margin: 0;
-  }
-
-  &__description {
-    @include text-sm;
-    color: var(--muted-foreground);
-    margin: 0;
-  }
-}
-
-.editor-dialog-footer {
-  display: flex;
-  flex-direction: column-reverse;
-  gap: 0.5rem; /* sm:space-x-2 */
-  
-  @media (min-width: 640px) {
-    flex-direction: row;
-    justify-content: flex-end;
-  }
-}
-
-/* --- POPOVER --- */
-.editor-popover-content {
-  z-index: 50;
-  width: 18rem; /* w-72 */
-  border-radius: var(--radius);
-  border: 1px solid var(--border);
-  background-color: var(--popover);
-  color: var(--popover-foreground);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
-  padding: 1rem;
-  outline: none;
-  animation: editor-popover-zoom-in 0.1s ease-out;
-}
-
-/* --- SELECT (Native styling wrapper) --- */
-.editor-select {
-  display: flex;
-  height: 2.25rem; /* h-9 */
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  border-radius: var(--radius);
-  border: 1px solid var(--input);
-  background-color: var(--background);
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  @include text-sm;
-  
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--ring), 0 0 0 4px var(--background);
-  }
-  
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-  
-  /* Sizes */
-  &--size-default {
-    height: 2.25rem; /* h-9 */
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-  }
-  
-  &--size-sm {
-    height: 2rem; /* h-8 */
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    font-size: 0.75rem; /* xs */
-  }
-  
-  &--size-lg {
-    height: 2.5rem; /* h-10 */
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-  
-  &--size-icon {
-    height: 2.25rem; /* h-9 */
-    width: 2.25rem; /* w-9 */
-    padding: 0;
-    justify-content: center;
-    
-    // Hide chevron if it's an icon button, or make it small overlay? 
-    // Usually icon select trigger implies the content IS the icon.
-    .editor-select-icon {
-      display: none; 
-    }
-  }
-
-  &--w-auto {
-    width: auto;
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-    min-width: 7rem; // 112px - Ensures button isn't too narrow
-    justify-content: space-between; // Ensure content is spaced if it's a select
-  }
-
-  &--gap-sm {
-    gap: 0.5rem;
-  }
-}
-
-.editor-select-item {
-  position: relative;
-  display: flex;
-  width: 100%;
-  cursor: pointer;
-  user-select: none;
-  align-items: center;
-  gap: 0.5rem;
-  border-radius: 0.125rem; /* rounded-sm */
-  padding: 0.375rem 0.5rem 0.375rem 2rem; /* py-1.5 pl-8 pr-2 */
-  font-size: 0.875rem; /* text-sm */
-  outline: none;
-
-  &:hover {
-    background-color: $editor-accent-color;
-    color: $editor-accent-foreground-color;
-  }
-  
-  &[data-selected="true"] {
-    background-color: $editor-accent-color;
-    color: $editor-accent-foreground-color;
-  }
-  
-  &__check {
-    position: absolute;
-    left: 0.5rem; /* left-2 */
-    display: flex;
-    height: 0.875rem; /* h-3.5 */
-    width: 0.875rem; /* w-3.5 */
-    align-items: center;
-    justify-content: center;
-  }
-}
-
-.editor-select-label {
-  padding: 0.375rem 0.5rem 0.375rem 2rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
-.editor-block-format-label {
-  max-width: 80px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* --- TOGGLE --- */
-.editor-toggle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: calc(var(--radius) - 2px); // rounded-md
-  font-size: 0.875rem; // text-sm
-  font-weight: 500;
-  transition-property: color, background-color, border-color;
-  transition-duration: 150ms;
-  background-color: transparent;
-  border: 1px solid transparent;
-  cursor: pointer;
-  
-  &:hover {
-    background-color: $editor-accent-color;
-    color: $editor-accent-foreground-color;
-  }
-
-  &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--ring), 0 0 0 4px var(--background);
-  }
-
-  &:disabled {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-
-  &[data-state="on"] {
-    background-color: $editor-accent-color;
-    color: $editor-accent-foreground-color !important;
-  }
-
-  &--outline {
-    border-color: var(--input);
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); // shadow-sm
-    &:hover {
-      background-color: color-mix(in srgb, $editor-accent-color, black 50%);
-      color: $editor-accent-foreground-color;
-    }
-  }
-
-  &--ghost {
-    &:hover {
-      background-color: color-mix(in srgb, $editor-accent-color, black 50%);
-      color: $editor-accent-foreground-color;
-    }
-  }
-
-  &--size-default {
-    height: 2.25rem; // h-9
-    padding-left: 0.75rem; // px-3
-    padding-right: 0.75rem;
-  }
-
-  &--size-sm {
-    height: 2rem; // h-8
-    padding-left: 0.5rem; // px-2
-    padding-right: 0.5rem;
-    font-size: 0.75rem; // text-xs
-  }
-  
-  &--size-lg {
-    height: 2.5rem; // h-10
-    padding-left: 0.75rem; // px-3
-    padding-right: 0.75rem;
-  }
-}
+@use "ui-components/loader";
+@use "ui-components/tabs";
+@use "ui-components/form-layout";
+@use "ui-components/scroll-area";
+@use "ui-components/flex";
+@use "ui-components/positioning";
+@use "ui-components/display-sizing";
+@use "ui-components/rounded";
+@use "ui-components/shadow";
+@use "ui-components/backgrounds";
+@use "ui-components/margins-paddings";
+@use "ui-components/cursors";
+@use "ui-components/text-utilities";
+@use "ui-components/borders";
+@use "ui-components/animations";
+@use "ui-components/icons";
+@use "ui-components/typography";
+@use "ui-components/toggle-toolbar";
+@use "ui-components/button";
+@use "ui-components/separator";
+@use "ui-components/input";
+@use "ui-components/label";
+@use "ui-components/checkbox";
+@use "ui-components/dialog";
+@use "ui-components/popover";
+@use "ui-components/select";
+@use "ui-components/toggle";