opacacms 0.1.0 → 0.1.2

package/src/admin/ui/styles/select.scss

@@ -1,121 +0,0 @@
-.opaca-ui-select {
-  position: relative;
-  width: 100%;
-}
-
-.opaca-ui-select-trigger {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  min-width: 160px;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.8125rem;
-  background-color: var(--opaca-surface);
-  border: 1px solid var(--opaca-border);
-  border-radius: var(--opaca-radius);
-  color: var(--opaca-text);
-  cursor: pointer;
-  transition: all var(--opaca-transition);
-  text-align: left;
-  outline: none;
-
-  &:hover {
-    border-color: var(--opaca-border-hover);
-    background-color: rgba(255, 255, 255, 0.02);
-  }
-
-  &:focus {
-    border-color: var(--opaca-primary);
-    box-shadow: 0 0 0 1px var(--opaca-primary-glow);
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .trigger-placeholder {
-    color: var(--opaca-text-dim);
-  }
-
-  .trigger-icon {
-    color: var(--opaca-text-dim);
-    transition: transform var(--opaca-transition);
-  }
-
-  &[data-state="open"] .trigger-icon {
-    transform: rotate(180deg);
-  }
-}
-
-.opaca-ui-select-portal {
-  position: fixed;
-  z-index: 1000;
-  pointer-events: none;
-}
-
-.opaca-ui-select-content {
-  pointer-events: auto;
-  min-width: 8rem;
-  overflow: hidden;
-  background-color: var(--opaca-card-bg);
-  border: 1px solid var(--opaca-border);
-  border-radius: var(--opaca-radius-lg);
-  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
-  padding: 0.25rem;
-  animation: opaca-select-in 150ms cubic-bezier(0.16, 1, 0.3, 1);
-  transform-origin: top;
-}
-
-@keyframes opaca-select-in {
-  from {
-    opacity: 0;
-    transform: scale(0.95) translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-}
-
-.opaca-ui-select-item {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: 0.375rem 0.5rem;
-  font-size: 0.8125rem;
-  color: var(--opaca-text-muted);
-  border-radius: var(--opaca-radius);
-  cursor: pointer;
-  transition: all var(--opaca-transition);
-  border: none;
-  background: transparent;
-  text-align: left;
-
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.05);
-    color: var(--opaca-text);
-  }
-
-  &[data-selected="true"] {
-    background-color: var(--opaca-primary-glow);
-    color: var(--opaca-accent);
-    font-weight: 500;
-  }
-}
-
-.opaca-ui-select-label {
-  padding: 0.375rem 0.5rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--opaca-text-dim);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.opaca-ui-select-separator {
-  height: 1px;
-  background-color: var(--opaca-border);
-  margin: 0.25rem -0.25rem;
-}

package/src/admin/ui/styles/separator.scss

@@ -1,14 +0,0 @@
-.opaca-separator {
-  flex-shrink: 0;
-  background-color: var(--opaca-border);
-  
-  &.horizontal {
-    height: 1px;
-    width: 100%;
-  }
-  
-  &.vertical {
-    width: 1px;
-    height: 100%;
-  }
-}

package/src/admin/ui/styles/sheet.scss

