@gjsify/adwaita-web 0.14.0 → 0.16.0

package/src/source-view/hex.ts

@@ -0,0 +1,43 @@
+// Pure, framework-free helpers for <adw-source-view>. They carry no CodeMirror
+// or DOM dependency so they stay unit-testable on any runtime and drive the
+// gutter formatter + the hex copy-without-spaces behaviour.
+// Reference: packages/app-gnome/src/gutter-renderer-line-numbers.ts (native parity)
+// Reference: packages/app-gnome/src/widgets/source-view.ts onCopyHexClipboard()
+
+/** Bytes represented per visual line in the hex monitor / hexdump gutter. */
+export const HEX_ADDRESS_STRIDE = 16;
+
+/**
+ * Format a 1-based CodeMirror line number as a 4-digit uppercase hex address,
+ * the way the native GtkSourceView hex gutter renders monitor/hexdump rows:
+ * each row advances the address by `stride` bytes from `start`.
+ *
+ * @param lineNo 1-based line number (CodeMirror's `formatNumber` contract).
+ * @param start  base address of the first row (e.g. 0x0600 for a 6502 program).
+ * @param stride bytes per row (default 16 — one hexdump row).
+ */
+export function formatHexAddress(lineNo: number, start: number, stride: number = HEX_ADDRESS_STRIDE): string {
+    const address = start + (lineNo - 1) * stride;
+    return address.toString(16).padStart(4, '0').toUpperCase();
+}
+
+/**
+ * Format a 1-based CodeMirror line number for the normal (decimal) gutter,
+ * offset by `start` so a pane can begin numbering at an arbitrary value —
+ * the web twin of the native renderer's `line + startValue`.
+ *
+ * @param lineNo 1-based line number.
+ * @param start  value shown on the first line (default 1 → identity).
+ */
+export function formatLineNumber(lineNo: number, start: number = 1): string {
+    return String(lineNo - 1 + start);
+}
+
+/**
+ * Strip every whitespace character from `text` — the copy-without-spaces
+ * transform the native hex monitor applies so a copied address/byte run pastes
+ * as a compact hex string. Mirrors `text.replace(/\s/g, '')` in the GTK widget.
+ */
+export function stripWhitespace(text: string): string {
+    return text.replace(/\s/g, '');
+}

package/src/source-view/index.ts

@@ -0,0 +1,28 @@
+// @gjsify/adwaita-web/source-view — opt-in entry for the CodeMirror-backed
+// <adw-source-view> editor. Importing this module registers the custom element
+// and self-injects its stylesheet. It is intentionally NOT re-exported from the
+// package's main entry so CodeMirror stays out of the core adwaita-web bundle
+// for consumers who do not need an editor.
+
+export { AdwSourceView } from './adw-source-view.js';
+
+// Building blocks, exported so apps/tests can reuse them (e.g. embed the 6502
+// mode or the Adwaita theme in a bespoke EditorView).
+export {
+    asm6502,
+    asm6502Parser,
+    asm6502TokenTable,
+    classifyWord,
+    token6502,
+    OPCODES,
+    REGISTERS,
+    DIRECTIVE_WORDS,
+} from './asm6502.js';
+export {
+    adwaitaEditorTheme,
+    adwaitaHighlightStyle,
+    ensureSourceViewStyleInjected,
+    SOURCE_VIEW_CSS,
+    SOURCE_VIEW_STYLE_ID,
+} from './theme.js';
+export { formatHexAddress, formatLineNumber, stripWhitespace, HEX_ADDRESS_STRIDE } from './hex.js';

package/src/source-view/theme.ts

