enya-agent 0.1.0

package/docs/themes/tanuki/sass/components/_sidebar.scss

@@ -0,0 +1,473 @@
+// =============================================================================
+// Sidebar & Table of Contents
+// =============================================================================
+
+// -----------------------------------------------------------------------------
+// Sidebar Container
+// -----------------------------------------------------------------------------
+
+.sidebar {
+  --sidebar-width: 280px;
+  --sidebar-min-width: 200px;
+  --sidebar-max-width: 500px;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  max-width: 100vw;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-bg);
+  border-right: none;
+  transform: translateX(-100%);
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 200;
+  overflow: hidden;
+
+  // Desktop: resizable sidebar
+  @media (min-width: 1024px) {
+    position: sticky;
+    top: 0;
+    height: 100vh;
+    width: var(--sidebar-width);
+    min-width: var(--sidebar-min-width);
+    max-width: var(--sidebar-max-width);
+    background: var(--color-bg-alt);
+    border-right: 1px solid var(--color-border);
+    transform: translateX(0);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+                width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+                margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  &.open {
+    transform: translateX(0);
+  }
+
+  // Collapsed state (docs mode - desktop only)
+  &.collapsed {
+    @media (min-width: 1024px) {
+      width: 0;
+      min-width: 0;
+      border-right: none;
+      overflow: hidden;
+    }
+  }
+}
+
+// Overlay for mobile
+.sidebar-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s ease;
+  z-index: 199;
+
+  &.visible {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  @media (min-width: 1024px) {
+    display: none;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Sidebar Header
+// -----------------------------------------------------------------------------
+
+.sidebar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--color-border);
+  min-height: 60px;
+
+  @media (min-width: 1024px) {
+    padding: 1rem 1.25rem;
+    min-height: auto;
+  }
+}
+
+.sidebar__title {
+  font-size: var(--text-base);
+  font-weight: var(--font-semibold);
+  color: var(--color-text);
+}
+
+.sidebar__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  color: var(--color-text-muted);
+  background: var(--color-bg-alt);
+  border-radius: 8px;
+  transition: all 0.2s ease;
+
+  @media (min-width: 1024px) {
+    display: none;
+  }
+
+  &:hover,
+  &:active {
+    background: var(--color-bg-hover);
+    color: var(--color-text);
+  }
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Sidebar Content (scrollable)
+// -----------------------------------------------------------------------------
+
+.sidebar__content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem 0;
+}
+
+// -----------------------------------------------------------------------------
+// Table of Contents
+// -----------------------------------------------------------------------------
+
+.toc {
+  padding: 0 0.75rem;
+}
+
+.toc__section {
+  margin-bottom: 1.5rem;
+}
+
+.toc__section-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  font-size: var(--text-xs);
+  font-weight: var(--font-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--color-text-muted);
+  text-decoration: none;
+  border-radius: var(--radius-sm, 4px);
+  transition: color 0.15s ease, background-color 0.15s ease;
+
+  &:hover {
+    color: var(--color-text);
+    background-color: var(--color-bg-elevated);
+  }
+
+  &.active {
+    color: var(--color-accent);
+    background-color: rgba(var(--color-accent-rgb, 203, 166, 247), 0.1);
+  }
+}
+
+.toc__list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+// Numbered chapter list (docs mode)
+.toc__list--numbered {
+  counter-reset: none; // We use manual numbers via template
+}
+
+.toc__number {
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-muted);
+  min-width: 1.5em;
+  font-size: var(--text-xs);
+}
+
+.toc__item {
+  position: relative;
+}
+
+.toc__link {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  border-radius: 6px;
+  transition: all 0.15s ease;
+
+  &:hover {
+    background: var(--color-bg-surface);
+    color: var(--color-text);
+    text-decoration: none;
+  }
+
+  // Active state with Nintendo-style indicator
+  &.active {
+    background: rgba(203, 166, 247, 0.1);
+    color: var(--color-accent);
+    font-weight: var(--font-medium);
+
+    // Left indicator bar
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 3px;
+      height: 60%;
+      background: var(--color-accent);
+      border-radius: 0 3px 3px 0;
+    }
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    color: var(--color-text-muted);
+  }
+}
+
+// Nested items
+.toc__list--nested {
+  margin-left: 1rem;
+  padding-left: 0.75rem;
+  border-left: 1px solid var(--color-border);
+
+  .toc__link {
+    font-size: 0.8125rem;
+    padding: 0.4rem 0.75rem;
+  }
+}
+
+// Collapsible sections
+.toc__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-left: auto;
+  color: var(--color-text-muted);
+  border-radius: 4px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: var(--color-bg-overlay);
+    color: var(--color-text);
+  }
+
+  svg {
+    width: 14px;
+    height: 14px;
+    transition: transform 0.2s ease;
+  }
+
+  &[aria-expanded="true"] svg {
+    transform: rotate(90deg);
+  }
+}
+
+.toc__collapsible {
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height 0.3s ease;
+
+  &.open {
+    max-height: 1000px;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Sidebar Footer
+// -----------------------------------------------------------------------------
+
+.sidebar__footer {
+  padding: 1rem 1.25rem;
+  border-top: 1px solid var(--color-border);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+// Mobile-only actions (hidden on desktop)
+.sidebar__actions-mobile {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  @media (min-width: 1024px) {
+    display: none;
+  }
+}
+
+.sidebar__action {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sidebar__action-label {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--color-text-secondary);
+}
+
+.sidebar__version {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.sidebar__version-current {
+  padding: 0.25rem 0.5rem;
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  background: var(--ctp-green);
+  color: var(--ctp-base);
+  border-radius: 4px;
+}
+
+.sidebar__version-link {
+  font-size: var(--text-sm);
+  color: var(--color-text-muted);
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: var(--color-accent);
+  }
+}
+
+.sidebar__github {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--color-text-secondary);
+  background: var(--color-bg-surface);
+  border-radius: 8px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    color: var(--color-text);
+    background: var(--color-bg-overlay);
+    text-decoration: none;
+  }
+
+  svg {
+    flex-shrink: 0;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Resize Handle (Desktop only)
+// -----------------------------------------------------------------------------
+
+.sidebar__resize-handle {
+  display: none;
+
+  @media (min-width: 1024px) {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: -6px;
+    width: 12px;
+    height: 100%;
+    cursor: col-resize;
+    background: transparent;
+    z-index: 300; // Above header
+
+    // Pill background with border
+    &::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 8px;
+      height: 32px;
+      background: var(--color-bg);
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      transition: all 0.15s ease;
+    }
+
+    // Grip dots on top
+    &::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 4px;
+      height: 16px;
+      background: repeating-linear-gradient(
+        to bottom,
+        var(--color-text-muted) 0px,
+        var(--color-text-muted) 2px,
+        transparent 2px,
+        transparent 5px
+      );
+      border-radius: 1px;
+      opacity: 0.5;
+      z-index: 1;
+      transition: opacity 0.15s ease;
+    }
+
+    &:hover {
+      &::after {
+        background: var(--color-bg-elevated);
+        border-color: var(--color-accent);
+      }
+
+      &::before {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+// Active resizing state
+.sidebar.resizing {
+  transition: none !important;
+  user-select: none;
+}
+
+.sidebar.resizing .sidebar__resize-handle {
+  &::after {
+    background: var(--color-bg-elevated);
+    border-color: var(--color-accent);
+    box-shadow: 0 0 0 2px rgba(203, 166, 247, 0.2);
+  }
+
+  &::before {
+    opacity: 1;
+  }
+}
+
+// Body class during resize to prevent text selection
+body.sidebar-resizing {
+  cursor: col-resize !important;
+  user-select: none !important;
+}
+
+// Note: Sidebar toggle button styles are in _navigation.scss

package/docs/themes/tanuki/sass/components/_theme-toggle.scss

@@ -0,0 +1,186 @@
+// =============================================================================
+// Theme Toggle - Nintendo-inspired whimsical animation
+// =============================================================================
+
+.theme-toggle {
+  --toggle-size: 44px;
+  --icon-size: 20px;
+
+  position: relative;
+  width: var(--toggle-size);
+  height: var(--toggle-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-bg-surface);
+  border: 2px solid var(--color-border);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  overflow: hidden;
+
+  // Subtle glow effect
+  &::before {
+    content: "";
+    position: absolute;
+    inset: -2px;
+    border-radius: 50%;
+    background: radial-gradient(
+      circle,
+      var(--color-accent) 0%,
+      transparent 70%
+    );
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    z-index: -1;
+  }
+
+  &:hover {
+    transform: scale(1.1);
+    border-color: var(--color-accent);
+    box-shadow: var(--shadow-glow);
+
+    &::before {
+      opacity: 0.2;
+    }
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  // Focus ring
+  &:focus-visible {
+    outline: none;
+    border-color: var(--color-accent);
+    box-shadow: 0 0 0 3px rgba(203, 166, 247, 0.3);
+  }
+}
+
+// Icon container
+.theme-toggle__icons {
+  position: relative;
+  width: var(--icon-size);
+  height: var(--icon-size);
+}
+
+// All theme icons share these base styles
+.theme-toggle__sun,
+.theme-toggle__moon,
+.theme-toggle__auto {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+  opacity: 0;
+  transform: rotate(-90deg) scale(0.5);
+
+  svg {
+    width: var(--icon-size);
+    height: var(--icon-size);
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    fill: none;
+  }
+}
+
+// Icon colors
+.theme-toggle__sun {
+  color: var(--ctp-yellow);
+}
+
+.theme-toggle__moon {
+  color: var(--ctp-blue);
+}
+
+.theme-toggle__auto {
+  color: var(--ctp-lavender);
+}
+
+// Icon visibility based on current theme setting
+// Sun = light theme, Moon = dark theme, Eclipse = auto/system
+
+// Default: show moon (dark is default)
+.theme-toggle__moon {
+  opacity: 1;
+  transform: rotate(0deg) scale(1);
+}
+
+// When setting is light: show sun
+[data-theme-setting="light"] .theme-toggle {
+  .theme-toggle__moon {
+    opacity: 0;
+    transform: rotate(-90deg) scale(0.5);
+  }
+  .theme-toggle__sun {
+    opacity: 1;
+    transform: rotate(0deg) scale(1);
+  }
+}
+
+// When setting is dark: show moon
+[data-theme-setting="dark"] .theme-toggle {
+  .theme-toggle__moon {
+    opacity: 1;
+    transform: rotate(0deg) scale(1);
+  }
+}
+
+// When setting is auto: show eclipse
+[data-theme-setting="auto"] .theme-toggle {
+  .theme-toggle__moon {
+    opacity: 0;
+    transform: rotate(-90deg) scale(0.5);
+  }
+  .theme-toggle__auto {
+    opacity: 1;
+    transform: rotate(0deg) scale(1);
+  }
+}
+
+// Sparkle animation on toggle
+@keyframes sparkle {
+  0% {
+    transform: scale(0) rotate(0deg);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.2) rotate(180deg);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(0) rotate(360deg);
+    opacity: 0;
+  }
+}
+
+.theme-toggle__sparkle {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  background: var(--ctp-yellow);
+  border-radius: 50%;
+  pointer-events: none;
+  animation: sparkle 0.6s ease-out forwards;
+
+  &:nth-child(1) { top: 0; left: 50%; }
+  &:nth-child(2) { top: 50%; right: 0; }
+  &:nth-child(3) { bottom: 0; left: 50%; }
+  &:nth-child(4) { top: 50%; left: 0; }
+}
+
+// Bounce animation for fun feedback
+@keyframes bounce {
+  0%, 100% { transform: scale(1); }
+  25% { transform: scale(1.15); }
+  50% { transform: scale(0.9); }
+  75% { transform: scale(1.05); }
+}
+
+.theme-toggle.animating {
+  animation: bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+}