@nukleas/cyberdesign 0.1.0

package/src/css/components/modal.css

@@ -0,0 +1,146 @@
+/* ── Modal / Dialog ───────────────────────────────────────────────────────── */
+
+@keyframes cd-modal-overlay-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes cd-modal-panel-in   { from { opacity: 0; transform: scale(0.96) translateY(-10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
+@keyframes cd-modal-panel-out  { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.96) translateY(-6px); } }
+
+/* ── Overlay ──────────────────────────────────────────────────────────────── */
+
+.cd-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background: rgba(5, 6, 10, 0.88);
+  backdrop-filter: blur(3px);
+  -webkit-backdrop-filter: blur(3px);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.18s ease;
+}
+
+.cd-modal-overlay.is-open {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* ── Panel ────────────────────────────────────────────────────────────────── */
+
+.cd-modal {
+  position: relative;
+  width: 100%;
+  max-width: 480px;
+  background: var(--cd-bg-panel);
+  border: 1px solid color-mix(in srgb, var(--cd-accent) 30%, transparent);
+  color: var(--cd-text);
+  font-family: var(--cd-font-mono);
+  filter: drop-shadow(0 0 20px var(--cd-accent-glow)) drop-shadow(0 0 2px var(--cd-accent));
+  -webkit-clip-path: polygon(
+    var(--cd-clip-lg) 0%,
+    100% 0%,
+    100% calc(100% - var(--cd-clip-lg)),
+    calc(100% - var(--cd-clip-lg)) 100%,
+    0% 100%,
+    0% var(--cd-clip-lg)
+  );
+  clip-path: polygon(
+    var(--cd-clip-lg) 0%,
+    100% 0%,
+    100% calc(100% - var(--cd-clip-lg)),
+    calc(100% - var(--cd-clip-lg)) 100%,
+    0% 100%,
+    0% var(--cd-clip-lg)
+  );
+  transform: scale(0.96) translateY(-10px);
+  opacity: 0;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.cd-modal-overlay.is-open .cd-modal {
+  transform: scale(1) translateY(0);
+  opacity: 1;
+}
+
+/* ── Header ───────────────────────────────────────────────────────────────── */
+
+.cd-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 18px 12px;
+  border-bottom: 1px solid color-mix(in srgb, var(--cd-accent) 20%, transparent);
+}
+
+.cd-modal__title {
+  font-size: var(--cd-text-sm);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: var(--cd-accent);
+  text-shadow: 0 0 8px var(--cd-accent-glow);
+}
+
+.cd-modal__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  background: none;
+  border: 1px solid var(--cd-border-dim);
+  color: var(--cd-text-muted);
+  font: var(--cd-text-base)/1 var(--cd-font-mono);
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s;
+  flex-shrink: 0;
+}
+
+.cd-modal__close:hover {
+  border-color: var(--cd-red);
+  color: var(--cd-red);
+}
+
+/* ── Body ─────────────────────────────────────────────────────────────────── */
+
+.cd-modal__body {
+  padding: 18px;
+  font-size: var(--cd-text-base);
+  color: var(--cd-text-secondary);
+  line-height: 1.65;
+}
+
+/* ── Footer ───────────────────────────────────────────────────────────────── */
+
+.cd-modal__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 18px 16px;
+  border-top: 1px solid var(--cd-border-dim);
+}
+
+/* ── Size variants ────────────────────────────────────────────────────────── */
+
+.cd-modal--sm { max-width: 340px; }
+.cd-modal--lg { max-width: 680px; }
+.cd-modal--xl { max-width: 900px; }
+
+/* Full-screen on small viewports */
+@media (max-width: 520px) {
+  .cd-modal-overlay { padding: 0; align-items: flex-end; }
+  .cd-modal {
+    max-width: 100%;
+    -webkit-clip-path: polygon(var(--cd-clip-lg) 0%, 100% 0%, 100% 100%, 0% 100%, 0% var(--cd-clip-lg));
+    clip-path: polygon(var(--cd-clip-lg) 0%, 100% 0%, 100% 100%, 0% 100%, 0% var(--cd-clip-lg));
+  }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .cd-modal { transition: none; }
+  .cd-modal-overlay { transition: none; }
+}

package/src/css/components/navigation-extras.css