@@ -0,0 +1,224 @@
+// The Adwaita CodeMirror theme + syntax-highlight style for <adw-source-view>,
+// plus the self-injected "chrome" stylesheet (container + copy button + the
+// light/dark syntax palette variables).
+//
+// Editor colours are expressed as adwaita-web CSS custom properties
+// (`--view-bg-color`, `--view-fg-color`, `--accent-color`, `--separator-color`)
+// and a small `--adw-src-*` syntax palette defined below. Because those
+// variables flip with the page theme (`.theme-dark` / `prefers-color-scheme`),
+// a SINGLE theme + highlight style covers light and dark automatically — no
+// per-scheme rebuild, mirroring the native widget's two GtkSourceView schemes.
+// Reference: packages/app-gnome/src/widgets/source-view.ts updateStyle()
+// Reference: refs/libadwaita/src/stylesheet (colour tokens)
+
+import { EditorView } from '@codemirror/view';
+import { HighlightStyle } from '@codemirror/language';
+import { tags } from '@lezer/highlight';
+
+/** Monospace stack — Adwaita Mono when present, else a portable code font. */
+const MONO_FONT =
+    "'Adwaita Mono', 'Cascadia Code', 'JetBrains Mono', 'Source Code Pro', ui-monospace, 'SF Mono', Menlo, Consolas, monospace";
+
+/** The CodeMirror EditorView theme mapping `.cm-*` chrome to Adwaita tokens. */
+export const adwaitaEditorTheme = EditorView.theme({
+    '&': {
+        color: 'var(--view-fg-color, rgba(0,0,6,0.8))',
+        backgroundColor: 'var(--view-bg-color, #ffffff)',
+        fontSize: 'var(--adw-src-font-size, 10.5pt)',
+    },
+    '.cm-scroller': {
+        fontFamily: MONO_FONT,
+        lineHeight: '1.5',
+    },
+    '.cm-content': {
+        caretColor: 'var(--accent-color, #1c71d8)',
+        padding: '8px 0',
+    },
+    '.cm-cursor, .cm-dropCursor': {
+        borderLeftColor: 'var(--accent-color, #1c71d8)',
+    },
+    '.cm-selectionBackground, .cm-content ::selection': {
+        backgroundColor: 'var(--adw-src-selection)',
+    },
+    '&.cm-focused .cm-selectionBackground': {
+        backgroundColor: 'var(--adw-src-selection)',
+    },
+    '.cm-gutters': {
+        backgroundColor: 'var(--adw-src-gutter-bg, var(--view-bg-color, #ffffff))',
+        color: 'var(--adw-src-gutter-fg)',
+        border: 'none',
+        borderRight: '1px solid var(--separator-color, rgba(0,0,6,0.1))',
+    },
+    '.cm-lineNumbers .cm-gutterElement': {
+        padding: '0 10px 0 8px',
+        // Hex addresses are inherently LTR; keep the gutter text left-anchored
+        // so it never mirrors under an RTL page.
+        textAlign: 'right',
+    },
+    '.cm-activeLine': {
+        backgroundColor: 'var(--adw-src-active-line)',
+    },
+    '.cm-activeLineGutter': {
+        backgroundColor: 'var(--adw-src-active-line)',
+        color: 'var(--view-fg-color, rgba(0,0,6,0.8))',
+    },
+    '.cm-foldPlaceholder': {
+        backgroundColor: 'var(--button-bg-color, rgba(0,0,6,0.08))',
+        border: 'none',
+        color: 'var(--view-fg-color, rgba(0,0,6,0.8))',
+    },
+});
+
+/** Syntax highlighting mapping tags → the `--adw-src-*` palette variables. */
+export const adwaitaHighlightStyle = HighlightStyle.define([
+    { tag: tags.lineComment, color: 'var(--adw-src-comment)', fontStyle: 'italic' },
+    { tag: tags.comment, color: 'var(--adw-src-comment)', fontStyle: 'italic' },
+    { tag: tags.keyword, color: 'var(--adw-src-keyword)', fontWeight: '600' },
+    { tag: tags.number, color: 'var(--adw-src-number)' },
+    { tag: tags.string, color: 'var(--adw-src-string)' },
+    { tag: tags.labelName, color: 'var(--adw-src-label)', fontWeight: '600' },
+    { tag: tags.atom, color: 'var(--adw-src-register)' },
+    { tag: tags.meta, color: 'var(--adw-src-directive)' },
+    { tag: tags.operator, color: 'var(--adw-src-operator)' },
+    { tag: tags.variableName, color: 'var(--view-fg-color, rgba(0,0,6,0.8))' },
+]);
+
+// The light-theme syntax palette + shared chrome. Dark values are supplied by
+// the overrides block (same mechanism as adwaita-web's _theme.scss: auto via
+// prefers-color-scheme, manual via .theme-dark / opt-out via .theme-light).
+const DARK_TOKENS = `
+    --adw-src-comment: #9a9996;
+    --adw-src-keyword: #78aeed;
+    --adw-src-number: #ffa348;
+    --adw-src-string: #8ff0a4;
+    --adw-src-label: #dc8add;
+    --adw-src-register: #33d1c9;
+    --adw-src-directive: #f66151;
+    --adw-src-operator: rgba(255, 255, 255, 0.55);
+    --adw-src-gutter-fg: rgba(255, 255, 255, 0.35);
+    --adw-src-active-line: color-mix(in srgb, #ffffff 6%, transparent);`;
+
+/** Element id of the injected stylesheet (idempotency guard). */
+export const SOURCE_VIEW_STYLE_ID = 'adw-source-view-style';
+
+/** The chrome stylesheet: container, copy button, LTR pin, syntax palette. */
+export const SOURCE_VIEW_CSS = `
+.adw-source-view {
+    --adw-src-comment: #5e5c64;
+    --adw-src-keyword: #1c71d8;
+    --adw-src-number: #c64600;
+    --adw-src-string: #26a269;
+    --adw-src-label: #813d9c;
+    --adw-src-register: #007e8a;
+    --adw-src-directive: #a51d2d;
+    --adw-src-operator: rgba(0, 0, 6, 0.55);
+    --adw-src-selection: color-mix(in srgb, var(--accent-bg-color, #3584e4) 26%, transparent);
+    --adw-src-gutter-bg: var(--view-bg-color, #ffffff);
+    --adw-src-gutter-fg: rgba(0, 0, 6, 0.35);
+    --adw-src-active-line: color-mix(in srgb, var(--view-fg-color, #00000a) 4%, transparent);
+
+    /* Source code is inherently LTR — pin the whole widget so the gutter,
+       scrollbar and copy button never mirror under an RTL page. */
+    direction: ltr;
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    overflow: hidden;
+    border-radius: var(--card-radius, 12px);
+    background-color: var(--view-bg-color, #ffffff);
+    color: var(--view-fg-color, rgba(0, 0, 6, 0.8));
+}
+
+.adw-source-view .cm-editor {
+    border-radius: inherit;
+    max-height: 100%;
+}
+
+.adw-source-view.adw-source-view--fill,
+.adw-source-view.adw-source-view--fill .cm-editor {
+    height: 100%;
+}
+
+.adw-source-view .cm-editor.cm-focused {
+    outline: none;
+}
+
+.adw-source-view__copy {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border: none;
+    border-radius: var(--button-radius, 9px);
+    background-color: color-mix(in srgb, var(--view-bg-color, #ffffff) 82%, transparent);
+    color: var(--view-fg-color, rgba(0, 0, 6, 0.75));
+    opacity: 0.72;
+    cursor: pointer;
+    transition: opacity 0.15s ease, background-color 0.15s ease;
+    -webkit-backdrop-filter: blur(6px);
+    backdrop-filter: blur(6px);
+}
+
+.adw-source-view__copy:hover {
+    opacity: 1;
+    background-color: var(--button-hover-color, rgba(0, 0, 6, 0.13));
+}
+
+.adw-source-view__copy:active {
+    background-color: var(--button-active-color, rgba(0, 0, 6, 0.19));
+}
+
+.adw-source-view__copy:focus-visible {
+    opacity: 1;
+    outline: 2px solid var(--accent-color, #1c71d8);
+    outline-offset: 1px;
+}
+
+.adw-source-view__copy[hidden] {
+    display: none;
+}
+
+.adw-source-view__copy svg {
+    width: 16px;
+    height: 16px;
+    display: block;
+}
+
+.adw-source-view__copy .adw-icon {
+    width: 16px;
+    height: 16px;
+    background-color: currentColor;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not(.theme-light) .adw-source-view {${DARK_TOKENS}
+    }
+}
+
+:root.theme-dark .adw-source-view {${DARK_TOKENS}
+}
+`;
+
+/**
+ * Inject the chrome stylesheet once (browser-only, idempotent). Matches the
+ * self-injection pattern of `@gjsify/adwaita-web`'s main entry, so importing
+ * the source-view subpath is enough to style it under any bundler.
+ */
+export function ensureSourceViewStyleInjected(): void {
+    if (typeof document === 'undefined') return;
+    if (document.getElementById(SOURCE_VIEW_STYLE_ID)) return;
+    const style = document.createElement('style');
+    style.id = SOURCE_VIEW_STYLE_ID;
+    style.textContent = SOURCE_VIEW_CSS;
+    document.head.appendChild(style);
+}

