New Feature: Copy Deep-Link URL for Components and Nets

InteractiveHtmlBom/web/ibom.css

@@ -19,6 +19,18 @@
   --track-color-highlight: #D04040;
   --zone-color: #def5f1;
   --zone-color-highlight: #d0404080;
+
+  --toast-bg: rgba(222,245,241,0.45);
+  --toast-border: #d04040;
+  --toast-text: #464646;
+  --toast-muted: #d04040;
+  --toast-header-border: rgba(0,0,0,0.12);
+
+  --toast-primary: #42c642;
+  --toast-primary-hover: #d04040;
+
+  --toast-secondary: #cccccc;
+  --toast-secondary-hover: #d04040;
 }
 
 html,
@@ -35,6 +47,19 @@ body {
   --pin1-outline-color-highlight: #ccff00;
   --track-color: #42524f;
   --zone-color: #42524f;
+
+  --toast-bg: rgba(10,10,10,0.63);
+  --toast-border: #ffb629;
+  --toast-text: #f3f4f6;
+  --toast-muted: #ffb629;
+  --toast-header-border: rgba(255,255,255,0.17);
+
+  --toast-primary: #42c642;
+  --toast-primary-hover: #ffb629;
+
+  --toast-secondary: #cccccc;
+  --toast-secondary-hover: #ffb629;
+
   background-color: #252c30;
   color: #eee;
 }
@@ -885,4 +910,186 @@ a {
 
 ::-moz-focus-inner {
   padding: 0;
+}
+
+.copy-link-button {
+  font-size: 1em;
+  border: none;
+  height: 1.5em;
+  background: transparent;
+  background-color: transparent !important;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+.copy-link-button:hover {
+  opacity: 0.3;
+}
+
+.copy-status {
+    display: inline-block;
+    margin-left: 5px;
+    padding: 2px 6px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    font-size: 12px;
+
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.4s ease;
+}
+
+.copy-status.visible {
+    opacity: 1;
+    visibility: visible;
+}
+
+.reference-warning-toast {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+
+  width: 420px;
+  max-width: calc(100vw - 32px);
+
+  border: 2px solid var(--toast-border);
+  border-left: 6px solid var(--toast-border);
+
+  border-radius: 12px;
+
+  box-shadow:
+    0 10px 25px rgba(0, 0, 0, 0.12),
+    0 2px 8px rgba(0, 0, 0, 0.06);
+
+  z-index: 10000;
+
+  overflow: hidden;
+
+  animation: toast-slide-in 0.25s ease-out;
+
+  backdrop-filter: blur(10px);
+  background: var(--toast-bg);
+}
+
+.toast-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  padding: 14px 16px;
+
+  border-bottom: 2px solid var(--toast-header-border);
+}
+
+.toast-icon {
+  font-size: 18px;
+}
+
+.toast-title {
+  flex: 1;
+  font-weight: 600;
+  font-size: 15px;
+  color: var(--toast-border);
+}
+
+.toast-close {
+  border: none;
+  background: transparent !important;
+  cursor: pointer;
+
+  color: var(--toast-text);
+  font-size: 22px;
+  line-height: 1;
+
+  padding: 0;
+}
+
+.toast-close:hover {
+  color: var(--toast-border);
+}
+
+.toast-body {
+  padding: 16px;
+  color: var(--toast-text);
+  line-height: 1.5;
+}
+
+.toast-body p {
+  margin: 0;
+}
+
+.toast-body p + p {
+  margin-top: 8px;
+}
+
+.toast-body strong {
+	color: var(--toast-border);
+}
+
+
+.toast-note {
+  color: var(--toast-muted);
+  font-size: 14px;
+}
+
+
+.toast-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+
+  padding: 0 16px 16px;
+}
+
+.btn {
+  border: none;
+  border-radius: 8px;
+
+  padding: 10px 16px;
+
+  font-size: 14px;
+  font-weight: 500;
+
+  cursor: pointer;
+
+  width: auto;
+  height: auto;
+
+  transition:
+    background-color 0.15s,
+    transform 0.1s;
+}
+
+.btn:hover {
+  transform: translateY(-1px);
+}
+
+.btn-primary {
+  background: var(--toast-primary) !important;
+  color: white;
+}
+
+.btn-primary:hover {
+  background: var(--toast-primary-hover) !important;
+}
+
+.btn-secondary {
+  background: var(--toast-secondary) !important;
+  color: #111827;
+}
+
+.btn-secondary:hover {
+  background: var(--toast-secondary-hover) !important;
+}
+
+@keyframes toast-slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(24px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }