@nukleas/cyberdesign 0.1.0

package/src/css/components/input.css

@@ -0,0 +1,182 @@
+/* ── Base input ─────────────────────────────────────────── */
+
+.cd-input {
+  display: block;
+  width: 100%;
+  height: 32px;
+  padding: 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;
+  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.cd-input::placeholder {
+  color: var(--cd-text-dim);
+  font-style: italic;
+}
+
+.cd-input: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),
+    inset 0 0 4px color-mix(in srgb, var(--cd-accent) 6%, transparent);
+}
+
+.cd-input:hover:not(:focus):not(:disabled) {
+  border-color: var(--cd-border-mid, #26324c);
+}
+
+.cd-input:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+/* Left-accent variant (AI-shell corpus search pattern) */
+.cd-input--accent {
+  border-left: 2px solid var(--cd-accent);
+  padding-left: 9px;
+}
+
+/* Error state */
+.cd-input--error {
+  border-color: rgba(255, 69, 108, 0.55);
+  box-shadow: 0 0 6px rgba(255, 69, 108, 0.15);
+}
+
+.cd-input--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),
+    inset 0 0 4px rgba(255, 69, 108, 0.08);
+}
+
+/* Small variant */
+.cd-input--sm {
+  height: 26px;
+  font-size: var(--cd-text-sm);
+  padding: 0 8px;
+}
+
+/* Large variant */
+.cd-input--lg {
+  height: 40px;
+  font-size: var(--cd-text-md);
+  padding: 0 14px;
+}
+
+/* Number — hide spin buttons */
+.cd-input[type="number"]::-webkit-inner-spin-button,
+.cd-input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.cd-input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+/* ── Textarea ─────────────────────────────────────────── */
+
+.cd-textarea {
+  display: block;
+  width: 100%;
+  min-height: 80px;
+  padding: 8px 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.55;
+  resize: vertical;
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+}
+
+.cd-textarea::placeholder {
+  color: var(--cd-text-dim);
+  font-style: italic;
+}
+
+.cd-textarea: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),
+    inset 0 0 4px color-mix(in srgb, var(--cd-accent) 6%, transparent);
+}
+
+.cd-textarea:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+  resize: none;
+}
+
+.cd-textarea--error {
+  border-color: rgba(255, 69, 108, 0.55);
+}
+
+.cd-textarea--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);
+}
+
+/* ── Input group (prefix / suffix) ─────────────────────── */
+
+.cd-input-group {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+}
+
+.cd-input-group .cd-input {
+  flex: 1;
+  min-width: 0;
+}
+
+.cd-input-addon {
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  background: rgba(5, 6, 10, 0.60);
+  border: 1px solid var(--cd-border);
+  color: var(--cd-text-muted);
+  font-family: var(--cd-font-mono);
+  font-size: var(--cd-text-xs);
+  white-space: nowrap;
+  flex-shrink: 0;
+  user-select: none;
+}
+
+/* Prefix addon: remove right border so it merges with input */
+.cd-input-group .cd-input-addon:first-child {
+  border-right: none;
+}
+
+/* Suffix addon: remove left border so it merges with input */
+.cd-input-group .cd-input-addon:last-child {
+  border-left: none;
+}
+
+/* When the input is focused, light up the whole group border */
+.cd-input-group:focus-within .cd-input-addon {
+  border-color: color-mix(in srgb, var(--cd-accent) 55%, transparent);
+}

package/src/css/components/interference.css