package/src/test.browser.mts

@@ -0,0 +1,14 @@
+// Browser test entry for @gjsify/adwaita-web. Importing the package root
+// registers every custom element AND self-applies the stylesheet, so the specs
+// only have to create + drive the elements. Discovered + run by the
+// tests/browser Playwright harness (see AGENTS.md → Browser tests).
+import { run } from '@gjsify/unit';
+
+// Registers the custom elements (side-effect) + injects the compiled CSS.
+import '@gjsify/adwaita-web';
+
+import { AdwDataGridTest } from './adw-data-grid.spec.js';
+import { AdwDialogTest } from './adw-dialog.spec.js';
+import { AdwDropDownTest } from './adw-drop-down.spec.js';
+
+run({ AdwDataGridTest, AdwDialogTest, AdwDropDownTest });

package/src/index.js

@@ -1 +0,0 @@
-import{e}from"./styles2.generated.js";import{AdwAvatar as t}from"./elements/adw-avatar2.js";import{AdwBanner as n}from"./elements/adw-banner2.js";import{AdwCard as r}from"./elements/adw-card2.js";import{AdwClamp as i}from"./elements/adw-clamp2.js";import{AdwSpinner as a}from"./elements/adw-spinner2.js";import{AdwStatusPage as o}from"./elements/adw-status-page2.js";import{AdwWindow as s}from"./elements/adw-window2.js";import{AdwHeaderBar as c}from"./elements/adw-header-bar2.js";import{AdwWindowTitle as l}from"./elements/adw-window-title2.js";import{AdwButton as u}from"./elements/adw-button2.js";import{AdwButtonContent as d}from"./elements/adw-button-content2.js";import{AdwSplitButton as f}from"./elements/adw-split-button2.js";import{AdwToggle as p,AdwToggleGroup as m}from"./elements/adw-toggle-group2.js";import{AdwEntry as h}from"./elements/adw-entry2.js";import{AdwPreferencesGroup as g}from"./elements/adw-preferences-group2.js";import{AdwActionRow as _}from"./elements/adw-action-row2.js";import{AdwEntryRow as v}from"./elements/adw-entry-row2.js";import{AdwSwitchRow as y}from"./elements/adw-switch-row2.js";import{AdwComboRow as b}from"./elements/adw-combo-row2.js";import{AdwSpinRow as x}from"./elements/adw-spin-row2.js";import{AdwButtonRow as S}from"./elements/adw-button-row2.js";import{AdwExpanderRow as C}from"./elements/adw-expander-row2.js";import{AdwPasswordEntryRow as w}from"./elements/adw-password-entry-row2.js";import{AdwToastOverlay as T}from"./elements/adw-toast-overlay2.js";import{AdwToolbarView as E}from"./elements/adw-toolbar-view2.js";import{AdwWrapBox as D}from"./elements/adw-wrap-box2.js";import{AdwOverlaySplitView as O}from"./elements/adw-overlay-split-view2.js";import{AdwNavigationSplitView as k}from"./elements/adw-navigation-split-view2.js";import{AdwCarousel as A,AdwCarouselIndicatorDots as j,AdwCarouselIndicatorLines as M}from"./elements/adw-carousel2.js";import{AdwTabPage as N,AdwTabView as P}from"./elements/adw-tab-view2.js";import{AdwViewSwitcher as F,AdwViewSwitcherPage as I}from"./elements/adw-view-switcher2.js";import{AdwInlineViewSwitcher as L,AdwViewStackPage as R}from"./elements/adw-inline-view-switcher2.js";import{AdwNavigationPage as z,AdwNavigationView as B}from"./elements/adw-navigation-view2.js";import{AdwBottomSheet as V,AdwBottomSheetContent as H,AdwBottomSheetSheet as U}from"./elements/adw-bottom-sheet2.js";import{AdwSidebar as W,AdwSidebarItem as G,AdwSidebarSection as K}from"./elements/adw-sidebar2.js";import{AdwAboutDialog as q}from"./elements/adw-about-dialog2.js";import{AdwAlertDialog as J,AdwAlertResponse as Y}from"./elements/adw-alert-dialog2.js";import{AdwPreferencesDialog as X,AdwPreferencesPage as Z}from"./elements/adw-preferences-dialog2.js";import"@gjsify/adwaita-fonts";if(typeof document<`u`&&!document.getElementById(`adwaita-web-style`)){let t=document.createElement(`style`);t.id=`adwaita-web-style`,t.textContent=e,document.head.appendChild(t)}export{q as AdwAboutDialog,_ as AdwActionRow,J as AdwAlertDialog,Y as AdwAlertResponse,t as AdwAvatar,n as AdwBanner,V as AdwBottomSheet,H as AdwBottomSheetContent,U as AdwBottomSheetSheet,u as AdwButton,d as AdwButtonContent,S as AdwButtonRow,r as AdwCard,A as AdwCarousel,j as AdwCarouselIndicatorDots,M as AdwCarouselIndicatorLines,i as AdwClamp,b as AdwComboRow,h as AdwEntry,v as AdwEntryRow,C as AdwExpanderRow,c as AdwHeaderBar,L as AdwInlineViewSwitcher,z as AdwNavigationPage,k as AdwNavigationSplitView,B as AdwNavigationView,O as AdwOverlaySplitView,w as AdwPasswordEntryRow,X as AdwPreferencesDialog,g as AdwPreferencesGroup,Z as AdwPreferencesPage,W as AdwSidebar,G as AdwSidebarItem,K as AdwSidebarSection,x as AdwSpinRow,a as AdwSpinner,f as AdwSplitButton,o as AdwStatusPage,y as AdwSwitchRow,N as AdwTabPage,P as AdwTabView,T as AdwToastOverlay,p as AdwToggle,m as AdwToggleGroup,E as AdwToolbarView,R as AdwViewStackPage,F as AdwViewSwitcher,I as AdwViewSwitcherPage,s as AdwWindow,l as AdwWindowTitle,D as AdwWrapBox};