vscode-extensions/archify-vscode-ext
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

0.9.0: model graph with queries #27

Merged
root-at-skic merged 10 commits from feat/model-graph into main 2026-10-21 13:08:36 -07:00
Conversation 0 Commits 10 Files Changed 21
+38 -14
2 changed files with 38 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 82dd10253b - Show all commits
src/graph/index.ts
+6 -3
View File
@@ -226,11 +226,13 @@ class GraphPage {
sw.setAttribute('aria-label', 'Graph view on; switch to the model page'); sw.setAttribute('aria-label', 'Graph view on; switch to the model page');
sw.append(el('span', 'ag-seg', 'Model'), el('span', 'ag-seg on', 'Graph')); sw.append(el('span', 'ag-seg', 'Model'), el('span', 'ag-seg on', 'Graph'));
sw.addEventListener('click', () => this.host.post({ type: 'showModel' })); sw.addEventListener('click', () => this.host.post({ type: 'showModel' }));
const exportButton = el('button', 'ag-button', 'Export PNG'); const exportButton = el('button', 'ag-button ag-primary', 'Export PNG');
exportButton.type = 'button'; exportButton.type = 'button';
exportButton.title = 'Save the graph as it is on screen, as a PNG'; exportButton.title = 'Save the graph as it is on screen, as a PNG';
exportButton.addEventListener('click', () => this.exportPng()); exportButton.addEventListener('click', () => this.exportPng());
this.themeButton.type = 'button'; this.themeButton.type = 'button';
this.themeButton.setAttribute('role', 'switch');
this.themeButton.append(el('span', 'ag-theme-icon'), el('span', 'ag-sr', 'Dark theme'));
this.themeButton.addEventListener('click', () => this.setTheme(currentTheme() === 'dark' ? 'light' : 'dark')); this.themeButton.addEventListener('click', () => this.setTheme(currentTheme() === 'dark' ? 'light' : 'dark'));
this.syncThemeButton(); this.syncThemeButton();
actions.append(sw, this.themeButton, exportButton); actions.append(sw, this.themeButton, exportButton);
@@ -451,8 +453,9 @@ class GraphPage {
private syncThemeButton(): void { private syncThemeButton(): void {
const dark = currentTheme() === 'dark'; const dark = currentTheme() === 'dark';
this.themeButton.textContent = dark ? '\u263e' : '\u2600'; this.themeButton.dataset.on = dark ? 'dark' : 'light';
this.themeButton.title = dark ? 'Switch to the light theme' : 'Switch to the dark theme'; this.themeButton.setAttribute('aria-checked', String(dark));
this.themeButton.title = dark ? 'Dark theme on; switch to light' : 'Light theme on; switch to dark';
this.themeButton.setAttribute('aria-label', this.themeButton.title); this.themeButton.setAttribute('aria-label', this.themeButton.title);
} }
src/graph/style.ts
+32 -11
View File
@@ -9,23 +9,44 @@ export const GRAPH_PAGE_STYLE = `
:root[data-theme="dark"] { --ag-bg: #0b1020; --ag-fg: #e5e7eb; --ag-muted: #9ca3af; --ag-panel: #111a2e; --ag-border: rgba(148, 163, 184, 0.28); --ag-accent: #22d3ee; --ag-input: #0f172a; --ag-input-fg: #e5e7eb; --ag-input-border: rgba(148, 163, 184, 0.28); --ag-error: #f87171; color-scheme: dark; } :root[data-theme="dark"] { --ag-bg: #0b1020; --ag-fg: #e5e7eb; --ag-muted: #9ca3af; --ag-panel: #111a2e; --ag-border: rgba(148, 163, 184, 0.28); --ag-accent: #22d3ee; --ag-input: #0f172a; --ag-input-fg: #e5e7eb; --ag-input-border: rgba(148, 163, 184, 0.28); --ag-error: #f87171; color-scheme: dark; }
:root[data-theme="light"] { --ag-bg: #ffffff; --ag-fg: #0f172a; --ag-muted: #64748b; --ag-panel: #f8fafc; --ag-border: rgba(15, 23, 42, 0.14); --ag-accent: #0e7490; --ag-input: #ffffff; --ag-input-fg: #0f172a; --ag-input-border: rgba(15, 23, 42, 0.2); --ag-error: #b91c1c; --ag-external: #64748b; --ag-registry: #94a3b8; color-scheme: light; } :root[data-theme="light"] { --ag-bg: #ffffff; --ag-fg: #0f172a; --ag-muted: #64748b; --ag-panel: #f8fafc; --ag-border: rgba(15, 23, 42, 0.14); --ag-accent: #0e7490; --ag-input: #ffffff; --ag-input-fg: #0f172a; --ag-input-border: rgba(15, 23, 42, 0.2); --ag-error: #b91c1c; --ag-external: #64748b; --ag-registry: #94a3b8; color-scheme: light; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ag-bg); color: var(--ag-fg); font-family: var(--ag-font); font-size: 13px; } html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ag-bg); color: var(--ag-fg); font-family: var(--ag-font); font-size: 13px; }
.ag-theme { width: 1.9rem; padding: 0; font-size: 0.95rem; line-height: 1; }
.ag { display: grid; grid-template-rows: auto auto minmax(0, 1fr); height: 100%; } .ag { display: grid; grid-template-rows: auto auto minmax(0, 1fr); height: 100%; }
.ag-top { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--ag-border); } .ag-top { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--ag-border); }
.ag-kicker { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ag-accent); } .ag-kicker { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ag-accent); }
.ag-name { font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; } .ag-name { font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; }
.ag-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; } .ag-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.ag-switch { display: inline-flex; padding: 0; border: 1px solid var(--ag-border); border-radius: 999px; background: var(--ag-panel); color: var(--ag-muted); font: inherit; cursor: pointer; overflow: hidden; } .ag-bar .ag-button { min-height: 2rem; }
.ag-switch:focus-visible { outline: 2px solid var(--ag-accent); outline-offset: 2px; } /* Toolbar controls follow Archify's: quiet pills (0.5rem) inside 0.5625rem buttons, one filled primary action (0.6875rem), the 2D | 3D switch's twin. */
.ag-seg { display: inline-flex; align-items: center; height: 1.75rem; padding: 0 0.8rem; border-radius: 999px; font-weight: 600; font-size: 0.8125rem; transition: background 0.15s, color 0.15s; } .ag-switch { position: relative; isolation: isolate; display: inline-flex; padding: 0 0.25rem; border: 0; border-radius: 0.5625rem; background: transparent; color: var(--ag-muted); font: inherit; cursor: pointer; }
.ag-seg.on { color: var(--ag-bg); background: var(--ag-fg); } .ag-switch::before { content: ""; position: absolute; z-index: -1; inset: 0.25rem 0; border-radius: 0.6875rem; background: color-mix(in srgb, var(--ag-panel) 78%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ag-border) 85%, transparent), 0 1px 2px rgba(15, 23, 42, 0.04); }
.ag-switch:hover::before { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ag-fg) 22%, transparent), 0 1px 2px rgba(15, 23, 42, 0.04); }
.ag-switch:focus-visible { outline: 2px solid var(--ag-accent); outline-offset: -4px; }
.ag-seg { display: inline-flex; align-items: center; height: 1.75rem; margin: 0.25rem 0; padding: 0 0.7rem; border-radius: 0.5rem; font-weight: 550; font-size: 0.8125rem; transition: background 0.15s, color 0.15s; }
.ag-seg.on { color: var(--ag-bg); background: var(--ag-fg); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 6px 16px -8px rgba(15, 23, 42, 0.4); }
.ag-switch:hover .ag-seg:not(.on) { color: var(--ag-fg); } .ag-switch:hover .ag-seg:not(.on) { color: var(--ag-fg); }
.ag-button { font: inherit; font-size: 0.8125rem; font-weight: 600; height: 1.9rem; padding: 0 0.85rem; border-radius: 999px; border: 1px solid var(--ag-border); background: var(--ag-panel); color: var(--ag-fg); cursor: pointer; white-space: nowrap; } .ag-button { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 0.4rem; font: inherit; font-size: 0.8125rem; font-weight: 500; min-height: 2.25rem; padding: 0.25rem 0.58rem; border-radius: 0.5625rem; border: 0; background: transparent; color: var(--ag-muted); cursor: pointer; white-space: nowrap; transition: color 0.15s; }
.ag-button:hover { border-color: var(--ag-accent); } .ag-button::before { content: ""; position: absolute; z-index: -1; inset: 0.25rem 0; border-radius: 0.5rem; background: transparent; transition: background 0.15s, box-shadow 0.15s; }
.ag-button[aria-pressed="true"] { background: var(--ag-fg); color: var(--ag-bg); border-color: var(--ag-fg); } .ag-button:hover { color: var(--ag-fg); }
.ag-button:focus-visible { outline: 2px solid var(--ag-accent); outline-offset: 2px; } .ag-button:hover::before { background: color-mix(in srgb, var(--ag-fg) 6%, transparent); }
.ag-button[aria-pressed="true"] { color: var(--ag-fg); }
.ag-button[aria-pressed="true"]::before { background: color-mix(in srgb, var(--ag-fg) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ag-fg) 14%, transparent); }
.ag-button:focus-visible { outline: 2px solid var(--ag-accent); outline-offset: -4px; }
.ag-primary { color: var(--ag-bg); font-weight: 600; padding: 0.25rem 0.9rem; }
.ag-primary::before { inset: 0.25rem 0; border-radius: 0.6875rem; background: var(--ag-fg); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 6px 16px -8px rgba(15, 23, 42, 0.4); }
.ag-primary:hover { color: var(--ag-bg); }
.ag-primary:hover::before { background: color-mix(in srgb, var(--ag-fg) 86%, var(--ag-bg)); }
/* Theme toggle: Archify's own, a pill track with a knob that slides and carries the sun or moon. */
.ag-theme { width: 3.5rem; padding: 0; justify-content: center; }
.ag-theme::before { inset: 0.6rem 0.4375rem; border-radius: 999px; background: color-mix(in srgb, var(--ag-fg) 9%, transparent); box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08); }
.ag-theme:hover::before { background: color-mix(in srgb, var(--ag-fg) 13%, transparent); }
.ag-theme::after { content: ""; position: absolute; z-index: 0; top: 50%; left: 0.5625rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--ag-panel); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.12); transform: translateY(-50%); transition: left 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
.ag-theme[data-on="dark"]::before { background: rgba(148, 163, 184, 0.16); }
.ag-theme[data-on="dark"]::after { left: calc(100% - 0.5625rem - 1.125rem); background: #3b4a63; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.ag-theme-icon { position: absolute; z-index: 1; top: 50%; left: calc(0.5625rem + 0.1875rem); width: 0.75rem; height: 0.75rem; color: var(--ag-cloud); background: currentColor; transform: translateY(-50%); transition: left 0.22s cubic-bezier(0.22, 1, 0.36, 1); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='3.1'/%3E%3Cpath d='M10 2.2v1.4M10 16.4v1.4M2.2 10h1.4M16.4 10h1.4M4.5 4.5l1 1M14.5 14.5l1 1M15.5 4.5l-1 1M5.5 14.5l-1 1'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='3.1'/%3E%3Cpath d='M10 2.2v1.4M10 16.4v1.4M2.2 10h1.4M16.4 10h1.4M4.5 4.5l1 1M14.5 14.5l1 1M15.5 4.5l-1 1M5.5 14.5l-1 1'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.ag-theme[data-on="dark"] .ag-theme-icon { left: calc(100% - 0.5625rem - 1.125rem + 0.1875rem); color: #c7d2fe; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M15.2 12.7A6.3 6.3 0 017.3 4.8a6.3 6.3 0 107.9 7.9Z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M15.2 12.7A6.3 6.3 0 017.3 4.8a6.3 6.3 0 107.9 7.9Z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ag-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ag-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1.25rem; border-bottom: 1px solid var(--ag-border); flex-wrap: wrap; } .ag-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1.25rem; border-bottom: 1px solid var(--ag-border); flex-wrap: wrap; }
.ag-query-wrap { flex: 1 1 18rem; display: flex; align-items: center; gap: 0.5rem; min-width: 0; background: var(--ag-input); border: 1px solid var(--ag-input-border); border-radius: 0.6rem; padding: 0 0.6rem; } .ag-query-wrap { flex: 1 1 18rem; display: flex; align-items: center; gap: 0.5rem; min-width: 0; background: var(--ag-input); border: 1px solid var(--ag-input-border); border-radius: 0.5625rem; padding: 0 0.6rem; }
.ag-query-wrap:focus-within { border-color: var(--ag-accent); } .ag-query-wrap:focus-within { border-color: var(--ag-accent); }
.ag-query { flex: 1; min-width: 0; height: 2rem; border: 0; background: transparent; color: var(--ag-input-fg); font-family: var(--ag-mono); font-size: 0.875rem; outline: none; } .ag-query { flex: 1; min-width: 0; height: 2rem; border: 0; background: transparent; color: var(--ag-input-fg); font-family: var(--ag-mono); font-size: 0.875rem; outline: none; }
.ag-query::placeholder { color: var(--ag-muted); opacity: 0.8; } .ag-query::placeholder { color: var(--ag-muted); opacity: 0.8; }
@@ -55,7 +76,7 @@ html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ag-bg)
.ag-link.is-accepted .ag-dot { background: var(--ag-backend); } .ag-link.is-proposed .ag-dot { background: var(--ag-cloud); } .ag-link.is-rejected .ag-dot { background: var(--ag-security); } .ag-link.is-superseded .ag-dot { background: var(--ag-external); } .ag-link.is-accepted .ag-dot { background: var(--ag-backend); } .ag-link.is-proposed .ag-dot { background: var(--ag-cloud); } .ag-link.is-rejected .ag-dot { background: var(--ag-security); } .ag-link.is-superseded .ag-dot { background: var(--ag-external); }
.ag-empty { color: var(--ag-muted); } .ag-empty { color: var(--ag-muted); }
.ag-side-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; } .ag-side-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.ag-help { position: absolute; top: 0.5rem; right: 20.75rem; z-index: 5; width: min(26rem, calc(100% - 2rem)); max-height: calc(100% - 1rem); overflow: auto; padding: 0.9rem 1rem; border: 1px solid var(--ag-border); border-radius: 0.75rem; background: var(--ag-panel); box-shadow: 0 16px 40px rgba(0,0,0,.35); } .ag-help { position: absolute; top: 0.5rem; right: 20.75rem; z-index: 5; width: min(26rem, calc(100% - 2rem)); max-height: calc(100% - 1rem); overflow: auto; padding: 0.9rem 1rem; border: 1px solid var(--ag-border); border-radius: 0.6875rem; background: var(--ag-panel); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.ag-main.is-side-hidden .ag-help { right: 0.75rem; } .ag-main.is-side-hidden .ag-help { right: 0.75rem; }
.ag-help h3 { margin: 0 0 0.5rem; font-size: 0.8125rem; } .ag-help h3 { margin: 0 0 0.5rem; font-size: 0.8125rem; }
.ag-help table { border-collapse: collapse; width: 100%; font-size: 0.8125rem; } .ag-help table { border-collapse: collapse; width: 100%; font-size: 0.8125rem; }