@hugobatist/smartcode 0.1.0

package/dist/static/annotations.css

@@ -0,0 +1,367 @@
+/* ═══════════════════════════════════════════════
+   SmartCode — Annotations / Flag System
+   ═══════════════════════════════════════════════ */
+
+/* ── Flag Mode Cursor ── */
+.flag-mode #preview-container {
+    cursor: crosshair !important;
+}
+.flag-mode #preview-container * {
+    cursor: crosshair !important;
+}
+.flag-mode .preview-panel {
+    cursor: crosshair !important;
+}
+.flag-mode .preview-panel.grabbing {
+    cursor: crosshair !important;
+}
+
+/* ── Edges easier to click in flag mode ── */
+.flag-mode #preview .edgePath path.flowchart-link,
+.flag-mode #preview path.flowchart-link,
+.flag-mode #preview .smartcode-edge path {
+    stroke-width: 6px !important;
+    transition: stroke 0.15s;
+}
+.flag-mode #preview .edgePath:hover path.flowchart-link,
+.flag-mode #preview path.flowchart-link:hover,
+.flag-mode #preview .smartcode-edge:hover path {
+    stroke: var(--status-problem) !important;
+    cursor: crosshair;
+}
+
+/* ── Flagged Node (red pulsing border) ── */
+#preview .flagged rect,
+#preview .flagged circle,
+#preview .flagged polygon,
+#preview .flagged .label-container {
+    stroke: var(--status-problem) !important;
+    stroke-width: 3px !important;
+    stroke-dasharray: 6 3 !important;
+    animation: flag-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes flag-pulse {
+    0%, 100% { stroke-opacity: 1; }
+    50% { stroke-opacity: 0.4; }
+}
+
+/* ── Flagged Edge (red dashed) ── */
+#preview .flagged-edge path {
+    stroke: var(--status-problem) !important;
+    stroke-width: 3px !important;
+    stroke-dasharray: 8 4 !important;
+    animation: flag-pulse 1.5s ease-in-out infinite;
+}
+
+/* ── Flag Badge (red circle with "!") ── */
+.flag-badge {
+    pointer-events: none;
+    filter: drop-shadow(0 1px 3px rgba(239, 68, 68, 0.5));
+}
+
+/* ── Flag Popover ── */
+.flag-popover {
+    position: fixed;
+    z-index: 150;
+    background: var(--surface-2);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-xl);
+    padding: 14px;
+    min-width: 260px;
+    max-width: 340px;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+    animation: pop-in 0.15s ease-out;
+}
+
+@keyframes pop-in {
+    from { opacity: 0; transform: scale(0.95); }
+    to { opacity: 1; transform: scale(1); }
+}
+
+.flag-popover-title {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 8px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.flag-popover-title .node-id {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    color: var(--accent);
+    background: var(--accent-muted);
+    padding: 2px 8px;
+    border-radius: 4px;
+}
+
+.flag-popover textarea {
+    width: 100%;
+    min-height: 60px;
+    resize: vertical;
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    background: var(--surface-2);
+    color: var(--text-primary);
+    font-family: inherit;
+    font-size: 12px;
+    padding: 8px 10px;
+    outline: none;
+    margin-bottom: 10px;
+    line-height: 1.5;
+}
+.flag-popover textarea:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 2px var(--accent-muted);
+}
+.flag-popover textarea::placeholder {
+    color: var(--text-secondary);
+}
+
+.flag-popover-actions {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+}
+
+.flag-popover .btn-flag {
+    padding: 6px 16px;
+    border-radius: 8px;
+    border: none;
+    font-size: 12px;
+    font-weight: 600;
+    font-family: inherit;
+    cursor: pointer;
+    transition: all 0.15s;
+}
+.flag-popover .btn-flag.primary {
+    background: var(--status-problem);
+    color: var(--text-on-accent);
+}
+.flag-popover .btn-flag.primary:hover {
+    background: var(--status-problem-stroke);
+}
+.flag-popover .btn-flag.secondary {
+    background: var(--surface-3);
+    color: var(--text-secondary);
+    border: 1px solid var(--border-subtle);
+}
+.flag-popover .btn-flag.secondary:hover {
+    background: var(--surface-4);
+    color: var(--text-primary);
+}
+.flag-popover .btn-flag.remove {
+    background: rgba(239,68,68,0.12);
+    color: var(--status-problem);
+    border: 1px solid rgba(239,68,68,0.2);
+}
+.flag-popover .btn-flag.remove:hover {
+    background: rgba(239,68,68,0.25);
+}
+
+/* ── Flags Panel (right side) ── */
+.flag-panel {
+    width: 280px;
+    background: var(--surface-1);
+    border-left: 1px solid var(--border-subtle);
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    transition: width 0.25s ease, opacity 0.25s ease;
+}
+.flag-panel.hidden {
+    display: none;
+}
+
+.flag-panel-header {
+    padding: 10px 14px;
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    color: var(--text-secondary);
+    border-bottom: 1px solid var(--border-subtle);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.flag-panel-count {
+    font-size: 10px;
+    background: var(--status-problem);
+    color: var(--text-on-accent);
+    padding: 1px 7px;
+    border-radius: 10px;
+    font-weight: 700;
+}
+
+.flag-panel-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 6px 0;
+}
+
+.flag-panel-file {
+    padding: 6px 14px;
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    border-bottom: 1px solid var(--surface-3);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.flag-panel-item {
+    padding: 10px 14px;
+    cursor: pointer;
+    border-bottom: 1px solid var(--surface-2);
+    transition: background 0.1s;
+}
+.flag-panel-item:hover {
+    background: var(--surface-2);
+}
+
+.flag-panel-item-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 3px;
+}
+
+.flag-panel-item-id {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--status-problem);
+}
+
+.flag-panel-item-delete {
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    font-size: 16px;
+    line-height: 1;
+    cursor: pointer;
+    padding: 0 2px;
+    opacity: 0;
+    transition: opacity 0.15s, color 0.15s;
+}
+.flag-panel-item:hover .flag-panel-item-delete {
+    opacity: 1;
+}
+.flag-panel-item-delete:hover {
+    color: var(--status-problem);
+}
+
+.flag-panel-item-msg {
+    font-size: 12px;
+    color: var(--text-secondary);
+    line-height: 1.4;
+    word-break: break-word;
+}
+
+.flag-panel-empty {
+    padding: 24px 14px;
+    text-align: center;
+    color: var(--text-secondary);
+    font-size: 12px;
+    line-height: 1.6;
+}
+
+/* ── Topbar Flag Button ── */
+#btnFlags.active {
+    background: rgba(239, 68, 68, 0.15) !important;
+    color: var(--status-problem) !important;
+    border-color: rgba(239, 68, 68, 0.3) !important;
+}
+
+/* ═══════════════════════════════════════════════
+   DIAGRAM EDITOR — Correction Actions & Modes
+   ═══════════════════════════════════════════════ */
+
+/* ── Correction actions inside flag popover ── */
+.correction-actions {
+    border-top: 1px solid var(--border-subtle);
+    margin: 8px 0;
+    padding-top: 8px;
+}
+.correction-btns {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 6px;
+}
+.btn-correction {
+    padding: 5px 12px;
+    border-radius: 6px;
+    border: 1px solid var(--border-subtle);
+    background: var(--accent-muted);
+    color: var(--accent);
+    font-size: 11px;
+    font-weight: 600;
+    font-family: inherit;
+    cursor: pointer;
+    transition: all 0.15s;
+}
+.btn-correction:hover {
+    background: rgba(59, 130, 246, 0.25);
+}
+.btn-correction-danger {
+    background: rgba(239,68,68,0.1);
+    color: var(--status-problem);
+    border-color: rgba(239,68,68,0.15);
+}
+.btn-correction-danger:hover {
+    background: rgba(239,68,68,0.2);
+}
+
+/* ── Add Node / Add Edge mode cursors ── */
+.mode-addNode #preview-container,
+.mode-addNode #preview-container *,
+.mode-addEdge #preview-container,
+.mode-addEdge #preview-container * {
+    cursor: crosshair !important;
+}
+
+/* ── Node hover highlight in addEdge mode ── */
+.mode-addEdge #preview .node:hover rect,
+.mode-addEdge #preview .node:hover circle,
+.mode-addEdge #preview .node:hover polygon,
+.mode-addEdge #preview .smartcode-node:hover rect,
+.mode-addEdge #preview .smartcode-node:hover circle,
+.mode-addEdge #preview .smartcode-node:hover polygon {
+    stroke: var(--accent) !important;
+    stroke-width: 3px !important;
+    filter: drop-shadow(0 0 6px var(--accent-muted));
+}
+
+/* ── Topbar edit buttons ── */
+#btnAddNode.active,
+#btnAddEdge.active {
+    background: var(--accent-muted) !important;
+    color: var(--accent) !important;
+    border-color: rgba(59, 130, 246, 0.3) !important;
+}
+
+/* ── Editor popover inputs ── */
+.ep-input {
+    width: 100%;
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    background: var(--surface-2);
+    color: var(--text-primary);
+    font-family: inherit;
+    font-size: 12px;
+    padding: 7px 10px;
+    outline: none;
+}
+.ep-input:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 2px var(--accent-muted);
+}