@nukleas/cyberdesign 0.1.0

package/src/css/components/scanner.css

@@ -0,0 +1,125 @@
+/* ── Scanner / Sweep Line ──────────────────────────────────────────────────── */
+/*
+  Animated glowing scan/sweep line (lidar, radar, document scanner, "analyzing").
+
+  Usage (standalone or over content):
+  <div class="cd-scanner" style="--sweep-duration: 2.2s;">
+    <div class="cd-scanner__line"></div>
+    <!-- your content here, e.g. image or panel -->
+  </div>
+
+  Or apply to existing panels: <div class="cd-hud-frame cd-scanner">...</div>
+
+  The line sweeps left-to-right (or top-to-bottom in vertical).
+
+  Modifiers: --vertical, --fast, --slow, --ping (fainter return sweep)
+*/
+
+.cd-scanner {
+  position: relative;
+  overflow: hidden;
+}
+
+.cd-scanner__line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2px;
+  height: 100%;
+  background: linear-gradient(
+    to bottom,
+    transparent,
+    var(--cd-accent) 15%,
+    var(--cd-accent) 85%,
+    transparent
+  );
+  box-shadow:
+    0 0 6px var(--cd-accent-glow),
+    0 0 18px var(--cd-accent-glow);
+  animation: cd-scanner-sweep var(--sweep-duration, 2.4s) ease-in-out infinite;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.cd-scanner--vertical .cd-scanner__line {
+  width: 100%;
+  height: 2px;
+  top: 0;
+  left: 0;
+  background: linear-gradient(
+    to right,
+    transparent,
+    var(--cd-accent) 15%,
+    var(--cd-accent) 85%,
+    transparent
+  );
+  animation: cd-scanner-sweep-vertical var(--sweep-duration, 2.4s) ease-in-out infinite;
+}
+
+.cd-scanner--ping .cd-scanner__line {
+  opacity: 0.6;
+  box-shadow: 0 0 10px var(--cd-accent-glow);
+}
+
+@keyframes cd-scanner-sweep {
+  0%   { left: -10%; }
+  45%  { left: 105%; }
+  55%  { left: 105%; }
+  100% { left: -10%; }
+}
+
+@keyframes cd-scanner-sweep-vertical {
+  0%   { top: -10%; }
+  45%  { top: 105%; }
+  55%  { top: 105%; }
+  100% { top: -10%; }
+}
+
+/* Optional trailing glow bar */
+.cd-scanner::after {
+  content: '';
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--cd-accent) 8%, transparent) 50%,
+    transparent
+  );
+  pointer-events: none;
+  z-index: 1;
+  animation: cd-scanner-trail var(--sweep-duration, 2.4s) ease-in-out infinite;
+  mix-blend-mode: screen;
+}
+
+.cd-scanner--vertical::after {
+  background: linear-gradient(
+    180deg,
+    transparent,
+    color-mix(in srgb, var(--cd-accent) 8%, transparent) 50%,
+    transparent
+  );
+  animation: cd-scanner-trail-vertical var(--sweep-duration, 2.4s) ease-in-out infinite;
+}
+
+@keyframes cd-scanner-trail {
+  0%   { transform: translateX(-30%); }
+  50%  { transform: translateX(110%); }
+  100% { transform: translateX(110%); }
+}
+
+@keyframes cd-scanner-trail-vertical {
+  0%   { transform: translateY(-30%); }
+  50%  { transform: translateY(110%); }
+  100% { transform: translateY(110%); }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .cd-scanner__line,
+  .cd-scanner::after {
+    animation: none;
+    opacity: 0.3;
+  }
+}

package/src/css/components/select.css

