sqlite-hub 0.1.3

package/styles/components.css

@@ -0,0 +1,323 @@
+.top-nav-shell {
+  align-items: center;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), transparent);
+  display: flex;
+  height: 100%;
+  justify-content: space-between;
+  padding: 0 var(--spacing-6);
+}
+
+.top-nav-brand {
+  color: var(--color-primary-container);
+  font-family: var(--font-family-headline);
+  font-size: 1.25rem;
+  font-weight: 900;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+}
+
+.top-nav-links {
+  align-items: center;
+  display: none;
+  gap: var(--spacing-4);
+  height: 100%;
+}
+
+.top-nav-link {
+  align-items: center;
+  color: rgba(229, 226, 225, 0.6);
+  display: flex;
+  font-family: var(--font-family-headline);
+  height: 100%;
+  letter-spacing: -0.04em;
+  padding: 0 var(--spacing-2);
+  text-transform: uppercase;
+  transition: background-color var(--transition-fast), color var(--transition-fast);
+}
+
+.top-nav-link:hover {
+  background: var(--color-surface-highest);
+}
+
+.top-nav-link.is-active {
+  border-bottom: 2px solid var(--color-primary-container);
+  color: var(--color-primary-container);
+  padding-bottom: 1px;
+}
+
+.top-nav-actions {
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-2);
+}
+
+.top-nav-icon {
+  align-items: center;
+  color: var(--color-primary-container);
+  display: inline-flex;
+  height: 2rem;
+  justify-content: center;
+  transition: background-color var(--transition-fast);
+  width: 2rem;
+}
+
+.top-nav-icon:hover {
+  background: var(--color-surface-highest);
+}
+
+.sidebar-shell {
+  background: var(--color-surface-low);
+  box-shadow: var(--shadow-sidebar);
+  flex-direction: column;
+  min-height: 0;
+  padding: var(--spacing-4) 0;
+}
+
+.sidebar-links {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-height: 0;
+}
+
+.sidebar-link {
+  align-items: center;
+  color: rgba(229, 226, 225, 0.4);
+  display: flex;
+  font-family: var(--font-family-headline);
+  font-size: 0.75rem;
+  font-weight: 700;
+  gap: var(--spacing-4);
+  letter-spacing: 0.15em;
+  padding: 0.75rem var(--spacing-6);
+  text-transform: uppercase;
+  transition: background-color var(--transition-fast), color var(--transition-fast),
+    border-color var(--transition-fast);
+}
+
+.sidebar-link:hover {
+  background: var(--color-surface-container);
+  color: var(--color-primary-container);
+}
+
+.sidebar-link.is-active {
+  background: var(--color-surface-high);
+  border-left: 2px solid var(--color-primary-container);
+  color: var(--color-primary-container);
+}
+
+.sidebar-footer {
+  margin-top: auto;
+  padding: 0 var(--spacing-6);
+}
+
+.sidebar-footer-card {
+  align-items: center;
+  background: var(--color-surface-lowest);
+  display: flex;
+  gap: var(--spacing-3);
+  padding: var(--spacing-2);
+}
+
+.sidebar-footer-mark {
+  align-items: center;
+  background: var(--color-primary-container);
+  color: var(--color-on-primary);
+  display: flex;
+  font-size: 0.75rem;
+  font-weight: 900;
+  height: 2rem;
+  justify-content: center;
+  width: 2rem;
+}
+
+.status-bar-shell {
+  align-items: center;
+  background: var(--color-surface-lowest);
+  border-top: 1px solid rgba(75, 71, 50, 0.15);
+  display: flex;
+  height: 100%;
+  justify-content: space-between;
+  padding: 0 var(--spacing-4);
+}
+
+.status-bar-primary,
+.status-bar-secondary {
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-4);
+}
+
+.status-bar-text {
+  color: var(--color-primary-container);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-status);
+  letter-spacing: -0.02em;
+}
+
+.status-bar-link {
+  color: rgba(229, 226, 225, 0.3);
+  cursor: default;
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-status);
+  letter-spacing: -0.02em;
+  text-transform: uppercase;
+  transition: color var(--transition-fast);
+}
+
+.status-bar-link:hover {
+  color: var(--color-primary-container);
+}
+
+.status-bar-dot {
+  background: var(--color-success);
+  border-radius: 9999px;
+  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
+  height: 6px;
+  width: 6px;
+}
+
+.shell-section {
+  background: var(--color-surface-container);
+  border: 1px solid rgba(75, 71, 50, 0.12);
+}
+
+.toolbar-button {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--spacing-2);
+  justify-content: center;
+  text-transform: uppercase;
+  transition: background-color var(--transition-fast), box-shadow var(--transition-standard),
+    color var(--transition-fast);
+}
+
+.toolbar-button--primary:hover {
+  box-shadow: var(--shadow-subtle-glow);
+}
+
+.metric-card {
+  background: var(--color-surface-low);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  padding: var(--spacing-6);
+}
+
+.metric-card--accent {
+  border-left: 2px solid var(--color-primary-container);
+}
+
+.status-badge {
+  border: 1px solid transparent;
+  display: inline-flex;
+  font-size: var(--font-size-micro);
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  padding: 0.125rem 0.5rem;
+  text-transform: uppercase;
+}
+
+.status-badge--primary {
+  background: rgba(252, 227, 0, 0.1);
+  border-color: rgba(252, 227, 0, 0.2);
+  color: var(--color-primary-container);
+}
+
+.status-badge--muted {
+  background: var(--color-surface-highest);
+  border-color: rgba(75, 71, 50, 0.2);
+  color: var(--color-on-surface-variant);
+}
+
+.status-badge--alert {
+  background: rgba(147, 0, 10, 0.2);
+  border-color: rgba(255, 180, 171, 0.2);
+  color: var(--color-error);
+}
+
+.status-badge--success {
+  background: rgba(0, 220, 225, 0.1);
+  color: var(--color-tertiary-dim);
+}
+
+.connection-card {
+  background: var(--color-surface-container);
+  border-left: 2px solid transparent;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  text-align: left;
+  transition: background-color var(--transition-fast), border-color var(--transition-fast),
+    box-shadow var(--transition-standard);
+}
+
+.connection-card:hover {
+  background: var(--color-surface-high);
+  border-color: var(--color-outline-variant);
+}
+
+.connection-card.is-active {
+  border-color: var(--color-primary-container);
+  box-shadow: 0 0 20px rgba(252, 227, 0, 0.05);
+}
+
+.connection-card-footer {
+  background: var(--color-surface-highest);
+  height: 4px;
+  width: 100%;
+}
+
+.bottom-tab {
+  border-bottom: 1px solid transparent;
+  color: rgba(205, 199, 171, 0.4);
+  font-size: var(--font-size-status);
+  font-weight: 700;
+  height: 100%;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+}
+
+.bottom-tab.is-active {
+  border-color: var(--color-primary-container);
+  color: var(--color-primary-container);
+}
+
+.page-eyebrow {
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-2);
+  margin-bottom: var(--spacing-2);
+}
+
+.page-eyebrow-line {
+  background: rgba(252, 227, 0, 0.3);
+  height: 1px;
+  width: 48px;
+}
+
+.empty-state-shell {
+  max-width: 42rem;
+  width: 100%;
+}
+
+.view-card {
+  background: var(--color-surface-low);
+  border: 1px solid rgba(75, 71, 50, 0.1);
+}
+
+.view-card-header {
+  align-items: center;
+  background: var(--color-surface-highest);
+  display: flex;
+  justify-content: space-between;
+  padding: var(--spacing-3) var(--spacing-4);
+}
+
+@media (min-width: 768px) {
+  .top-nav-links {
+    display: flex;
+  }
+}