@@ -1,152 +0,0 @@
-.opaca-ui-sheet-portal {
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.opaca-ui-sheet-overlay {
-  position: fixed;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.8);
-  backdrop-filter: blur(4px);
-  transition: opacity 0.2s;
-  border: none;
-  padding: 0;
-  margin: 0;
-  cursor: default;
-  width: 100%;
-  height: 100%;
-}
-
-.opaca-ui-sheet-wrapper {
-  position: relative;
-  z-index: 10000;
-  height: 100%;
-  pointer-events: none;
-  display: flex;
-  justify-content: flex-end;
-  width: 100%;
-}
-
-.opaca-ui-sheet-content {
-  pointer-events: auto;
-  position: relative;
-  z-index: 50;
-  display: flex;
-  height: 100%;
-  width: 100%;
-  flex-direction: column;
-  border-left: 1px solid var(--opaca-border);
-  background-color: var(--opaca-card-bg);
-  padding: 1.5rem;
-  box-shadow: -10px 0 25px -5px rgba(0, 0, 0, 0.2);
-  overflow-y: auto;
-  animation: opacaSlideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-  color: var(--opaca-text);
-
-  @media (min-width: 640px) {
-    width: 400px;
-    max-width: 100vw;
-  }
-
-  @media (min-width: 1024px) {
-    width: 500px;
-  }
-}
-
-.opaca-ui-sheet-close {
-  position: absolute;
-  right: 1rem;
-  top: 1rem;
-  border-radius: 50%;
-  opacity: 0.7;
-  transition: all 0.2s ease;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem;
-
-  &:hover {
-    opacity: 1;
-    background-color: rgba(255, 255, 255, 0.05);
-    color: var(--opaca-text);
-  }
-
-  &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--opaca-primary);
-  }
-}
-
-.opaca-ui-sheet-close-icon {
-  height: 1rem;
-  width: 1rem;
-  color: var(--opaca-text-muted);
-}
-
-.opaca-ui-sheet-header {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  margin-bottom: 1.5rem;
-  text-align: center;
-
-  @media (min-width: 640px) {
-    text-align: left;
-  }
-}
-
-.opaca-ui-sheet-title {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--opaca-text);
-  margin: 0;
-}
-
-.opaca-ui-sheet-description {
-  font-size: 0.875rem;
-  color: var(--opaca-text-muted);
-  margin: 0;
-}
-
-.opaca-ui-sheet-footer {
-  display: flex;
-  flex-direction: column-reverse;
-  margin-top: auto;
-  padding-top: 1.5rem;
-  border-top: 1px solid var(--opaca-border);
-  gap: 0.75rem;
-
-  @media (min-width: 640px) {
-    flex-direction: row;
-    justify-content: flex-end;
-    gap: 0.5rem;
-  }
-}
-
-.opaca-ui-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;
-}
-
-@keyframes opacaSlideInRight {
-  from {
-    transform: translateX(100%);
-  }
-
-  to {
-    transform: translateX(0);
-  }
-}

package/src/admin/ui/styles/sidebar.scss

