web-a2e 1.0.0

package/src/css/basic-editor.css

@@ -0,0 +1,792 @@
+/* ============================================
+   BASIC Program Window (Unified Editor + Debugger)
+   Styling matches CPU debugger and assembler views
+   ============================================ */
+
+/* Main unified container */
+.basic-unified-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+}
+
+/* Main area with editor and sidebar */
+.basic-main-area {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    gap: 8px;
+}
+
+/* Editor section (left side) */
+.basic-editor-section {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    gap: 6px;
+}
+
+/* Editor with gutter wrapper - clean style matching debug windows */
+.basic-editor-with-gutter {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    border: 1px solid var(--glass-border);
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    background: var(--editor-bg);
+}
+
+.basic-editor-with-gutter:focus-within {
+    border-color: var(--editor-focus-border);
+    box-shadow: 0 0 0 2px var(--editor-focus-shadow);
+}
+
+/* Gutter - matches CPU debugger gutter style */
+.basic-gutter {
+    flex-shrink: 0;
+    width: 28px;
+    overflow: hidden;
+    background: var(--control-bg);
+    border-right: 1px solid var(--glass-border);
+    user-select: none;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+.basic-gutter::-webkit-scrollbar {
+    display: none;
+}
+
+.basic-gutter-line {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 16.5px; /* matches line-height: 1.5 * 11px */
+    padding: 0 4px;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    border-left: 2px solid transparent;
+    transition: background 0.08s;
+}
+
+.basic-gutter-line.clickable {
+    cursor: pointer;
+}
+
+.basic-gutter-line.clickable:hover {
+    background: var(--overlay-subtle);
+}
+
+/* Breakpoint indicator - matches CPU debugger */
+.basic-gutter-line.has-bp {
+    background: var(--accent-red-bg);
+    border-left-color: var(--accent-red);
+}
+
+/* Current executing line in gutter - blue like CPU debugger */
+.basic-gutter-line.is-current {
+    background: var(--accent-blue-bg);
+    border-left-color: var(--accent-blue);
+}
+
+/* Both breakpoint and current */
+.basic-gutter-line.has-bp.is-current {
+    background: linear-gradient(90deg, var(--accent-blue-bg) 0%, var(--accent-red-bg) 100%);
+    border-left-color: var(--accent-red);
+}
+
+/* Breakpoint marker - red dot matching CPU debugger */
+.basic-gutter-bp {
+    width: 14px;
+    text-align: center;
+    color: var(--accent-red);
+    font-size: 10px;
+}
+
+/* Ghost breakpoint on hover - matches CPU debugger */
+.basic-gutter-line.clickable:not(.has-bp):hover .basic-gutter-bp::before {
+    content: "\25CB";
+    color: var(--text-muted);
+    font-size: 8px;
+}
+
+.basic-gutter-current {
+    display: none;
+}
+
+/* Heat map toggle - compact version for toolbar */
+.basic-heat-toggle {
+    gap: 4px !important;
+    font-size: 10px !important;
+}
+
+.basic-heat-toggle .toggle-switch {
+    width: 28px;
+    height: 16px;
+    border-radius: 8px;
+}
+
+.basic-heat-toggle .toggle-switch::after {
+    width: 10px;
+    height: 10px;
+    top: 2px;
+    left: 2px;
+}
+
+.basic-heat-toggle input:checked + .toggle-switch::after {
+    left: 14px;
+}
+
+/* Editor footer with stats and actions */
+.basic-editor-footer {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.basic-status {
+    display: flex;
+    gap: 12px;
+    padding: 4px 8px;
+    background: var(--input-bg-dark);
+    border-radius: var(--radius-sm);
+    font-size: 10px;
+    color: var(--text-muted);
+}
+
+/* Editor container - overlay technique for syntax highlighting */
+.basic-editor-container {
+    flex: 1;
+    position: relative;
+    min-height: 0;
+    background: var(--editor-bg);
+    overflow: hidden;
+}
+
+/* Current cursor line highlight bar */
+.basic-line-highlight {
+    position: absolute;
+    left: 0;
+    right: 0;
+    pointer-events: none;
+    background: var(--overlay-white-04, rgba(255, 255, 255, 0.04));
+    opacity: 0;
+    transition: opacity 0.12s;
+}
+
+.basic-line-highlight.visible {
+    opacity: 1;
+}
+
+/* Shared styles for textarea and highlight overlay */
+.basic-textarea,
+.basic-highlight {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 8px;
+    margin: 0;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    line-height: 1.5;
+    white-space: pre;
+    word-wrap: normal;
+    overflow-wrap: normal;
+    box-sizing: border-box;
+    overflow: auto;
+}
+
+/* Highlight layer - shows colored syntax, behind textarea */
+.basic-highlight {
+    pointer-events: none;
+    overflow: hidden; /* Scroll synced with textarea via JS */
+    z-index: 0;
+}
+
+/* Textarea - transparent text, receives input */
+.basic-textarea {
+    color: transparent;
+    caret-color: var(--accent-green);
+    background: transparent;
+    border: none;
+    resize: none;
+    outline: none;
+    z-index: 1;
+}
+
+.basic-textarea::placeholder {
+    color: var(--editor-placeholder);
+}
+
+/* ==========================================
+   SYNTAX HIGHLIGHTING - Matching Assembler Style
+   Uses --syntax-* variables for theme consistency
+   ========================================== */
+
+/* Line numbers - muted, matching assembler address style */
+.basic-highlight .bas-linenum {
+    color: var(--text-muted);
+    font-weight: 500;
+}
+
+/* Flow control - RED (GOTO, GOSUB, IF, THEN, END, STOP, etc)
+   Matches: .cpu-disasm-mnemonic.flow, .dis-branch */
+.basic-highlight .bas-flow {
+    color: var(--syntax-flow);
+    font-weight: 500;
+}
+
+/* Loop constructs - PURPLE (FOR, TO, STEP, NEXT)
+   Matches: .dis-stack, .mer-stack */
+.basic-highlight .bas-loop {
+    color: var(--syntax-stack);
+    font-weight: 500;
+}
+
+/* I/O operations - BLUE (PRINT, INPUT, GET, READ, DATA)
+   Matches: .dis-flag, .mer-flag, .syntax-keyword */
+.basic-highlight .bas-io {
+    color: var(--syntax-keyword);
+    font-weight: 500;
+}
+
+/* Graphics commands - GREEN (HGR, PLOT, HPLOT, COLOR, etc)
+   Matches: .dis-load, .mer-load */
+.basic-highlight .bas-graphics {
+    color: var(--syntax-load);
+    font-weight: 500;
+}
+
+/* Memory operations - ORANGE (PEEK, POKE, CALL, etc)
+   Matches: .dis-math, .mer-math */
+.basic-highlight .bas-memory {
+    color: var(--syntax-math);
+    font-weight: 500;
+}
+
+/* Built-in functions - BLUE (SIN, COS, LEN, etc)
+   Matches: .dis-flag, .syntax-flag */
+.basic-highlight .bas-func {
+    color: var(--syntax-flag);
+}
+
+/* Variable keywords - GREEN (DIM, LET, etc)
+   Matches: .dis-load */
+.basic-highlight .bas-var {
+    color: var(--syntax-load);
+    font-weight: 500;
+}
+
+/* Misc keywords - muted gray
+   Matches: .syntax-data */
+.basic-highlight .bas-misc {
+    color: var(--syntax-data);
+}
+
+/* Generic keyword fallback - BLUE
+   Matches: .syntax-keyword */
+.basic-highlight .bas-keyword {
+    color: var(--syntax-keyword);
+    font-weight: 500;
+}
+
+/* String literals - GREEN
+   Matches: .syntax-string, .mer-string */
+.basic-highlight .bas-string {
+    color: var(--syntax-string);
+}
+
+/* Numeric literals - ORANGE (matching assembler numbers for addresses/data)
+   Matches: .dis-address, .syntax-math */
+.basic-highlight .bas-number {
+    color: var(--syntax-math);
+}
+
+/* Variable names - PRIMARY TEXT (white in dark, dark in light)
+   Matches: .bas-variable in file-explorer, .mer-symbol */
+.basic-highlight .bas-variable {
+    color: var(--text-primary);
+}
+
+/* Operators - PURPLE
+   Matches: .syntax-operator */
+.basic-highlight .bas-operator {
+    color: var(--syntax-operator);
+}
+
+/* Punctuation - muted
+   Matches: .dis-punct */
+.basic-highlight .bas-punct {
+    color: var(--text-muted);
+}
+
+/* Comments - gray italic
+   Matches: .syntax-comment, .dis-comment */
+.basic-highlight .bas-comment {
+    color: var(--syntax-comment);
+    font-style: italic;
+}
+
+/* Base line style for the highlight layer */
+.basic-highlight .basic-line {
+    display: block;
+    min-height: 16.5px; /* Match line-height: 1.5 * 11px */
+}
+
+/* Current executing line highlight - matches CPU debugger style */
+.basic-highlight .basic-current-line {
+    background: var(--accent-blue-bg) !important;
+}
+
+/* Line number on executing line - brighter */
+.basic-highlight .basic-current-line .bas-linenum {
+    color: var(--text-primary);
+    font-weight: 600;
+}
+
+/* Keywords brighter on current line - matches CPU debugger */
+.basic-highlight .basic-current-line .bas-flow {
+    color: var(--syntax-flow-bright);
+}
+
+.basic-highlight .basic-current-line .bas-loop {
+    color: var(--syntax-symbol-basic-bright);
+}
+
+.basic-highlight .basic-current-line .bas-io,
+.basic-highlight .basic-current-line .bas-keyword {
+    color: var(--syntax-symbol-io-bright);
+}
+
+.basic-highlight .basic-current-line .bas-graphics,
+.basic-highlight .basic-current-line .bas-var {
+    color: var(--syntax-symbol-zp-bright);
+}
+
+.basic-highlight .basic-current-line .bas-memory {
+    color: var(--syntax-symbol-sw-bright);
+}
+
+.basic-highlight .basic-current-line .bas-func {
+    color: var(--syntax-symbol-rom-bright);
+}
+
+.basic-highlight .basic-current-line .bas-string {
+    color: var(--syntax-symbol-zp-bright);
+}
+
+.basic-highlight .basic-current-line .bas-number {
+    color: var(--syntax-symbol-sw-bright);
+}
+
+.basic-highlight .basic-current-line .bas-variable {
+    color: var(--text-primary);
+    font-weight: 500;
+}
+
+/* Breakpoint-triggered line highlight - red instead of blue */
+.basic-highlight .basic-current-line.basic-breakpoint-hit {
+    background: rgba(224, 58, 62, 0.15) !important;
+}
+
+/* Statement-level highlight within a multi-statement line */
+.basic-highlight .basic-current-line .basic-current-statement {
+    background: var(--accent-red-bg);
+    border-bottom: 2px solid var(--accent-red);
+    border-radius: 2px;
+}
+
+/* Dim non-active statements on the current line when a specific statement is highlighted */
+.basic-highlight .basic-current-line.basic-has-statements {
+    background: none !important;
+}
+
+.basic-highlight .basic-current-line.basic-has-statements .basic-statement {
+    opacity: 0.5;
+}
+
+.basic-highlight .basic-current-line.basic-has-statements .basic-current-statement {
+    opacity: 1;
+    background: var(--accent-red-bg) !important;
+}
+
+/* Statement breakpoint: dashed red underline */
+.basic-highlight .basic-statement.basic-statement-bp {
+    border-bottom: 2px dashed var(--accent-red);
+    border-radius: 2px;
+}
+
+/* Current execution (solid) overrides breakpoint indicator (dashed) */
+.basic-highlight .basic-current-statement.basic-statement-bp {
+    border-bottom: 2px solid var(--accent-red);
+}
+
+/* Hover highlight for statement breakpoint targeting */
+.basic-highlight .basic-statement.basic-statement-hover {
+    background: var(--accent-blue-bg);
+    border-radius: 2px;
+}
+
+/* Runtime error line highlight */
+.basic-highlight .basic-error-line {
+    background: var(--accent-red-bg) !important;
+}
+
+/* Error statement within a multi-statement line */
+.basic-highlight .basic-error-statement {
+    border-bottom: 2px solid var(--accent-red);
+    background: var(--accent-red-bg-strong);
+    border-radius: 2px;
+}
+
+/* Inline error message label */
+.basic-error-msg {
+    float: right;
+    padding: 0 6px;
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--accent-red);
+    background: var(--glass-bg);
+    border: 1px solid var(--accent-red-border);
+    border-radius: 3px;
+    white-space: nowrap;
+    margin-right: 4px;
+}
+
+/* Error indicator in gutter */
+.basic-gutter-line.has-error {
+    background: var(--accent-red-bg);
+    border-left-color: var(--accent-red);
+}
+
+.basic-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    width: 100%;
+}
+
+.basic-actions .basic-btn {
+    flex: 1 1 auto;
+    min-width: 100px;
+}
+
+/* Info button in breakpoints header - matches add button style */
+.basic-dbg-bp-info-btn {
+    padding: 2px 6px;
+    font-family: var(--font-serif, Georgia, serif);
+    font-style: italic;
+    font-weight: 600;
+    font-size: 11px;
+    background: var(--control-bg);
+    border: 1px solid var(--control-border);
+    border-radius: 3px;
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: all 0.12s;
+}
+
+.basic-dbg-bp-info-btn:hover {
+    color: var(--accent-blue);
+    border-color: var(--accent-blue-border);
+    background: var(--accent-blue-bg);
+}
+
+/* Info popover */
+.basic-info-popover {
+    position: fixed;
+    width: 260px;
+    background: var(--glass-bg-solid);
+    border: 1px solid var(--glass-border);
+    border-radius: var(--radius-sm);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+    padding: 10px 12px;
+    z-index: 10001;
+    font-style: normal;
+    text-align: left;
+    cursor: default;
+}
+
+.basic-info-popover-title {
+    font-family: var(--font-sans);
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 8px;
+    padding-bottom: 5px;
+    border-bottom: 1px solid var(--glass-border-subtle);
+}
+
+.basic-info-popover-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: 8px;
+    padding: 3px 0;
+}
+
+.basic-info-popover-key {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    font-weight: 500;
+    color: var(--accent-blue);
+    white-space: nowrap;
+}
+
+.basic-info-popover-desc {
+    font-family: var(--font-sans);
+    font-size: 10px;
+    color: var(--text-secondary);
+}
+
+/* Resizable splitter between editor and sidebar - matches assembler style */
+.basic-splitter {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 6px;
+    cursor: col-resize;
+    background: var(--glass-bg-header);
+    border-left: 1px solid var(--glass-border-subtle);
+    border-right: 1px solid var(--glass-border-subtle);
+    z-index: 2;
+}
+
+.basic-splitter-handle {
+    width: 2px;
+    height: 32px;
+    background: var(--glass-border);
+    border-radius: 1px;
+}
+
+.basic-splitter:hover .basic-splitter-handle {
+    background: var(--accent-green-border);
+}
+
+/* Sidebar for variables and breakpoints */
+.basic-dbg-sidebar {
+    display: flex;
+    flex-direction: column;
+    width: 200px;
+    min-width: 120px;
+    max-width: 600px;
+    flex-shrink: 0;
+}
+
+.basic-dbg-var-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 80px;
+    border: 1px solid var(--control-border);
+    border-radius: 4px;
+    background: var(--control-bg);
+    overflow: hidden;
+}
+
+/* Horizontal splitter between variables and breakpoints - matches assembler style */
+.basic-sidebar-splitter {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 6px;
+    cursor: row-resize;
+    background: var(--glass-bg-header);
+    border-top: 1px solid var(--glass-border-subtle);
+    border-bottom: 1px solid var(--glass-border-subtle);
+    z-index: 2;
+}
+
+.basic-sidebar-splitter-handle {
+    width: 32px;
+    height: 2px;
+    background: var(--glass-border);
+    border-radius: 1px;
+}
+
+.basic-sidebar-splitter:hover .basic-sidebar-splitter-handle {
+    background: var(--accent-green-border);
+}
+
+.basic-btn {
+    padding: 4px 8px;
+    font-family: var(--font-sans);
+    font-size: 10px;
+    font-weight: 500;
+    background: var(--glass-bg-header);
+    border: 1px solid var(--control-border);
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: background 0.15s, border-color 0.15s, color 0.15s;
+    white-space: nowrap;
+    text-align: center;
+}
+
+.basic-btn:hover {
+    background: var(--glass-border);
+    color: var(--text-primary);
+}
+
+.basic-load-btn:hover {
+    background: var(--accent-blue-bg-strong);
+    border-color: var(--accent-blue-border);
+    color: var(--accent-blue);
+}
+
+.basic-insert-btn:hover {
+    background: var(--accent-green-bg-strong);
+    border-color: var(--accent-green-border);
+    color: var(--accent-green);
+}
+
+.basic-clear-btn:hover {
+    background: var(--accent-red-bg-stronger);
+    border-color: var(--accent-red-border);
+    color: var(--accent-red);
+}
+
+.basic-btn-cancel {
+    background: var(--accent-orange-bg-strong) !important;
+    border-color: var(--accent-orange-border) !important;
+    color: var(--accent-orange) !important;
+}
+
+.basic-btn-cancel:hover {
+    background: var(--accent-orange-bg-stronger) !important;
+}
+
+/* BASIC Autocomplete Dropdown */
+.basic-autocomplete-dropdown {
+    position: absolute;
+    z-index: 1000;
+    display: none;
+    width: 260px;
+    background: rgba(22, 27, 34, 0.98);
+    border: 1px solid var(--accent-green-border);
+    border-radius: var(--radius-sm);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.3);
+    overflow: hidden;
+}
+
+.basic-autocomplete-dropdown.visible {
+    display: block;
+}
+
+.autocomplete-list {
+    max-height: 180px;
+    overflow-y: auto;
+}
+
+.autocomplete-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px 10px;
+    cursor: pointer;
+    border-bottom: 1px solid var(--glass-border-subtle);
+}
+
+.autocomplete-item:last-child {
+    border-bottom: none;
+}
+
+.autocomplete-item:hover {
+    background: var(--accent-green-bg);
+}
+
+.autocomplete-item.selected {
+    background: rgba(63, 185, 80, 0.25);
+}
+
+.autocomplete-keyword {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--syntax-data);
+}
+
+.autocomplete-keyword .match {
+    color: var(--accent-green);
+    font-weight: 700;
+}
+
+.autocomplete-category {
+    font-family: var(--font-sans);
+    font-size: 9px;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+    opacity: 0.7;
+}
+
+/* Program-specific item categories */
+.autocomplete-item[data-type="variable"] .autocomplete-keyword {
+    color: var(--syntax-math);
+}
+
+.autocomplete-item[data-type="variable"] .autocomplete-category {
+    color: var(--syntax-math);
+}
+
+.autocomplete-item[data-type="line"] .autocomplete-keyword {
+    color: var(--syntax-flag);
+}
+
+.autocomplete-item[data-type="line"] .autocomplete-category {
+    color: var(--syntax-flag);
+}
+
+.autocomplete-item[data-type="function"] .autocomplete-keyword {
+    color: var(--syntax-stack);
+}
+
+.autocomplete-item[data-type="function"] .autocomplete-category {
+    color: var(--syntax-stack);
+}
+
+.autocomplete-hint {
+    padding: 6px 10px;
+    background: rgba(33, 38, 45, 0.8);
+    border-top: 1px solid var(--separator-bg);
+}
+
+.hint-syntax {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--syntax-keyword);
+    margin-bottom: 2px;
+}
+
+.hint-desc {
+    font-family: var(--font-sans);
+    font-size: 9px;
+    color: var(--text-muted);
+}
+
+/* Scrollbar for autocomplete list */
+.autocomplete-list::-webkit-scrollbar {
+    width: 6px;
+}
+
+.autocomplete-list::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.autocomplete-list::-webkit-scrollbar-thumb {
+    background: var(--glass-border);
+    border-radius: 3px;
+}
+
+.autocomplete-list::-webkit-scrollbar-thumb:hover {
+    background: var(--accent-green-border);
+}