xaura 1.0.0

package/css/components/special.css

@@ -0,0 +1,402 @@
+/* ============================================================
+   SPECIAL xaura COMPONENTS
+   ============================================================ */
+
+/* Glow Box */
+.xaura-glow-box {
+  background: var(--xaura-surface-1);
+  border: var(--xaura-border-energy);
+  border-radius: var(--xaura-radius-xl);
+  padding: var(--xaura-space-8);
+  position: relative;
+  box-shadow: var(--xaura-glow-sm), inset 0 1px 0 rgba(0,229,255,0.1);
+}
+.xaura-glow-box::before {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  background: linear-gradient(135deg, rgba(0,229,255,0.15), transparent, rgba(108,92,231,0.15));
+  pointer-events: none;
+}
+
+/* Panel */
+.xaura-panel {
+  background: var(--xaura-surface-1);
+  border: var(--xaura-border);
+  border-radius: var(--xaura-radius-lg);
+  overflow: hidden;
+}
+.xaura-panel-header {
+  padding: var(--xaura-space-4) var(--xaura-space-6);
+  border-bottom: var(--xaura-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--xaura-surface-2);
+}
+.xaura-panel-body { padding: var(--xaura-space-6); }
+
+.xaura-panel-energy {
+  border-color: rgba(0,229,255,0.3);
+  box-shadow: 0 0 0 1px rgba(0,229,255,0.05), inset 0 0 40px rgba(0,229,255,0.03);
+}
+.xaura-panel-energy .xaura-panel-header {
+  border-bottom-color: rgba(0,229,255,0.2);
+  background: rgba(0,229,255,0.05);
+}
+
+/* Energy Ring */
+.xaura-energy-ring {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.xaura-energy-ring svg {
+  position: absolute;
+  top: 0; left: 0;
+  transform: rotate(-90deg);
+}
+.xaura-energy-ring-track { fill: none; stroke: rgba(108,92,231,0.2); }
+.xaura-energy-ring-fill {
+  fill: none;
+  stroke: var(--xaura-energy);
+  stroke-linecap: round;
+  stroke-dasharray: 283;
+  stroke-dashoffset: 283;
+  transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
+  filter: drop-shadow(0 0 4px var(--xaura-energy));
+}
+.xaura-energy-ring-value {
+  font-family: var(--font-power);
+  font-weight: 700;
+  font-size: 1.4rem;
+  color: var(--xaura-energy);
+  text-shadow: 0 0 10px rgba(0,229,255,0.5);
+  z-index: 1;
+}
+
+/* Power Meter */
+.xaura-power-meter {
+  background: var(--xaura-surface-2);
+  border: var(--xaura-border);
+  border-radius: var(--xaura-radius-lg);
+  padding: var(--xaura-space-5);
+  position: relative;
+  overflow: hidden;
+}
+.xaura-power-meter-label {
+  font-family: var(--font-power);
+  font-size: 0.65rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--xaura-text-muted);
+  margin-bottom: var(--xaura-space-2);
+}
+.xaura-power-meter-value {
+  font-family: var(--font-power);
+  font-size: 2.5rem;
+  font-weight: 900;
+  background: var(--xaura-gradient-cosmic);
+  background-size: 200% auto;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: xaura-gradient-shift 3s linear infinite;
+  line-height: 1;
+  margin-bottom: var(--xaura-space-3);
+}
+.xaura-power-meter-bar {
+  height: 6px;
+  background: var(--xaura-surface-3);
+  border-radius: var(--xaura-radius-full);
+  overflow: hidden;
+}
+.xaura-power-meter-fill {
+  height: 100%;
+  background: var(--xaura-gradient-cosmic);
+  background-size: 200% auto;
+  border-radius: var(--xaura-radius-full);
+  animation: xaura-gradient-shift 2s linear infinite;
+  box-shadow: 0 0 8px var(--xaura-power);
+  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.xaura-power-meter::after {
+  content: '';
+  position: absolute;
+  top: -50%; left: -20%;
+  width: 50%; height: 200%;
+  background: rgba(255,255,255,0.02);
+  transform: skew(-20deg);
+  animation: xaura-scan 3s linear infinite;
+}
+
+/* Status Indicator */
+.xaura-status {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--xaura-space-2);
+  font-size: 0.8rem;
+  font-weight: 500;
+}
+.xaura-status-dot {
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  position: relative;
+}
+.xaura-status-dot::after {
+  content: '';
+  position: absolute;
+  inset: -3px;
+  border-radius: 50%;
+  background: inherit;
+  opacity: 0.3;
+  animation: xaura-pulse-opacity 1.5s ease infinite;
+}
+.xaura-status-online  .xaura-status-dot { background: var(--xaura-success); box-shadow: 0 0 6px var(--xaura-success); }
+.xaura-status-offline .xaura-status-dot { background: var(--xaura-text-dim); }
+.xaura-status-danger  .xaura-status-dot { background: var(--xaura-danger); box-shadow: 0 0 6px var(--xaura-danger); }
+.xaura-status-warning .xaura-status-dot { background: var(--xaura-warning); box-shadow: 0 0 6px var(--xaura-warning); }
+
+/* Breadcrumb */
+.xaura-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: var(--xaura-space-2);
+  font-size: 0.8rem;
+  color: var(--xaura-text-muted);
+}
+.xaura-breadcrumb-item { color: var(--xaura-text-muted); text-decoration: none; transition: color 0.2s; }
+.xaura-breadcrumb-item:hover { color: var(--xaura-energy); }
+.xaura-breadcrumb-item.current { color: var(--xaura-text); font-weight: 500; }
+.xaura-breadcrumb-sep { color: var(--xaura-text-dim); }
+
+/* Stepper */
+.xaura-stepper {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+.xaura-step {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+.xaura-step-dot {
+  width: 36px; height: 36px;
+  border-radius: 50%;
+  border: 2px solid rgba(108,92,231,0.3);
+  background: var(--xaura-surface-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-power);
+  font-size: 0.75rem;
+  color: var(--xaura-text-muted);
+  flex-shrink: 0;
+  transition: var(--xaura-transition);
+}
+.xaura-step.active .xaura-step-dot {
+  border-color: var(--xaura-energy);
+  color: var(--xaura-energy);
+  box-shadow: var(--xaura-glow-sm);
+  background: rgba(0,229,255,0.1);
+}
+.xaura-step.done .xaura-step-dot {
+  border-color: var(--xaura-success);
+  background: var(--xaura-success);
+  color: var(--xaura-dark);
+  box-shadow: var(--xaura-glow-success);
+}
+.xaura-step-line {
+  flex: 1;
+  height: 2px;
+  background: rgba(108,92,231,0.2);
+  margin: 0 var(--xaura-space-2);
+}
+.xaura-step.done .xaura-step-line {
+  background: var(--xaura-gradient-energy);
+  box-shadow: 0 0 6px rgba(0,229,255,0.3);
+}
+
+/* Activity Feed */
+.xaura-activity-feed {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+.xaura-activity-item {
+  display: flex;
+  gap: var(--xaura-space-4);
+  padding-bottom: var(--xaura-space-5);
+  position: relative;
+}
+.xaura-activity-item::before {
+  content: '';
+  position: absolute;
+  left: 14px;
+  top: 28px;
+  bottom: 0;
+  width: 1px;
+  background: rgba(108,92,231,0.2);
+}
+.xaura-activity-item:last-child::before { display: none; }
+.xaura-activity-icon {
+  width: 30px; height: 30px;
+  border-radius: 50%;
+  border: var(--xaura-border-energy);
+  background: rgba(0,229,255,0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.8rem;
+  color: var(--xaura-energy);
+  flex-shrink: 0;
+}
+.xaura-activity-content { flex: 1; }
+.xaura-activity-text { font-size: 0.875rem; color: var(--xaura-text); line-height: 1.5; }
+.xaura-activity-time { font-size: 0.75rem; color: var(--xaura-text-dim); margin-top: 2px; }
+
+/* Popover */
+.xaura-popover-wrap { position: relative; display: inline-block; }
+.xaura-popover {
+  position: absolute;
+  bottom: calc(100% + 10px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--xaura-surface-2);
+  border: var(--xaura-border-energy);
+  border-radius: var(--xaura-radius-lg);
+  padding: var(--xaura-space-4) var(--xaura-space-5);
+  min-width: 220px;
+  box-shadow: var(--xaura-glow-sm), 0 16px 40px rgba(0,0,0,0.4);
+  opacity: 0;
+  pointer-events: none;
+  transition: all 0.2s ease;
+  transform: translateX(-50%) translateY(8px);
+  z-index: 100;
+}
+.xaura-popover-wrap:hover .xaura-popover, .xaura-popover-wrap.open .xaura-popover {
+  opacity: 1;
+  pointer-events: all;
+  transform: translateX(-50%) translateY(0);
+}
+
+/* Rating */
+.xaura-rating {
+  display: flex;
+  gap: 4px;
+}
+.xaura-rating-star {
+  font-size: 1.2rem;
+  cursor: pointer;
+  transition: var(--xaura-transition);
+  filter: grayscale(1) opacity(0.3);
+}
+.xaura-rating-star.active {
+  filter: none;
+  text-shadow: 0 0 8px var(--xaura-warning);
+}
+.xaura-rating-star:hover { transform: scale(1.2); }
+
+/* Scroll Area */
+.xaura-scroll-area {
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(108,92,231,0.4) transparent;
+}
+.xaura-scroll-area::-webkit-scrollbar { width: 6px; height: 6px; }
+.xaura-scroll-area::-webkit-scrollbar-track { background: transparent; }
+.xaura-scroll-area::-webkit-scrollbar-thumb {
+  background: rgba(108,92,231,0.4);
+  border-radius: 3px;
+}
+.xaura-scroll-area::-webkit-scrollbar-thumb:hover { background: var(--xaura-primary); }
+
+/* Theme Switch */
+.xaura-theme-switch {
+  background: var(--xaura-surface-2);
+  border: var(--xaura-border);
+  border-radius: var(--xaura-radius-full);
+  padding: 4px;
+  display: inline-flex;
+  gap: 4px;
+}
+.xaura-theme-btn {
+  padding: 6px 14px;
+  border-radius: var(--xaura-radius-full);
+  background: none;
+  border: none;
+  color: var(--xaura-text-muted);
+  font-size: 0.8rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--xaura-transition);
+}
+.xaura-theme-btn.active {
+  background: var(--xaura-gradient-energy);
+  color: var(--xaura-dark);
+  font-weight: 700;
+}
+
+/* Keyboard Shortcut */
+.xaura-kbd {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  background: var(--xaura-surface-3);
+  border: var(--xaura-border);
+  border-bottom-width: 2px;
+  border-radius: var(--xaura-radius-sm);
+  font-family: var(--font-power);
+  font-size: 0.65rem;
+  letter-spacing: 0.05em;
+  color: var(--xaura-text-muted);
+}
+
+/* Copy Button */
+.xaura-code-block {
+  position: relative;
+  background: var(--xaura-surface-2);
+  border: var(--xaura-border);
+  border-radius: var(--xaura-radius-md);
+  padding: var(--xaura-space-5);
+  font-family: 'Courier New', monospace;
+  font-size: 0.85rem;
+  color: var(--xaura-energy);
+  overflow: auto;
+}
+.xaura-copy-btn {
+  position: absolute;
+  top: var(--xaura-space-3);
+  right: var(--xaura-space-3);
+  padding: 4px 10px;
+  background: rgba(0,229,255,0.1);
+  border: 1px solid rgba(0,229,255,0.3);
+  border-radius: var(--xaura-radius-sm);
+  color: var(--xaura-energy);
+  font-size: 0.7rem;
+  cursor: pointer;
+  transition: var(--xaura-transition);
+  font-family: var(--font-power);
+  letter-spacing: 0.05em;
+}
+.xaura-copy-btn:hover { background: rgba(0,229,255,0.2); box-shadow: var(--xaura-glow-sm); }
+
+/* Hero Helpers */
+.xaura-hero {
+  position: relative;
+  overflow: hidden;
+  padding-block: var(--xaura-space-16);
+  text-align: center;
+}
+.xaura-hero-bg {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(108,92,231,0.2), transparent 70%),
+              radial-gradient(ellipse 50% 40% at 80% 80%, rgba(0,229,255,0.1), transparent 60%),
+              radial-gradient(ellipse 60% 40% at 20% 80%, rgba(255,43,214,0.08), transparent 60%);
+  pointer-events: none;
+}

package/css/components/table.css

@@ -0,0 +1,38 @@
+/* ============================================================
+   TABLE
+   ============================================================ */
+.xaura-table-wrap {
+  overflow-x: auto;
+  border-radius: var(--xaura-radius-lg);
+  border: var(--xaura-border);
+}
+.xaura-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+.xaura-table thead {
+  background: var(--xaura-surface-2);
+  border-bottom: var(--xaura-border);
+}
+.xaura-table th {
+  padding: 12px 16px;
+  text-align: left;
+  font-family: var(--font-power);
+  font-size: 0.65rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--xaura-text-muted);
+}
+.xaura-table td {
+  padding: 12px 16px;
+  border-bottom: 1px solid rgba(108,92,231,0.1);
+  color: var(--xaura-text);
+}
+.xaura-table tbody tr {
+  transition: var(--xaura-transition);
+}
+.xaura-table tbody tr:hover {
+  background: rgba(0,229,255,0.04);
+}
+.xaura-table tbody tr:last-child td { border-bottom: none; }

package/css/components/tabs.css

@@ -0,0 +1,38 @@
+/* ============================================================
+   TABS
+   ============================================================ */
+.xaura-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--xaura-space-6);
+}
+
+.xaura-tabs-nav {
+  display: flex;
+  gap: var(--xaura-space-1);
+  border-bottom: 1px solid rgba(108,92,231,0.2);
+  padding-bottom: 0;
+}
+
+.xaura-tab-btn {
+  padding: 8px 20px;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--xaura-text-muted);
+  font-family: var(--font-ui);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--xaura-transition);
+  margin-bottom: -1px;
+}
+.xaura-tab-btn:hover { color: var(--xaura-text); }
+.xaura-tab-btn.active {
+  color: var(--xaura-energy);
+  border-bottom-color: var(--xaura-energy);
+  text-shadow: 0 0 8px rgba(0,229,255,0.5);
+}
+
+.xaura-tab-panel { display: none; animation: xaura-fade-in 0.3s ease; }
+.xaura-tab-panel.active { display: block; }