@@ -0,0 +1,280 @@
+/* ── Menubar / Navigation Menu / Context Menu / Sidebar ────────────────────── */
+
+.cd-menubar {
+  display: inline-flex;
+  align-items: stretch;
+  gap: 0;
+  border: 1px solid var(--cd-border);
+  background: color-mix(in srgb, var(--cd-bg-panel) 80%, transparent);
+  font-family: var(--cd-font-mono);
+}
+
+.cd-menubar__item {
+  position: relative;
+}
+
+.cd-menubar__trigger {
+  display: inline-flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 12px;
+  border: none;
+  background: transparent;
+  color: var(--cd-text-muted);
+  font-family: var(--cd-font-mono);
+  font-size: var(--cd-text-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  cursor: pointer;
+}
+
+.cd-menubar__trigger:hover,
+.cd-menubar__item.is-open > .cd-menubar__trigger {
+  color: var(--cd-accent);
+  background: var(--cd-accent-subtle);
+}
+
+.cd-menubar__menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 500;
+  min-width: 160px;
+  padding: 4px 0;
+  background: var(--cd-bg-panel);
+  border: 1px solid color-mix(in srgb, var(--cd-accent) 28%, transparent);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-4px);
+  transition: opacity 0.12s ease, transform 0.12s ease;
+}
+
+.cd-menubar__item.is-open > .cd-menubar__menu {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.cd-menubar__action {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 12px;
+  border: none;
+  background: transparent;
+  color: var(--cd-text-secondary);
+  font-family: var(--cd-font-mono);
+  font-size: var(--cd-text-sm);
+  text-align: left;
+  cursor: pointer;
+}
+
+.cd-menubar__action:hover {
+  background: var(--cd-accent-subtle);
+  color: var(--cd-accent);
+}
+
+/* Navigation menu (horizontal links) */
+.cd-nav-menu {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-family: var(--cd-font-mono);
+}
+
+.cd-nav-menu__link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 12px;
+  border: 1px solid transparent;
+  color: var(--cd-text-muted);
+  font-size: var(--cd-text-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  text-decoration: none;
+  cursor: pointer;
+  background: transparent;
+}
+
+.cd-nav-menu__link:hover,
+.cd-nav-menu__link.is-active {
+  color: var(--cd-accent);
+  border-color: color-mix(in srgb, var(--cd-accent) 30%, transparent);
+  background: var(--cd-accent-subtle);
+}
+
+/* Context menu */
+.cd-context-menu {
+  position: fixed;
+  z-index: 1100;
+  min-width: 180px;
+  padding: 4px 0;
+  background: var(--cd-bg-panel);
+  border: 1px solid color-mix(in srgb, var(--cd-accent) 30%, transparent);
+  font-family: var(--cd-font-mono);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 16px color-mix(in srgb, var(--cd-accent) 15%, transparent);
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(0.97);
+  transition: opacity 0.1s ease, transform 0.1s ease;
+}
+
+.cd-context-menu.is-open {
+  opacity: 1;
+  pointer-events: auto;
+  transform: scale(1);
+}
+
+.cd-context-menu__item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 12px;
+  border: none;
+  background: transparent;
+  color: var(--cd-text-secondary);
+  font-family: var(--cd-font-mono);
+  font-size: var(--cd-text-sm);
+  text-align: left;
+  cursor: pointer;
+}
+
+.cd-context-menu__item:hover:not(:disabled) {
+  background: var(--cd-accent-subtle);
+  color: var(--cd-accent);
+}
+
+.cd-context-menu__item--danger:hover:not(:disabled) {
+  background: rgba(255, 69, 108, 0.1);
+  color: var(--cd-neon-red);
+}
+
+.cd-context-menu__item:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.cd-context-menu__sep {
+  height: 1px;
+  margin: 4px 0;
+  background: var(--cd-border-dim);
+}
+
+.cd-context-menu__kbd {
+  margin-left: auto;
+  font-size: var(--cd-text-xs);
+  color: var(--cd-text-dim);
+}
+
+/* Sidebar layout */
+.cd-sidebar-layout {
+  display: flex;
+  width: 100%;
+  min-height: 280px;
+  border: 1px solid var(--cd-border);
+  background: var(--cd-bg);
+  font-family: var(--cd-font-mono);
+  overflow: hidden;
+}
+
+.cd-sidebar {
+  flex: 0 0 auto;
+  width: 220px;
+  display: flex;
+  flex-direction: column;
+  background: var(--cd-bg-panel);
+  border-right: 1px solid var(--cd-border);
+  transition: width 0.18s ease, opacity 0.15s ease;
+}
+
+.cd-sidebar--collapsed {
+  width: 52px;
+}
+
+.cd-sidebar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 12px;
+  border-bottom: 1px solid var(--cd-border-dim);
+  min-height: 48px;
+}
+
+.cd-sidebar__title {
+  font-size: var(--cd-text-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--cd-accent);
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.cd-sidebar--collapsed .cd-sidebar__title {
+  display: none;
+}
+
+.cd-sidebar__nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px;
+  flex: 1;
+  overflow: auto;
+}
+
+.cd-sidebar__link {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--cd-text-muted);
+  font-family: var(--cd-font-mono);
+  font-size: var(--cd-text-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  text-decoration: none;
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+}
+
+.cd-sidebar__link:hover,
+.cd-sidebar__link.is-active {
+  color: var(--cd-accent);
+  background: var(--cd-accent-subtle);
+  border-color: color-mix(in srgb, var(--cd-accent) 22%, transparent);
+}
+
+.cd-sidebar__link-icon {
+  flex-shrink: 0;
+  width: 1.25em;
+  text-align: center;
+}
+
+.cd-sidebar--collapsed .cd-sidebar__link-label {
+  display: none;
+}
+
+.cd-sidebar__main {
+  flex: 1;
+  min-width: 0;
+  padding: 16px;
+  overflow: auto;
+  color: var(--cd-text);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cd-sidebar { transition: none; }
+}