package/styles/layout.css

@@ -0,0 +1,101 @@
+#app {
+  height: 100%;
+}
+
+.app-shell {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.app-top-nav {
+  flex: 0 0 var(--top-nav-height);
+  height: var(--top-nav-height);
+}
+
+.app-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+.app-sidebar {
+  display: none;
+  flex: 0 0 var(--sidebar-width);
+  min-height: 0;
+  width: var(--sidebar-width);
+}
+
+.app-main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.app-main-scroll {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  overflow: auto;
+}
+
+.app-main-scroll--locked {
+  overflow: hidden;
+}
+
+.app-view {
+  height: 100%;
+  min-height: 0;
+}
+
+.app-right-panel {
+  background: var(--color-surface-low);
+  border-left: 1px solid rgba(75, 71, 50, 0.2);
+  box-shadow: var(--shadow-panel);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: 0;
+  transform: translateX(100%);
+  transition: transform var(--transition-standard), opacity var(--transition-fast);
+  width: min(var(--panel-width), 100%);
+  z-index: 30;
+}
+
+.app-shell.panel-open .app-right-panel {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateX(0);
+}
+
+.app-status-bar {
+  flex: 0 0 var(--status-bar-height);
+  height: var(--status-bar-height);
+}
+
+@media (min-width: 768px) {
+  .app-sidebar {
+    display: flex;
+  }
+}
+
+@media (max-width: 767px) {
+  .app-right-panel {
+    bottom: 0;
+    left: 0;
+    width: 100%;
+  }
+}

package/styles/tokens.css

@@ -0,0 +1,49 @@
+:root {
+  --color-background: #131313;
+  --color-surface: #131313;
+  --color-surface-lowest: #0e0e0e;
+  --color-surface-low: #1c1b1b;
+  --color-surface-container: #201f1f;
+  --color-surface-high: #2a2a2a;
+  --color-surface-highest: #353534;
+  --color-surface-bright: #3a3939;
+  --color-primary-container: #fce300;
+  --color-primary-fixed: #fde403;
+  --color-on-primary: #373100;
+  --color-on-surface: #e5e2e1;
+  --color-on-surface-variant: #cdc7ab;
+  --color-outline-variant: #4b4732;
+  --color-error: #ffb4ab;
+  --color-error-container: #93000a;
+  --color-tertiary-dim: #00dce1;
+  --color-grid-dot: rgba(252, 227, 0, 0.03);
+  --color-success: #22c55e;
+  --font-family-headline: "Space Grotesk", sans-serif;
+  --font-family-body: "Inter", sans-serif;
+  --font-family-mono: "Roboto Mono", monospace;
+  --font-size-status: 10px;
+  --font-size-micro: 9px;
+  --font-size-label: 11px;
+  --font-size-icon: 18px;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-8: 32px;
+  --spacing-10: 40px;
+  --radius-none: 0;
+  --top-nav-height: 56px;
+  --status-bar-height: 24px;
+  --sidebar-width: 256px;
+  --panel-width: 480px;
+  --shadow-sidebar: 4px 0 0 0 #131313;
+  --shadow-panel: -20px 0 60px rgba(0, 0, 0, 0.8);
+  --shadow-subtle-glow: 0 0 15px rgba(252, 227, 0, 0.3);
+  --shadow-strong-glow: 0 0 20px rgba(252, 227, 0, 0.3);
+  --transition-fast: 150ms ease;
+  --transition-standard: 300ms ease;
+  --duration-cursor-blink: 1s;
+  --scrollbar-size: 4px;
+}

package/styles/views.css

@@ -0,0 +1,84 @@
+.machined-grid {
+  background-image: radial-gradient(var(--color-grid-dot) 1px, transparent 1px);
+  background-size: 32px 32px;
+}
+
+.data-grid-texture {
+  background-image: radial-gradient(var(--color-primary-container) 1px, transparent 1px);
+  background-size: 24px 24px;
+  opacity: 0.03;
+}
+
+.view-surface {
+  background: var(--color-surface);
+  min-height: 100%;
+}
+
+.view-frame {
+  min-height: 100%;
+  padding: var(--spacing-8);
+}
+
+.view-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+
+.landing-view {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  min-height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.landing-accent {
+  background: rgba(75, 71, 50, 0.2);
+  height: 1px;
+  position: absolute;
+}
+
+.landing-accent--a {
+  left: 3rem;
+  top: 2.5rem;
+  transform: rotate(45deg);
+  width: 8rem;
+}
+
+.landing-accent--b {
+  bottom: 2.5rem;
+  right: 3rem;
+  transform: rotate(-12deg);
+  width: 16rem;
+}
+
+.landing-accent--c {
+  border-bottom: 1px solid rgba(75, 71, 50, 0.12);
+  border-right: 1px solid rgba(75, 71, 50, 0.12);
+  height: 4rem;
+  left: 0;
+  top: 50%;
+  width: 4rem;
+}
+
+.system-placeholder-grid {
+  display: grid;
+  gap: var(--spacing-4);
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+
+.system-placeholder-card {
+  background: var(--color-surface-low);
+  border-bottom: 2px solid rgba(49, 48, 48, 1);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-height: 160px;
+  padding: var(--spacing-6);
+}
+
+.system-placeholder-card.is-primary {
+  border-bottom-color: var(--color-primary-container);
+}