@@ -0,0 +1,99 @@
+/* ── Select wrapper ─────────────────────────────────────── */
+/* Wrap <select> in .cd-select-wrap to get the custom arrow  */
+
+.cd-select-wrap {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+}
+
+/* Custom chevron arrow */
+.cd-select-wrap::after {
+  content: '';
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 5px solid var(--cd-text-muted);
+  transition: border-top-color 150ms ease;
+}
+
+.cd-select-wrap:focus-within::after {
+  border-top-color: var(--cd-accent);
+}
+
+/* ── Select element ─────────────────────────────────────── */
+
+.cd-select {
+  display: block;
+  width: 100%;
+  height: 32px;
+  padding: 0 32px 0 10px;
+  background: rgba(5, 6, 10, 0.82);
+  color: var(--cd-text);
+  border: 1px solid var(--cd-border);
+  border-radius: 0;
+  font-family: var(--cd-font-mono);
+  font-size: var(--cd-text-base);
+  line-height: 1;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+}
+
+/* Style native option elements */
+.cd-select option {
+  background: #0b0f18;
+  color: #e8e4e0;
+}
+
+.cd-select:focus {
+  border-color: color-mix(in srgb, var(--cd-accent) 55%, transparent);
+  outline: 2px solid var(--cd-accent);
+  outline-offset: 2px;
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--cd-accent) 18%, transparent),
+    0 0 8px color-mix(in srgb, var(--cd-accent) 20%, transparent);
+}
+
+.cd-select:hover:not(:focus):not(:disabled) {
+  border-color: var(--cd-border-mid, #26324c);
+}
+
+.cd-select:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.cd-select--error {
+  border-color: rgba(255, 69, 108, 0.55);
+}
+
+.cd-select--error:focus {
+  border-color: rgba(255, 69, 108, 0.80);
+  outline: 2px solid var(--cd-accent);
+  outline-offset: 2px;
+  box-shadow:
+    0 0 0 1px rgba(255, 69, 108, 0.20),
+    0 0 8px rgba(255, 69, 108, 0.25);
+}
+
+.cd-select--sm {
+  height: 26px;
+  font-size: var(--cd-text-sm);
+  padding-right: 28px;
+  padding-left: 8px;
+}
+
+/* Uppercase label variant (AI-shell viz-controls pattern) */
+.cd-select--label {
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: var(--cd-text-sm);
+}

package/src/css/components/sheet.css

@@ -0,0 +1,149 @@
+/* ── Sheet / Drawer — side or bottom panel over dimmed backdrop ─────────────── */
+
+.cd-sheet-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  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-sheet-overlay.is-open {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.cd-sheet {
+  position: fixed;
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+  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);
+  box-shadow: 0 0 24px color-mix(in srgb, var(--cd-accent) 15%, transparent);
+  transition: transform 0.22s ease, opacity 0.18s ease;
+  opacity: 0;
+}
+
+.cd-sheet-overlay.is-open .cd-sheet {
+  opacity: 1;
+  transform: translate(0, 0);
+}
+
+/* Sides */
+.cd-sheet--right {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: min(100%, 400px);
+  border-left: 1px solid color-mix(in srgb, var(--cd-accent) 35%, transparent);
+  border-right: none;
+  transform: translateX(100%);
+}
+
+.cd-sheet--left {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: min(100%, 400px);
+  border-right: 1px solid color-mix(in srgb, var(--cd-accent) 35%, transparent);
+  border-left: none;
+  transform: translateX(-100%);
+}
+
+.cd-sheet--top {
+  top: 0;
+  left: 0;
+  right: 0;
+  max-height: min(80vh, 480px);
+  border-bottom: 1px solid color-mix(in srgb, var(--cd-accent) 35%, transparent);
+  border-top: none;
+  transform: translateY(-100%);
+}
+
+.cd-sheet--bottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  max-height: min(80vh, 480px);
+  border-top: 1px solid color-mix(in srgb, var(--cd-accent) 35%, transparent);
+  border-bottom: none;
+  transform: translateY(100%);
+}
+
+.cd-sheet--sm.cd-sheet--right,
+.cd-sheet--sm.cd-sheet--left { width: min(100%, 320px); }
+
+.cd-sheet--lg.cd-sheet--right,
+.cd-sheet--lg.cd-sheet--left { width: min(100%, 560px); }
+
+.cd-sheet__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 16px;
+  border-bottom: 1px solid color-mix(in srgb, var(--cd-accent) 18%, transparent);
+  flex-shrink: 0;
+}
+
+.cd-sheet__title {
+  font-size: var(--cd-text-sm);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  color: var(--cd-accent);
+}
+
+.cd-sheet__description {
+  margin: 4px 0 0;
+  font-size: var(--cd-text-xs);
+  color: var(--cd-text-muted);
+}
+
+.cd-sheet__body {
+  padding: 16px;
+  overflow: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+.cd-sheet__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid color-mix(in srgb, var(--cd-accent) 18%, transparent);
+  flex-shrink: 0;
+}
+
+.cd-sheet__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;
+  flex-shrink: 0;
+}
+
+.cd-sheet__close:hover {
+  border-color: var(--cd-red);
+  color: var(--cd-red);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cd-sheet,
+  .cd-sheet-overlay { transition: none; }
+}