@@ -1,148 +0,0 @@
-@use './variables';
-
-.opaca-sidebar {
-  width: var(--opaca-sidebar-width);
-  background-color: var(--opaca-sidebar-bg);
-  border-right: 1px solid var(--opaca-border);
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  transition: width var(--opaca-transition), padding var(--opaca-transition);
-  z-index: 100;
-  overflow: visible;
-  backdrop-filter: blur(10px);
-
-  &.collapsed {
-    width: var(--opaca-sidebar-collapsed-width);
-
-    .opaca-sidebar-inner {
-      padding-left: 0.5rem;
-      padding-right: 0.5rem;
-    }
-
-    .opaca-nav-item {
-      padding-left: 0;
-      padding-right: 0;
-      justify-content: center;
-      gap: 0;
-    }
-
-    .opaca-nav-label {
-      opacity: 0;
-      width: 0;
-    }
-
-    .opaca-sidebar-toggle {
-      right: -12px;
-    }
-  }
-}
-
-.opaca-sidebar-inner {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-  padding: 1.25rem 0.75rem;
-}
-
-.opaca-logo {
-  font-size: 0.875rem;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-  padding: 0 0.75rem;
-  margin-bottom: 2rem;
-  color: var(--opaca-accent);
-  transition: all var(--opaca-transition);
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  min-height: 32px;
-}
-
-.opaca-logo-mini {
-  width: 32px;
-  height: 32px;
-  background-color: rgba(124, 58, 237, 0.1);
-  border: 1px solid rgba(124, 58, 237, 0.2);
-  color: var(--opaca-accent);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--opaca-radius);
-  font-size: 0.875rem;
-  font-weight: 700;
-}
-
-.opaca-nav {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0; // Crucial for flex scrolling
-}
-
-.opaca-nav-item {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  padding: 0.5rem 0.75rem;
-  color: var(--opaca-text-muted);
-  text-decoration: none;
-  border-radius: var(--opaca-radius);
-  transition: all var(--opaca-transition);
-  margin-bottom: 1px;
-  font-size: 0.8125rem;
-  font-weight: 400;
-  white-space: nowrap;
-  overflow: hidden;
-  border: 1px solid transparent;
-
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.05);
-    border-color: rgba(255, 255, 255, 0.05);
-    color: var(--opaca-text);
-  }
-
-  &.active {
-    background-color: var(--opaca-primary-glow);
-    color: var(--opaca-accent);
-    font-weight: 600;
-    box-shadow: inset 2px 0 0 0 var(--opaca-primary);
-  }
-}
-
-.opaca-nav-label {
-  transition: opacity var(--opaca-transition);
-}
-
-.opaca-nav-footer {
-  border-top: 1px solid var(--opaca-border);
-  padding-top: 0.75rem;
-  margin-top: auto;
-  padding-bottom: 0.5rem;
-}
-
-.opaca-sidebar-toggle {
-  position: absolute;
-  top: 25px;
-  right: -12px;
-  width: 24px;
-  height: 24px;
-  background-color: var(--opaca-card-bg);
-  border: 1px solid var(--opaca-border);
-  border-radius: 50%;
-  color: var(--opaca-text-dim);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  z-index: 101;
-  transition: all var(--opaca-transition);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-
-  &:hover {
-    border-color: var(--opaca-accent);
-    color: var(--opaca-accent);
-    background-color: var(--opaca-surface);
-  }
-}

package/src/admin/ui/styles/switch.scss

