@gjsify/adwaita-web 0.13.2 → 0.15.1

package/README.md

@@ -35,6 +35,64 @@ import '@gjsify/adwaita-web';
 </adw-window>
 ```
 
+The package entry is TypeScript (`src/index.ts`), consumed via a
+TypeScript-compiling build — `gjsify build --app browser` / the `gjsifyBrowser()`
+Vite preset (or any Vite/bundler setup). Type declarations are shipped
+pre-built at `lib/types/index.d.ts`, so `gjsify tsc` consumers resolve the
+package's types without compiling its source.
+
+## Theming a page without `<adw-window>`
+
+The components read their colours from the `--window-*` CSS custom properties,
+but only `<adw-window>` paints the window surface. A page that lays out rows or
+cards directly on `<body>` (no window chrome) therefore renders on the browser
+default and its native controls ignore the dark scheme. Opt into the Adwaita
+surface + light/dark `color-scheme` by adding the `adw-root` class to `<body>`
+(or the `:root`/`<html>` element):
+
+```html
+<body class="adw-root">
+  <adw-preferences-group title="Settings">
+    <adw-switch-row title="Dark mode"></adw-switch-row>
+  </adw-preferences-group>
+</body>
+```
+
+`adw-root` is opt-in and additive — it binds `--window-bg-color` /
+`--window-fg-color` + `color-scheme: light dark` to the page and changes nothing
+about the individual components.
+
+## Source-code editor (`adw-source-view`)
+
+An Adwaita-styled source editor — the web twin of GtkSourceView — is available as
+an **opt-in subpath** so its CodeMirror dependency never bloats the core bundle:
+
+```typescript
+import '@gjsify/adwaita-web';              // app chrome (theme variables, fonts)
+import '@gjsify/adwaita-web/source-view';  // registers <adw-source-view>
+```
+
+```html
+<!-- Editable 6502 editor with a line-number gutter and a copy button -->
+<adw-source-view line-numbers editable copyable style="height: 260px"></adw-source-view>
+
+<!-- Read-only hex monitor: the gutter renders 4-digit hex addresses -->
+<adw-source-view
+  line-numbers hex-addresses line-number-start="1536"
+  readonly copyable language=""></adw-source-view>
+```
+
+Backed by CodeMirror 6, it maps 1:1 onto the `common-ui` `SourceViewWidget`
+interface: `code`, `editable`/`readonly`, `selectable`, `lineNumbers`,
+`lineNumberStart`, `copyable`, `copyButtonIcon`, `copyButtonTooltip`, plus a
+`hexAddresses` gutter mode (hex-address line numbers for the monitor / hexdump /
+disassembled panes) and a `language` toggle (`6502` enables 6502-assembly syntax
+highlighting; empty = plain text). It ships an Adwaita CodeMirror theme mapped to
+the same CSS variables, so it follows light + dark automatically. Edits emit a
+`code-changed` `CustomEvent` (programmatic `.code =` is suppressed for two-way
+binding), the copy button copies the buffer (whitespace-stripped in hex mode),
+and the widget is pinned LTR regardless of page direction.
+
 ## License
 
 MIT

package/dist/adwaita-web.css

@@ -234,6 +234,9 @@
   --accent-bg-color: #3584e4;
   --accent-fg-color: #ffffff;
   --accent-color: #1c71d8;
+  --popover-bg-color: #ffffff;
+  --popover-fg-color: rgba(0, 0, 6, 0.8);
+  --popover-shade-color: rgba(0, 0, 6, 0.07);
   --button-bg-color: rgba(0, 0, 6, 0.08);
   --button-hover-color: rgba(0, 0, 6, 0.13);
   --button-active-color: rgba(0, 0, 6, 0.19);
@@ -274,6 +277,9 @@
     --card-fg-color: #ffffff;
     --card-shade-color: rgba(0, 0, 6, 0.36);
     --accent-color: #78aeed;
+    --popover-bg-color: #36363a;
+    --popover-fg-color: #ffffff;
+    --popover-shade-color: rgba(0, 0, 6, 0.36);
     --button-bg-color: rgba(255, 255, 255, 0.1);
     --button-hover-color: rgba(255, 255, 255, 0.15);
     --button-active-color: rgba(255, 255, 255, 0.22);
@@ -301,6 +307,9 @@
   --card-fg-color: #ffffff;
   --card-shade-color: rgba(0, 0, 6, 0.36);
   --accent-color: #78aeed;
+  --popover-bg-color: #36363a;
+  --popover-fg-color: #ffffff;
+  --popover-shade-color: rgba(0, 0, 6, 0.36);
   --button-bg-color: rgba(255, 255, 255, 0.1);
   --button-hover-color: rgba(255, 255, 255, 0.15);
   --button-active-color: rgba(255, 255, 255, 0.22);
@@ -314,6 +323,14 @@
   --active-toggle-fg-color: rgba(0, 0, 6, 0.8);
 }
 
+.adw-root {
+  background-color: var(--window-bg-color);
+  color: var(--window-fg-color);
+  color-scheme: light dark;
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+}
+
 adw-window {
   display: flex;
   flex-direction: column;
@@ -739,6 +756,117 @@ adw-button-content.can-shrink .adw-button-content-label {
   pointer-events: none;
 }
 
+.adw-menu-button {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  vertical-align: middle;
+}
+.adw-menu-button .adw-menu-button-button {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 34px;
+  min-height: 34px;
+  margin: 0;
+  padding: 0 8px;
+  border: none;
+  border-radius: var(--button-radius);
+  background-color: var(--button-bg-color);
+  color: var(--window-fg-color);
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+}
+.adw-menu-button .adw-menu-button-button .adw-menu-button-icon {
+  width: 16px;
+  height: 16px;
+  flex: none;
+}
+.adw-menu-button .adw-menu-button-button:hover {
+  background-color: var(--button-hover-color);
+}
+.adw-menu-button .adw-menu-button-button:active {
+  background-color: var(--button-active-color);
+}
+.adw-menu-button .adw-menu-button-button:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: 1px;
+}
+.adw-menu-button.flat .adw-menu-button-button {
+  background-color: transparent;
+}
+.adw-menu-button.active .adw-menu-button-button {
+  background-color: var(--button-active-color);
+}
+.adw-menu-button.circular .adw-menu-button-button {
+  padding: 0;
+  border-radius: 9999px;
+}
+.adw-menu-button.disabled {
+  opacity: 0.45;
+}
+.adw-menu-button.disabled .adw-menu-button-button {
+  cursor: default;
+  pointer-events: none;
+}
+.adw-menu-button .adw-menu-button-popover {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  min-width: 200px;
+  padding: var(--spacing-xs);
+  border-radius: var(--card-radius);
+  background-color: var(--popover-bg-color, var(--window-bg-color, #fff));
+  color: var(--popover-fg-color, var(--window-fg-color));
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 5px 1px rgba(0, 0, 0, 0.09), 0 2px 14px 3px rgba(0, 0, 0, 0.05);
+}
+.adw-menu-button .adw-menu-button-popover[hidden] {
+  display: none;
+}
+.adw-menu-button .adw-menu-button-title {
+  padding: 4px var(--spacing-s) 6px;
+  font-weight: 700;
+  opacity: var(--dim-opacity);
+}
+.adw-menu-button .adw-menu-button-item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  width: 100%;
+  min-height: 32px;
+  margin: 0;
+  padding: var(--spacing-xs) var(--spacing-s);
+  border: none;
+  border-radius: calc(var(--button-radius) - 2px);
+  background-color: transparent;
+  color: inherit;
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  text-align: start;
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+}
+.adw-menu-button .adw-menu-button-item .adw-menu-button-item-icon {
+  width: 16px;
+  height: 16px;
+  flex: none;
+}
+.adw-menu-button .adw-menu-button-item:hover {
+  background-color: var(--button-hover-color);
+}
+.adw-menu-button .adw-menu-button-item:active {
+  background-color: var(--button-active-color);
+}
+.adw-menu-button .adw-menu-button-item:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: -2px;
+}
+
 :root {
   --active-toggle-bg-color: #ffffff;
   --active-toggle-fg-color: var(--window-fg-color);
@@ -2288,6 +2416,87 @@ adw-inline-view-switcher.flat.round .adw-inline-view-switcher-toggle {
   border-radius: 17px;
 }
 
+adw-view-stack {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+adw-view-stack .adw-view-stack-child {
+  display: none;
+}
+adw-view-stack .adw-view-stack-child.active-view {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+adw-view-switcher-bar {
+  display: block;
+  box-sizing: border-box;
+  background-color: var(--headerbar-bg-color);
+  border-top: 1px solid var(--separator-color);
+  padding: 7px 0;
+}
+adw-view-switcher-bar .adw-view-switcher-bar-box {
+  display: flex;
+  align-items: stretch;
+  min-height: 6px;
+}
+adw-view-switcher-bar .adw-view-switcher-bar-button {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1px;
+  margin: 0;
+  padding: 4px 3px 2px;
+  border: none;
+  border-radius: var(--button-radius);
+  background-color: transparent;
+  color: var(--window-fg-color);
+  font-family: var(--font-family);
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1.2;
+  cursor: pointer;
+  transition: color 0.2s ease, background-color 0.2s ease;
+  user-select: none;
+  -webkit-user-select: none;
+}
+adw-view-switcher-bar .adw-view-switcher-bar-button .adw-view-switcher-bar-icon {
+  width: 16px;
+  height: 16px;
+  flex: none;
+}
+adw-view-switcher-bar .adw-view-switcher-bar-button .adw-view-switcher-bar-label {
+  min-height: 18px;
+  line-height: 18px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+adw-view-switcher-bar .adw-view-switcher-bar-button:hover {
+  background-color: var(--button-hover-color);
+}
+adw-view-switcher-bar .adw-view-switcher-bar-button:active {
+  background-color: var(--button-active-color);
+}
+adw-view-switcher-bar .adw-view-switcher-bar-button:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: -2px;
+}
+adw-view-switcher-bar .adw-view-switcher-bar-button.active {
+  color: var(--accent-color);
+}
+adw-view-switcher-bar .adw-view-switcher-bar-button.active .adw-view-switcher-bar-label {
+  color: var(--accent-color);
+}
+
 adw-navigation-view {
   display: flex;
   flex-direction: column;