@@ -0,0 +1,217 @@
+/* ── Interference / Corruption Overlay ─────────────────────────────────────── */
+/*
+  Dramatic animated static/noise + data corruption effects for cyberpunk "damaged signal",
+  hacked feeds, low-bandwidth, or corrupted data states.
+
+  Usage (compose freely):
+  <div class="cd-interference cd-interference--heavy cd-interference--glitch">
+    <div class="cd-interference__noise"></div>
+    <div class="cd-interference__content" data-text="CORRUPTED FEED">
+      ...your content (text, logs, panels, even images)...
+    </div>
+  </div>
+
+  Or direct on text:
+  <span class="cd-corrupt-text" data-text="SYSTEM FAILURE">SYSTEM FAILURE</span>
+
+  Modifiers:
+    --light     subtle static
+    --heavy     intense, fast noise + stronger corruption
+    --glitch    enables the text/data corruption effect (requires data-text attr on child)
+    --intense   extra aggressive version (combine with heavy)
+
+  Works great over .cd-terminal, .cd-hud-frame, .cd-glow-card, images, or raw text blocks.
+  Noise uses screen blend + theme accent for colored glitch tint.
+*/
+
+.cd-interference {
+  position: relative;
+  overflow: hidden;
+}
+
+/* The noise layer — multiple moving grain fields for realistic analog/digital static */
+.cd-interference__noise {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 2;
+  background:
+    /* fine vertical scan */
+    linear-gradient(rgba(255,255,255,0.035) 50%, transparent 50%),
+    /* horizontal grain */
+    linear-gradient(90deg, rgba(255,255,255,0.025) 50%, transparent 50%),
+    /* colored interference tint using theme colors */
+    linear-gradient(45deg,
+      color-mix(in srgb, var(--cd-accent-secondary) 8%, transparent) 0%,
+      transparent 40%,
+      color-mix(in srgb, var(--cd-accent) 6%, transparent) 60%,
+      transparent 100%);
+  background-size: 2px 3px, 3px 2px, 120px 120px;
+  animation: cd-interference-noise 65ms steps(3) infinite;
+  mix-blend-mode: screen;
+  opacity: 0.65;
+  filter: contrast(1.15) saturate(0.8);
+}
+
+.cd-interference--light .cd-interference__noise {
+  opacity: 0.28;
+  animation-duration: 120ms;
+  filter: contrast(1.05);
+}
+
+.cd-interference--heavy .cd-interference__noise {
+  opacity: 0.92;
+  animation-duration: 42ms;
+  background-size: 1.5px 2px, 2px 1.5px, 80px 80px;
+  filter: contrast(1.4) saturate(1.1);
+}
+
+.cd-interference--intense .cd-interference__noise {
+  opacity: 1;
+  animation-duration: 28ms;
+  filter: contrast(1.6) hue-rotate(8deg);
+}
+
+/* Block-level corruption effect (when --glitch modifier is present) */
+.cd-interference--glitch .cd-interference__content,
+.cd-interference--glitch .cd-interference__text {
+  position: relative;
+  display: block;
+}
+
+/* Primary corruption layer — aggressive clipping + offset + color bleed */
+.cd-interference--glitch .cd-interference__content::before,
+.cd-interference--glitch .cd-interference__text::before {
+  content: attr(data-text);
+  position: absolute;
+  left: 0; top: 0;
+  width: 100%;
+  height: 100%;
+  color: var(--cd-accent-secondary);
+  overflow: hidden;
+  animation: cd-interference-corrupt 1.35s steps(5) infinite;
+  opacity: 0.75;
+  pointer-events: none;
+  mix-blend-mode: difference;
+  z-index: 3;
+  text-shadow:
+    1px 0 0 var(--cd-accent),
+    -1px 0 0 var(--cd-neon-red);
+}
+
+/* Secondary echo layer for richer glitch (double vision / RGB split feel) */
+.cd-interference--glitch .cd-interference__content::after,
+.cd-interference--glitch .cd-interference__text::after {
+  content: attr(data-text);
+  position: absolute;
+  left: 0; top: 0;
+  width: 100%;
+  height: 100%;
+  color: var(--cd-accent);
+  overflow: hidden;
+  animation: cd-interference-corrupt 1.35s steps(5) infinite 0.15s;
+  opacity: 0.45;
+  pointer-events: none;
+  mix-blend-mode: screen;
+  z-index: 4;
+  transform: translate(1.5px, 0);
+}
+
+/* Direct .cd-corrupt-text utility (no wrapper needed) */
+.cd-corrupt-text {
+  position: relative;
+  display: inline-block;
+}
+
+.cd-corrupt-text::before {
+  content: attr(data-text);
+  position: absolute;
+  left: 0; top: 0;
+  width: 100%; height: 100%;
+  color: var(--cd-neon-red);
+  animation: cd-interference-corrupt 1.1s steps(4) infinite;
+  opacity: 0.8;
+  mix-blend-mode: difference;
+  pointer-events: none;
+  text-shadow: 2px 0 0 var(--cd-accent-secondary);
+  z-index: 1;
+}
+
+.cd-corrupt-text::after {
+  content: attr(data-text);
+  position: absolute;
+  left: 0; top: 0;
+  width: 100%; height: 100%;
+  color: var(--cd-accent-secondary);
+  animation: cd-interference-corrupt 1.1s steps(4) infinite 0.08s;
+  opacity: 0.55;
+  mix-blend-mode: screen;
+  pointer-events: none;
+  z-index: 2;
+}
+
+/* Much more aggressive corruption keyframes */
+@keyframes cd-interference-noise {
+  0%   { background-position: 0 0, 0 0, 0 0; }
+  100% { background-position: 2px 3px, 3px 2px, 80px 80px; }
+}
+
+@keyframes cd-interference-corrupt {
+  0% {
+    -webkit-clip-path: inset(0 0 82% 0);
+    clip-path: inset(0 0 82% 0);
+    transform: translate(0, -1.5px) scale(1);
+  }
+  15% {
+    -webkit-clip-path: inset(18% 0 55% 0);
+    clip-path: inset(18% 0 55% 0);
+    transform: translate(2px, 0.5px) scale(1.01);
+  }
+  32% {
+    -webkit-clip-path: inset(48% 0 22% 0);
+    clip-path: inset(48% 0 22% 0);
+    transform: translate(-2.5px, -1px);
+  }
+  48% {
+    -webkit-clip-path: inset(8% 0 71% 0);
+    clip-path: inset(8% 0 71% 0);
+    transform: translate(1.5px, 1.5px) scale(0.995);
+  }
+  65% {
+    -webkit-clip-path: inset(35% 0 38% 0);
+    clip-path: inset(35% 0 38% 0);
+    transform: translate(-1px, 0);
+  }
+  82% {
+    -webkit-clip-path: inset(62% 0 12% 0);
+    clip-path: inset(62% 0 12% 0);
+    transform: translate(3px, -0.5px);
+  }
+  100% {
+    -webkit-clip-path: inset(0 0 82% 0);
+    clip-path: inset(0 0 82% 0);
+    transform: translate(0, -1.5px) scale(1);
+  }
+}
+
+/* Reduced motion — keep subtle static but kill the wild animation */
+@media (prefers-reduced-motion: reduce) {
+  .cd-interference__noise {
+    animation: none;
+    opacity: 0.18;
+    background-size: 3px 3px, 4px 4px, 200px 200px;
+  }
+  .cd-interference--heavy .cd-interference__noise {
+    opacity: 0.32;
+  }
+  .cd-interference--glitch .cd-interference__content::before,
+  .cd-interference--glitch .cd-interference__content::after,
+  .cd-corrupt-text::before,
+  .cd-corrupt-text::after {
+    animation: none;
+    opacity: 0.25;
+    transform: none;
+    -webkit-clip-path: none;
+    clip-path: none;
+  }
+}