@@ -1,59 +0,0 @@
-@use './variables';
-
-.opaca-switch {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-  gap: 0.75rem;
-
-  input {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
-
-    &:checked + .opaca-switch-track {
-      background-color: var(--opaca-accent);
-      border-color: var(--opaca-accent);
-
-      .opaca-switch-thumb {
-        left: 18px;
-      }
-    }
-
-    &:disabled + .opaca-switch-track {
-      background: var(--opaca-border);
-      cursor: not-allowed;
-      opacity: 0.6;
-    }
-  }
-}
-
-.opaca-switch-track {
-  width: 36px;
-  height: 20px;
-  background-color: var(--opaca-surface);
-  border: 1px solid var(--opaca-border);
-  border-radius: 20px;
-  position: relative;
-  transition: all var(--opaca-transition);
-}
-
-.opaca-switch-thumb {
-  width: 14px;
-  height: 14px;
-  background-color: white;
-  border-radius: 50%;
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  transition: all var(--opaca-transition);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-.opaca-switch-label {
-  font-size: 0.8125rem;
-  font-weight: 500;
-}

package/src/admin/ui/styles/table.scss

@@ -1,207 +0,0 @@
-@use './variables';
-
-.opaca-table-container {
-  background-color: var(--opaca-card-bg);
-  border: 1px solid var(--opaca-border);
-  border-radius: var(--opaca-radius-lg);
-  overflow: hidden;
-  position: relative;
-}
-
-.opaca-loading-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(9, 9, 11, 0.6);
-  backdrop-filter: blur(2px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10;
-  animation: opaca-fade-in 200ms ease-out;
-}
-
-.opaca-table {
-  width: 100%;
-  border-collapse: collapse;
-
-  th {
-    text-align: left;
-    padding: 0.625rem 1rem;
-    background-color: var(--opaca-surface);
-    color: var(--opaca-text-dim);
-    font-weight: 500;
-    font-size: 0.6875rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    border-bottom: 1px solid var(--opaca-border);
-  }
-
-  td {
-    padding: 0.625rem 1rem;
-    border-bottom: 1px solid var(--opaca-border);
-    font-size: 0.8125rem;
-    color: var(--opaca-text);
-  }
-
-  tr:last-child td {
-    border-bottom: none;
-  }
-
-  tr:hover td {
-    background-color: rgba(255, 255, 255, 0.01);
-  }
-}
-
-/* Premium Table Component (Shadcn-inspired) */
-.opaca-table-wrapper {
-  position: relative;
-  width: 100%;
-  overflow: auto;
-  border-radius: var(--opaca-radius-lg);
-  border: 1px solid var(--opaca-border);
-  background: var(--opaca-card-bg);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-  /* Premium scrollbar */
-  &::-webkit-scrollbar {
-    height: 8px;
-    width: 8px;
-  }
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: var(--opaca-border);
-    border-radius: 10px;
-    &:hover {
-      background: var(--opaca-text-dim);
-    }
-  }
-}
-
-.opaca-new-table {
-  width: 100%;
-  caption-side: bottom;
-  font-size: 0.875rem;
-  border-collapse: collapse;
-
-  .opaca-badge {
-    padding: 0.2rem 0.5rem;
-    font-size: 0.7rem;
-    border-radius: 4px;
-    background: var(--opaca-surface);
-    color: var(--opaca-text-muted);
-    border: 1px solid var(--opaca-border);
-  }
-
-  .opaca-btn-outline {
-    background: transparent;
-    border-color: var(--opaca-border);
-    color: var(--opaca-text-muted);
-
-    &:hover {
-      border-color: var(--opaca-primary);
-      color: var(--opaca-primary);
-    }
-  }
-}
-
-.opaca-table-header {
-  background-color: rgba(255, 255, 255, 0.02);
-  border-bottom: 1px solid var(--opaca-border);
-}
-
-.opaca-table-head {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  background-color: var(--opaca-card-bg);
-  height: 3.5rem;
-  padding: 0 1rem;
-  text-align: left;
-  vertical-align: middle;
-  font-weight: 600;
-  color: var(--opaca-text-muted);
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  white-space: nowrap;
-  min-width: 120px;
-  transition: color 0.2s ease;
-  box-shadow: inset 0 -1px 0 var(--opaca-border);
-
-  &:hover {
-    color: var(--opaca-text);
-  }
-
-  & > div {
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
-    gap: 0.5rem;
-  }
-}
-
-.opaca-table-row {
-  border-bottom: 1px solid var(--opaca-border);
-  transition: background-color var(--opaca-transition);
-
-  &:last-child {
-    border-bottom: 0;
-  }
-
-  &:hover {
-    background-color: var(--opaca-surface);
-  }
-}
-
-.opaca-table-cell {
-  padding: 1rem;
-  vertical-align: middle;
-  color: var(--opaca-text);
-  font-size: 0.875rem;
-  border-bottom: 1px solid var(--opaca-border);
-  max-width: 300px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  &.opaca-cell-interactive {
-    cursor: pointer;
-    transition: all 0.2s ease;
-    border-bottom: 2px solid transparent;
-
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.04);
-      color: var(--opaca-primary);
-      border-bottom-color: var(--opaca-primary);
-    }
-  }
-}
-
-.opaca-table-footer {
-  background-color: rgba(255, 255, 255, 0.02);
-  font-weight: 500;
-}
-
-.opaca-table-caption {
-  margin-top: 1rem;
-  font-size: 0.875rem;
-  color: var(--opaca-text-muted);
-}
-
-.opaca-item-button {
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.05) !important;
-    border-color: var(--opaca-primary) !important;
-  }
-
-  &.active {
-    background-color: rgba(var(--opaca-primary-rgb), 0.1) !important;
-    border-color: var(--opaca-primary) !important;
-    color: var(--opaca-primary);
-  }
-}