package/src/css/components/pagination.css

@@ -0,0 +1,122 @@
+/* ── Pagination ───────────────────────────────────────────────────────────── */
+
+.cd-pagination {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  font-family: var(--cd-font-mono);
+  flex-wrap: wrap;
+}
+
+/* ── Base page item ───────────────────────────────────────────────────────── */
+
+.cd-pagination__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 30px;
+  height: 30px;
+  padding: 0 4px;
+  background: none;
+  border: 1px solid var(--cd-border-dim);
+  color: var(--cd-text-muted);
+  font: 700 var(--cd-text-xs)/1 var(--cd-font-mono);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  text-decoration: none;
+  cursor: pointer;
+  transition: border-color 0.12s, color 0.12s, background 0.12s, box-shadow 0.12s;
+  user-select: none;
+}
+
+.cd-pagination__item:hover {
+  border-color: color-mix(in srgb, var(--cd-accent) 45%, transparent);
+  color: var(--cd-text);
+}
+
+.cd-pagination__item:focus-visible {
+  border-color: var(--cd-accent);
+  color: var(--cd-accent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cd-accent) 30%, transparent);
+}
+
+/* Active page */
+.cd-pagination__item.is-active,
+.cd-pagination__item[aria-current="page"] {
+  background: var(--cd-accent-subtle);
+  border-color: var(--cd-accent);
+  color: var(--cd-accent);
+  box-shadow: 0 0 8px var(--cd-accent-glow), inset 0 0 8px color-mix(in srgb, var(--cd-accent) 6%, transparent);
+  cursor: default;
+}
+
+/* Disabled */
+.cd-pagination__item:disabled,
+.cd-pagination__item[aria-disabled="true"] {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+/* ── Prev / Next arrows ───────────────────────────────────────────────────── */
+
+.cd-pagination__prev,
+.cd-pagination__next {
+  min-width: 36px;
+  gap: 4px;
+}
+
+/* ── Ellipsis ─────────────────────────────────────────────────────────────── */
+
+.cd-pagination__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  height: 30px;
+  font-size: var(--cd-text-sm);
+  color: var(--cd-text-dim);
+  cursor: default;
+  user-select: none;
+  letter-spacing: 0.1em;
+}
+
+/* ── Size variants ────────────────────────────────────────────────────────── */
+
+.cd-pagination--sm .cd-pagination__item {
+  min-width: 28px;
+  height: 28px;
+  font-size: var(--cd-text-xs);
+}
+
+.cd-pagination--lg .cd-pagination__item {
+  min-width: 36px;
+  height: 36px;
+  font-size: var(--cd-text-sm);
+}
+
+/* ── Compact — no gaps, items share borders ───────────────────────────────── */
+
+.cd-pagination--compact {
+  gap: 0;
+}
+
+.cd-pagination--compact .cd-pagination__item {
+  margin-left: -1px;
+}
+
+.cd-pagination--compact .cd-pagination__item:first-child { margin-left: 0; }
+
+.cd-pagination--compact .cd-pagination__item.is-active {
+  z-index: 1;
+  position: relative;
+}
+
+/* ── Info text (e.g. "Page 3 of 12") ─────────────────────────────────────── */
+
+.cd-pagination__info {
+  font: 700 var(--cd-text-xs)/1 var(--cd-font-mono);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--cd-text-dim);
+  margin: 0 8px;
+}