package/src/css/components/skeleton.css

@@ -0,0 +1,77 @@
+/* ── Skeleton / Loading Placeholder ─────────────────────────────────────── */
+/* Reuses @keyframes cd-skel-shimmer from animations.css                     */
+
+.cd-skeleton {
+  display: block;
+  background: color-mix(in srgb, var(--cd-accent) 6%, var(--cd-bg-panel));
+  position: relative;
+  overflow: hidden;
+}
+
+.cd-skeleton::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    color-mix(in srgb, var(--cd-accent) 10%, transparent) 40%,
+    color-mix(in srgb, var(--cd-accent) 14%, transparent) 50%,
+    color-mix(in srgb, var(--cd-accent) 10%, transparent) 60%,
+    transparent 100%
+  );
+  background-size: 200% 100%;
+  animation: cd-skel-shimmer 1.5s ease-in-out infinite;
+}
+
+/* Shape variants */
+.cd-skeleton--text {
+  height: 10px;
+  border-radius: 2px;
+}
+
+.cd-skeleton--heading {
+  height: 16px;
+  border-radius: 2px;
+}
+
+.cd-skeleton--avatar {
+  border-radius: 50%;
+}
+
+.cd-skeleton--btn {
+  height: 32px;
+  border-radius: 0;
+  width: 80px;
+}
+
+/* Width helpers */
+.cd-skeleton--w-full  { width: 100%; }
+.cd-skeleton--w-3\/4  { width: 75%;  }
+.cd-skeleton--w-1\/2  { width: 50%;  }
+.cd-skeleton--w-1\/3  { width: 33%;  }
+
+/* ── Skeleton block — compound line group ─────────────────────────────────── */
+
+.cd-skeleton-block {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* Row = inline group (avatar + text, etc.) */
+.cd-skeleton-block__row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+/* Pre-built card skeleton */
+.cd-skeleton-card {
+  padding: 16px;
+  background: var(--cd-bg-panel);
+  border: 1px solid var(--cd-border-dim);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}

package/src/css/components/slider.css

@@ -0,0 +1,116 @@
+/* ── Range Slider ───────────────────────────────────────── */
+/* Mirrors an AI-shell app's sophisticated slider with neon track + 3D thumb */
+
+.cd-slider {
+  display: block;
+  width: 100%;
+  height: 20px;
+  background: transparent;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* ── WebKit ─────────────────────────────────────────────── */
+
+.cd-slider::-webkit-slider-runnable-track {
+  height: 4px;
+  background:
+    linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--cd-accent) 35%, transparent),
+      color-mix(in srgb, var(--cd-accent-secondary) 25%, transparent)
+    ),
+    var(--cd-bg-panel);
+  border: 1px solid var(--cd-border);
+  border-radius: 0;
+}
+
+.cd-slider::-webkit-slider-thumb {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 14px;
+  height: 20px;
+  margin-top: -9px;
+  background: var(--cd-accent-bright, #bdffff);
+  border: 1px solid var(--cd-bg);
+  border-radius: 0;
+  box-shadow:
+    0 0 8px color-mix(in srgb, var(--cd-accent) 50%, transparent),
+    2px 2px 0 color-mix(in srgb, var(--cd-accent-secondary) 55%, transparent);
+  transition: box-shadow 150ms ease;
+}
+
+.cd-slider:focus::-webkit-slider-thumb,
+.cd-slider:hover::-webkit-slider-thumb {
+  box-shadow:
+    0 0 12px color-mix(in srgb, var(--cd-accent) 70%, transparent),
+    2px 2px 0 color-mix(in srgb, var(--cd-accent-secondary) 55%, transparent);
+}
+
+/* ── Firefox ────────────────────────────────────────────── */
+
+.cd-slider::-moz-range-track {
+  height: 4px;
+  background: var(--cd-bg-panel);
+  border: 1px solid var(--cd-border);
+  border-radius: 0;
+}
+
+.cd-slider::-moz-range-progress {
+  height: 4px;
+  background: color-mix(in srgb, var(--cd-accent) 55%, transparent);
+  border-radius: 0;
+}
+
+.cd-slider::-moz-range-thumb {
+  width: 14px;
+  height: 20px;
+  background: var(--cd-accent-bright, #bdffff);
+  border: 1px solid var(--cd-bg);
+  border-radius: 0;
+  box-shadow:
+    0 0 8px color-mix(in srgb, var(--cd-accent) 50%, transparent),
+    2px 2px 0 color-mix(in srgb, var(--cd-accent-secondary) 55%, transparent);
+}
+
+.cd-slider:focus-visible {
+  outline: 1px solid var(--cd-accent);
+  outline-offset: 4px;
+}
+
+.cd-slider:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+/* ── Slider with value label ────────────────────────────── */
+/*
+  Usage:
+  <div class="cd-slider-wrap">
+    <input type="range" class="cd-slider">
+    <span class="cd-slider-value">74</span>
+  </div>
+*/
+
+.cd-slider-wrap {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.cd-slider-wrap .cd-slider {
+  flex: 1;
+}
+
+.cd-slider-value {
+  font-family: var(--cd-font-mono);
+  font-size: var(--cd-text-xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--cd-accent);
+  min-width: 3ch;
+  text-align: right;
+  flex-shrink: 0;
+}

package/src/css/components/spinner.css

@@ -0,0 +1,101 @@
+/* ── Spinner / Loader ─────────────────────────────────────────────────────── */
+
+@keyframes cd-spin { to { transform: rotate(360deg); } }
+@keyframes cd-spin-rev { to { transform: rotate(-360deg); } }
+@keyframes cd-pulse-dots {
+  0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
+  40%           { transform: scale(1);   opacity: 1;   }
+}
+
+/* ── Ring spinner (default) ───────────────────────────────────────────────── */
+
+.cd-spinner {
+  --cd-spinner-size: 20px;
+  --cd-spinner-stroke: 2px;
+  display: inline-block;
+  width: var(--cd-spinner-size);
+  height: var(--cd-spinner-size);
+  border-radius: 50%;
+  border: var(--cd-spinner-stroke) solid color-mix(in srgb, var(--cd-accent) 18%, transparent);
+  border-top-color: var(--cd-accent);
+  animation: cd-spin 0.75s linear infinite;
+  flex-shrink: 0;
+}
+
+/* Dual-ring variant — inner ring counter-rotates */
+.cd-spinner--dual {
+  position: relative;
+  border-top-color: var(--cd-accent);
+  border-right-color: color-mix(in srgb, var(--cd-accent) 35%, transparent);
+}
+
+.cd-spinner--dual::after {
+  content: '';
+  position: absolute;
+  inset: 3px;
+  border-radius: 50%;
+  border: var(--cd-spinner-stroke) solid transparent;
+  border-bottom-color: var(--cd-accent-bright);
+  animation: cd-spin-rev 0.6s linear infinite;
+}
+
+/* ── Size variants ────────────────────────────────────────────────────────── */
+
+.cd-spinner--xs { --cd-spinner-size: 12px; --cd-spinner-stroke: 1.5px; }
+.cd-spinner--sm { --cd-spinner-size: 16px; --cd-spinner-stroke: 2px;   }
+.cd-spinner--lg { --cd-spinner-size: 32px; --cd-spinner-stroke: 3px;   }
+.cd-spinner--xl { --cd-spinner-size: 48px; --cd-spinner-stroke: 3px;   }
+
+/* ── Dot pulse variant ────────────────────────────────────────────────────── */
+
+.cd-spinner--dots {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border: none;
+  background: none;
+  animation: none;
+  width: auto;
+  height: auto;
+}
+
+.cd-spinner--dots::before,
+.cd-spinner--dots::after,
+.cd-spinner--dots span {
+  content: '';
+  display: block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--cd-accent);
+  animation: cd-pulse-dots 1.2s ease-in-out infinite;
+}
+
+.cd-spinner--dots::before { animation-delay: 0s;    }
+.cd-spinner--dots span    { animation-delay: 0.2s;  }
+.cd-spinner--dots::after  { animation-delay: 0.4s;  }
+
+/* ── Inline loading state — wrap content with this ───────────────────────── */
+
+.cd-loading {
+  position: relative;
+  pointer-events: none;
+}
+
+.cd-loading::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: color-mix(in srgb, var(--cd-bg) 60%, transparent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .cd-spinner       { animation: none; opacity: 0.5; }
+  .cd-spinner--dots::before,
+  .cd-spinner--dots span,
+  .cd-spinner--dots::after { animation: none; opacity: 0.5; }
+}