package/css/components/tooltip.css

@@ -0,0 +1,37 @@
+/* ============================================================
+   TOOLTIP
+   ============================================================ */
+.xaura-tooltip-wrap {
+  position: relative;
+  display: inline-flex;
+}
+.xaura-tooltip {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--xaura-surface-3);
+  color: var(--xaura-text);
+  padding: 6px 12px;
+  border-radius: var(--xaura-radius-sm);
+  font-size: 0.75rem;
+  white-space: nowrap;
+  border: var(--xaura-border);
+  box-shadow: var(--xaura-glow-sm);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  transform: translateX(-50%) translateY(4px);
+}
+.xaura-tooltip::after {
+  content: '';
+  position: absolute;
+  top: 100%; left: 50%;
+  transform: translateX(-50%);
+  border: 5px solid transparent;
+  border-top-color: var(--xaura-surface-3);
+}
+.xaura-tooltip-wrap:hover .xaura-tooltip {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}

package/css/core/index.css

@@ -0,0 +1,4 @@
+/* ============================================================
+   CORE — FONTS & BASE IMPORTS
+   ============================================================ */
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

package/css/effects/index.css

@@ -0,0 +1,68 @@
+/* ============================================================
+   KEYFRAME ANIMATIONS
+   ============================================================ */
+@keyframes xaura-pulse-glow {
+  0%, 100% { box-shadow: var(--xaura-glow-sm); }
+  50%       { box-shadow: var(--xaura-glow-md); }
+}
+@keyframes xaura-pulse-opacity {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.6; }
+}
+@keyframes xaura-float {
+  0%, 100% { transform: translateY(0); }
+  50%       { transform: translateY(-8px); }
+}
+@keyframes xaura-charge {
+  from { width: 0%; }
+  to   { width: 100%; }
+}
+@keyframes xaura-spin-energy {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+@keyframes xaura-spin-reverse {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(-360deg); }
+}
+@keyframes xaura-wave {
+  0%   { transform: scale(1); opacity: 0.8; }
+  100% { transform: scale(2.5); opacity: 0; }
+}
+@keyframes xaura-gradient-shift {
+  0%   { background-position: 0% 50%; }
+  50%  { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+@keyframes xaura-border-glow {
+  0%, 100% { border-color: var(--xaura-primary); }
+  33%       { border-color: var(--xaura-energy); }
+  66%       { border-color: var(--xaura-power); }
+}
+@keyframes xaura-slide-in {
+  from { transform: translateY(-16px); opacity: 0; }
+  to   { transform: translateY(0); opacity: 1; }
+}
+@keyframes xaura-slide-up {
+  from { transform: translateY(16px); opacity: 0; }
+  to   { transform: translateY(0); opacity: 1; }
+}
+@keyframes xaura-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes xaura-scale-in {
+  from { transform: scale(0.85); opacity: 0; }
+  to   { transform: scale(1); opacity: 1; }
+}
+@keyframes xaura-scan {
+  0%   { transform: translateY(-100%); opacity: 0.6; }
+  100% { transform: translateY(100%); opacity: 0; }
+}
+@keyframes xaura-shimmer {
+  0%   { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+@keyframes xaura-ring-spin {
+  to { stroke-dashoffset: 0; }
+}

package/css/layout/index.css

@@ -0,0 +1,66 @@
+/* ============================================================
+   LAYOUT
+   ============================================================ */
+.xaura-container {
+  width: 100%;
+  max-width: 1280px;
+  margin-inline: auto;
+  padding-inline: var(--xaura-space-6);
+}
+
+.xaura-section {
+  padding-block: var(--xaura-space-16);
+}
+
+.xaura-grid {
+  display: grid;
+  gap: var(--xaura-space-6);
+}
+.xaura-grid-2 { grid-template-columns: repeat(2, 1fr); }
+.xaura-grid-3 { grid-template-columns: repeat(3, 1fr); }
+.xaura-grid-4 { grid-template-columns: repeat(4, 1fr); }
+
+.xaura-auto-grid {
+  display: grid;
+  gap: var(--xaura-space-6);
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+}
+
+.xaura-flex       { display: flex; }
+.xaura-flex-col   { display: flex; flex-direction: column; }
+.xaura-flex-center { display: flex; align-items: center; justify-content: center; }
+.xaura-gap-1 { gap: var(--xaura-space-1); }
+.xaura-gap-2 { gap: var(--xaura-space-2); }
+.xaura-gap-3 { gap: var(--xaura-space-3); }
+.xaura-gap-4 { gap: var(--xaura-space-4); }
+.xaura-gap-6 { gap: var(--xaura-space-6); }
+.xaura-gap-8 { gap: var(--xaura-space-8); }
+
+.xaura-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--xaura-space-4);
+}
+
+.xaura-divider {
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--xaura-primary), var(--xaura-energy), transparent);
+  border: none;
+  opacity: 0.5;
+  margin-block: var(--xaura-space-6);
+}
+
+.xaura-spacer { flex: 1; }
+
+/* ============================================================
+   RESPONSIVE
+   ============================================================ */
+@media (max-width: 1024px) {
+  .xaura-grid-4 { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 768px) {
+  .xaura-grid-2, .xaura-grid-3, .xaura-grid-4 { grid-template-columns: 1fr; }
+  .xaura-navbar-nav { display: none; }
+  .xaura-container { padding-inline: var(--xaura-space-4); }
+  .xaura-sidebar { width: 100%; height: auto; position: relative; }
+}

package/css/reset/index.css

@@ -0,0 +1,20 @@
+/* ============================================================
+   RESET & BASE
+   ============================================================ */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-ui);
+  background-color: var(--xaura-dark);
+  color: var(--xaura-text);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+}