package/src/css/components/panel-header.css

@@ -0,0 +1,55 @@
+.cd-panel-header {
+  height: 32px;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--cd-border-glow);
+  background: var(--cd-bg-surface);
+  color: var(--cd-accent);
+  font-family: var(--cd-font-mono);
+  font-size: var(--cd-text-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  text-shadow:
+    2px 0 0 color-mix(in srgb, var(--cd-accent-secondary) 55%, transparent),
+    0 0 6px color-mix(in srgb, var(--cd-accent) 60%, transparent);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+  position: relative;
+  overflow: hidden;
+  user-select: none;
+}
+
+.cd-panel-header::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 60%;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--cd-accent) 40%,
+    var(--cd-accent-secondary) 60%,
+    transparent
+  );
+  opacity: 0.6;
+  transform: translateX(-100%);
+  animation: cd-header-sweep 10s ease-in-out infinite;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cd-panel-header::after {
+    animation-duration: 0.001ms;
+  }
+}
+
+.cd-panel-header__actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--cd-text-muted);
+}

package/src/css/components/popover.css

@@ -0,0 +1,112 @@
+/* ── Popover / Hover Card ──────────────────────────────────────────────────── */
+
+.cd-popover {
+  position: relative;
+  display: inline-block;
+}
+
+.cd-popover__content {
+  position: absolute;
+  z-index: 600;
+  min-width: 200px;
+  max-width: 320px;
+  padding: 12px;
+  background: var(--cd-bg-panel);
+  border: 1px solid color-mix(in srgb, var(--cd-accent) 30%, transparent);
+  color: var(--cd-text);
+  font-family: var(--cd-font-mono);
+  font-size: var(--cd-text-sm);
+  box-shadow:
+    0 8px 24px rgba(0, 0, 0, 0.5),
+    0 0 16px color-mix(in srgb, var(--cd-accent) 18%, transparent);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(4px) scale(0.98);
+  transition: opacity 0.12s ease, transform 0.12s ease;
+}
+
+.cd-popover.is-open > .cd-popover__content,
+.cd-popover:focus-within > .cd-popover__content {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0) scale(1);
+}
+
+/* Placement */
+.cd-popover__content--bottom {
+  top: calc(100% + 6px);
+  left: 0;
+}
+
+.cd-popover__content--bottom-end {
+  top: calc(100% + 6px);
+  right: 0;
+  left: auto;
+}
+
+.cd-popover__content--top {
+  bottom: calc(100% + 6px);
+  left: 0;
+  transform: translateY(-4px) scale(0.98);
+}
+
+.cd-popover.is-open > .cd-popover__content--top {
+  transform: translateY(0) scale(1);
+}
+
+.cd-popover__content--right {
+  left: calc(100% + 6px);
+  top: 0;
+  transform: translateX(4px) scale(0.98);
+}
+
+.cd-popover.is-open > .cd-popover__content--right {
+  transform: translateX(0) scale(1);
+}
+
+.cd-popover__title {
+  margin: 0 0 4px;
+  font-size: var(--cd-text-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--cd-accent);
+}
+
+.cd-popover__description {
+  margin: 0;
+  font-size: var(--cd-text-xs);
+  color: var(--cd-text-muted);
+  line-height: 1.5;
+}
+
+/* Hover card — open on hover of host */
+.cd-hover-card {
+  position: relative;
+  display: inline-block;
+}
+
+.cd-hover-card__content {
+  position: absolute;
+  z-index: 600;
+  top: calc(100% + 6px);
+  left: 0;
+  min-width: 220px;
+  max-width: 300px;
+  padding: 12px;
+  background: var(--cd-bg-panel);
+  border: 1px solid color-mix(in srgb, var(--cd-accent) 30%, transparent);
+  font-family: var(--cd-font-mono);
+  font-size: var(--cd-text-sm);
+  color: var(--cd-text);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 12px color-mix(in srgb, var(--cd-accent) 15%, transparent);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.12s ease 80ms;
+}
+
+.cd-hover-card:hover > .cd-hover-card__content,
+.cd-hover-card:focus-within > .cd-hover-card__content {
+  opacity: 1;
+  pointer-events: auto;
+}