package/src/css/components/kbd.css

@@ -0,0 +1,54 @@
+/* ── Kbd — Keyboard Shortcut ─────────────────────────────────────────────── */
+
+.cd-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 5px;
+  font: 700 var(--cd-text-xs)/1 var(--cd-font-mono);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--cd-text-secondary);
+  background: var(--cd-bg-panel-hover);
+  border: 1px solid var(--cd-border-mid);
+  border-bottom-width: 2px;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+}
+
+/* Accent-highlighted key */
+.cd-kbd--accent {
+  color: var(--cd-accent);
+  border-color: color-mix(in srgb, var(--cd-accent) 40%, transparent);
+  border-bottom-color: color-mix(in srgb, var(--cd-accent) 60%, transparent);
+  box-shadow: 0 0 6px var(--cd-accent-glow);
+}
+
+/* Larger variant for standalone display */
+.cd-kbd--lg {
+  min-width: 28px;
+  height: 28px;
+  padding: 0 8px;
+  font-size: var(--cd-text-base);
+}
+
+/* Key combination group — wraps multiple .cd-kbd with a + separator */
+.cd-kbd-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  vertical-align: middle;
+}
+
+.cd-kbd-group .cd-kbd { vertical-align: baseline; }
+
+/* Separator between keys */
+.cd-kbd-group__sep {
+  font-size: var(--cd-text-xs);
+  color: var(--cd-text-dim);
+  font-family: var(--cd-font-mono);
+  line-height: 1;
+}

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

