feat(macos): add Canvas A2UI renderer

2025-12-17 11:35:06 +01:00
parent 1cdebb68a0
commit cdb5ddb2da
408 changed files with 73598 additions and 32 deletions
--- a/vendor/a2ui/renderers/lit/src/0.8/ui/column.ts
+++ b/vendor/a2ui/renderers/lit/src/0.8/ui/column.ts
@@ -0,0 +1,104 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { html, css, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { Root } from "./root.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ResolvedColumn } from "../types/types";
+import { styleMap } from "lit/directives/style-map.js";
+import { structuralStyles } from "./styles.js";
+
+@customElement("a2ui-column")
+export class Column extends Root {
+  @property({ reflect: true, type: String })
+  accessor alignment: ResolvedColumn["alignment"] = "stretch";
+
+  @property({ reflect: true, type: String })
+  accessor distribution: ResolvedColumn["distribution"] = "start";
+
+  static styles = [
+    structuralStyles,
+    css`
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        display: flex;
+        flex: var(--weight);
+      }
+
+      section {
+        display: flex;
+        flex-direction: column;
+        min-width: 100%;
+        height: 100%;
+      }
+
+      :host([alignment="start"]) section {
+        align-items: start;
+      }
+
+      :host([alignment="center"]) section {
+        align-items: center;
+      }
+
+      :host([alignment="end"]) section {
+        align-items: end;
+      }
+
+      :host([alignment="stretch"]) section {
+        align-items: stretch;
+      }
+
+      :host([distribution="start"]) section {
+        justify-content: start;
+      }
+
+      :host([distribution="center"]) section {
+        justify-content: center;
+      }
+
+      :host([distribution="end"]) section {
+        justify-content: end;
+      }
+
+      :host([distribution="spaceBetween"]) section {
+        justify-content: space-between;
+      }
+
+      :host([distribution="spaceAround"]) section {
+        justify-content: space-around;
+      }
+
+      :host([distribution="spaceEvenly"]) section {
+        justify-content: space-evenly;
+      }
+    `,
+  ];
+
+  render() {
+    return html`<section
+      class=${classMap(this.theme.components.Column)}
+      style=${this.theme.additionalStyles?.Column
+        ? styleMap(this.theme.additionalStyles?.Column)
+        : nothing}
+    >
+      <slot></slot>
+    </section>`;
+  }
+}