@@ -0,0 +1,256 @@
+/* ── Aspect Ratio / Scroll Area / Empty / Collapsible / Resizable / Item ───── */
+
+.cd-aspect-ratio {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.cd-aspect-ratio > * {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.cd-scroll-area {
+  overflow: auto;
+  position: relative;
+}
+
+.cd-scroll-area--thin {
+  scrollbar-width: thin;
+  scrollbar-color: var(--cd-scrollbar-thumb, color-mix(in srgb, var(--cd-accent) 25%, transparent)) transparent;
+}
+
+.cd-scroll-area--thin::-webkit-scrollbar { width: 4px; height: 4px; }
+.cd-scroll-area--thin::-webkit-scrollbar-track { background: transparent; }
+.cd-scroll-area--thin::-webkit-scrollbar-thumb {
+  background: var(--cd-scrollbar-thumb, color-mix(in srgb, var(--cd-accent) 25%, transparent));
+  border-radius: 2px;
+}
+
+/* Empty state */
+.cd-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 40px 24px;
+  text-align: center;
+  border: 1px dashed color-mix(in srgb, var(--cd-border) 80%, transparent);
+  background: color-mix(in srgb, var(--cd-bg-panel) 50%, transparent);
+  font-family: var(--cd-font-mono);
+  color: var(--cd-text-muted);
+}
+
+.cd-empty__icon {
+  font-size: 1.75rem;
+  line-height: 1;
+  color: var(--cd-accent);
+  opacity: 0.85;
+  margin-bottom: 4px;
+}
+
+.cd-empty__title {
+  margin: 0;
+  font-size: var(--cd-text-sm);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--cd-text);
+}
+
+.cd-empty__description {
+  margin: 0;
+  max-width: 280px;
+  font-size: var(--cd-text-xs);
+  color: var(--cd-text-muted);
+  line-height: 1.5;
+}
+
+.cd-empty__actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+/* Collapsible */
+.cd-collapsible {
+  width: 100%;
+}
+
+.cd-collapsible__trigger {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 0;
+  background: none;
+  border: none;
+  color: var(--cd-text);
+  font-family: var(--cd-font-mono);
+  font-size: var(--cd-text-sm);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  cursor: pointer;
+  text-align: left;
+}
+
+.cd-collapsible__trigger:hover {
+  color: var(--cd-accent);
+}
+
+.cd-collapsible__chevron {
+  color: var(--cd-text-dim);
+  transition: transform 0.15s ease;
+  font-size: var(--cd-text-xs);
+}
+
+.cd-collapsible.is-open .cd-collapsible__chevron {
+  transform: rotate(180deg);
+  color: var(--cd-accent);
+}
+
+.cd-collapsible__content {
+  overflow: hidden;
+  font-family: var(--cd-font-mono);
+  font-size: var(--cd-text-sm);
+  color: var(--cd-text-secondary);
+  line-height: 1.55;
+}
+
+.cd-collapsible:not(.is-open) > .cd-collapsible__content {
+  display: none;
+}
+
+/* Resizable panels */
+.cd-resizable {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: 120px;
+  border: 1px solid var(--cd-border);
+  background: var(--cd-bg);
+  font-family: var(--cd-font-mono);
+  overflow: hidden;
+}
+
+.cd-resizable--vertical {
+  flex-direction: column;
+}
+
+.cd-resizable__panel {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  padding: 12px;
+  background: var(--cd-bg-panel);
+}
+
+.cd-resizable__handle {
+  flex: 0 0 6px;
+  background: var(--cd-border-dim);
+  position: relative;
+  cursor: col-resize;
+  transition: background 0.12s ease;
+}
+
+.cd-resizable--vertical > .cd-resizable__handle {
+  cursor: row-resize;
+  flex-basis: 6px;
+}
+
+.cd-resizable__handle:hover,
+.cd-resizable__handle:active {
+  background: color-mix(in srgb, var(--cd-accent) 45%, transparent);
+}
+
+.cd-resizable__handle::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 2px;
+  height: 24px;
+  background: color-mix(in srgb, var(--cd-accent) 40%, transparent);
+}
+
+.cd-resizable--vertical > .cd-resizable__handle::after {
+  width: 24px;
+  height: 2px;
+}
+
+/* Item (list row primitive) */
+.cd-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--cd-text);
+  font-family: var(--cd-font-mono);
+  text-align: left;
+  width: 100%;
+  transition: background 0.12s ease, border-color 0.12s ease;
+}
+
+.cd-item--bordered {
+  border-color: var(--cd-border-dim);
+  background: color-mix(in srgb, var(--cd-bg-panel) 60%, transparent);
+}
+
+.cd-item--interactive {
+  cursor: pointer;
+}
+
+.cd-item--interactive:hover {
+  background: var(--cd-accent-subtle);
+  border-color: color-mix(in srgb, var(--cd-accent) 25%, transparent);
+}
+
+.cd-item__media {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--cd-accent);
+}
+
+.cd-item__content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.cd-item__title {
+  font-size: var(--cd-text-sm);
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+
+.cd-item__description {
+  font-size: var(--cd-text-xs);
+  color: var(--cd-text-muted);
+  line-height: 1.4;
+}
+
+.cd-item__actions {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.cd-item-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}