gcp-material-ui 0.0.4

package/.agents/skills/charts/SKILL.MD

@@ -0,0 +1,103 @@
+---
+name: Using Charts
+description: Guidelines and best practices for integrating and rendering Chart.js using ng2-charts in Standalone Angular components. Use when you need to render metrics and graphs.
+---
+
+# Using Charts with Chart.js & ng2-charts
+
+This skill provides configuration and implementation standards for rendered graphs and analytics dashboards.
+
+## When to use this skill
+
+- Use this when you need to create analytics dashboards or render visual metrics (Line, Bar charts).
+- This is helpful for visualizing traffic, logs, or metrics over time.
+
+## How to use it
+
+### 1. Setup & Configuration
+
+#### A. Global Setup (`app.config.ts`)
+
+To support dynamic graph datasets globally, include `provideCharts(withDefaultRegisterables())`:
+
+```typescript
+import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes),
+    provideCharts(withDefaultRegisterables()) // <- Required
+  ]
+};
+```
+
+### 2. Component Implementation
+
+All components rendering charts **MUST** be Standalone and import core directives:
+
+#### Type Definition Configs:
+
+```typescript
+import { BaseChartDirective } from 'ng2-charts';
+import { ChartConfiguration, ChartData, ChartType, ChartOptions } from 'chart.js';
+
+@Component({
+  standalone: true,
+  imports: [BaseChartDirective, MatCardModule],
+  ...
+})
+export class MyChartComponent {
+  
+  // 1. EXACT Literal typing fixes template compilation errors
+  public myChartType: 'line' = 'line'; // DO NOT use ChartType union
+  
+  // 2. Specific ChartOptions<'type'> enables type-safe config (e.g., cutout)
+  public myChartOptions: ChartOptions<'doughnut'> = {
+    responsive: true,
+    maintainAspectRatio: false,
+    cutout: '70%', // specific to doughnut
+    plugins: {
+       legend: { display: true, position: 'bottom' } // best for responsive scaling
+    }
+  };
+}
+```
+
+### 3. Template Layout Standards
+
+Wrap all `<canvas>` wrappers strictly with sizing bounds inside parent modules:
+
+#### Layout Sizing Checklist:
+
+1.  **Wrapper size Constraint**: Always put `<canvas baseChart>` inside a `<div>` with explicit dimensions (like `.chart-wrapper` height set).
+2.  **Overflow confinement**: Apply `overflow: hidden;` to correct resizing scale-bound overlaps.
+
+```html
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>Network Dashboard</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <div class="chart-wrapper">
+      <canvas baseChart 
+              [data]="chartData" 
+              [options]="myChartOptions" 
+              [type]="myChartType">
+      </canvas>
+    </div>
+  </mat-card-content>
+</mat-card>
+```
+
+#### Corresponding SCSS sizes:
+
+```scss
+@use '../../../_custom-theme' as theme;
+
+.chart-wrapper {
+  position: relative;
+  height: theme.px-to-rem(300); // Set fixed/relative height rules
+  width: 100%;
+  overflow: hidden; // Contain resize overlaps
+}
+```

package/.agents/skills/creating-common-components/SKILL.MD

@@ -0,0 +1,121 @@
+---
+name: Creating Common Components
+description: Guidelines for building or sourcing reusable components in Angular with Material UI. Use when you need to select, build, or import reusable UI components.
+---
+
+# Creating Common Components
+
+This skill provides instructions for selecting, building, or importing reusable components in this application while maintaining design system consistency.
+
+## When to use this skill
+
+- Use this when you need a new UI element, card, or layout component.
+- This is helpful for choosing between standard Material components vs. custom builds.
+
+## How to use it
+
+### 1. Component Selection Strategy
+
+When a new UI element is needed, follow this priority order:
+
+#### A. Angular Material (Priority 1)
+Always try to use [Official Angular Material Components](https://material.angular.dev/components/categories) first.
+- These are already integrated and themed in the application.
+- Example: `<mat-card>`, `<mat-button>`, `<mat-form-field>`.
+
+#### B. NPM Packages (Priority 2)
+If no Angular Material component supports the requirement, you may fetch a new component from npm.
+- **Rule**: Ensure the package is compatible with the current Angular version.
+- **Rule**: Prefer packages that allow visual customization to match the application theme.
+
+---
+
+### 2. Styling & Theming Strategy
+
+All components MUST align with the application's design system. **DO NOT** use hardcoded static colors (e.g., `#0c67df`).
+
+#### A. Angular Material Theming
+Refer to:
+- [Theming Guide](https://material.angular.dev/guide/theming)
+- [Theming Your Own Components](https://material.angular.dev/guide/theming-your-components)
+
+#### B. Using Global Variables
+Take layout variables and colors strictly from `components/src/_custom-theme.scss`. 
+
+Inside your component `.scss`:
+
+```scss
+@use '@angular/material' as mat;
+@use '../../../_custom-theme' as theme;
+
+.custom-widget {
+  background-color: theme.$white;
+  border: 1px solid theme.$grey300;
+  color: theme.$blue600;
+  padding: theme.px-to-rem(16);
+}
+```
+
+Available Variables:
+- **Colors**: `$greyXX`, `$blueXX`, `$redXX`.
+- **Functions**: `px-to-rem($px)`.
+
+#### C. Typography Utility Classes (Recommended)
+Use global `.cm-t-*` classes defined in `styles.scss` for text styling consistency.
+- **Rules**:
+  - Prefer using utility classes (e.g., `.cm-t-display-large`, `.cm-t-body-medium`) over ad-hoc font styles.
+  - **Check first**: Look in `styles.scss` for the full list of `.cm-t-*` classes.
+- Example:
+  ```html
+  <span class="cm-t-title-medium">Panel Title</span>
+  ```
+
+---
+
+### 3. Implementation Checklist
+
+1.  **Check existing**: Look in `components/src/app/components/`.
+2.  **Material First**: Mimic layout using Material's service/element.
+3.  **Standalone**: Always build components as Standalone (`standalone: true`).
+4.  **Page Wrapper**: Every page/Showcase demo **MUST** use `<app-page>` as its root wrapper.
+5.  **No local color definitions**: Reference SASS variables.
+6.  **Tabs**: Configure default attributes: `mat-stretch-tabs="false"` and `mat-align-tabs="start"`.
+7.  **Tables**: Wrap standard tables inside `<div class="table-container">`.
+8.  **Chips**: Use `<mat-chip-grid>` bound to an input field.
+9.  **Dialogs**: ALWAYS create a separate component for dialog content.
+10. **Stepper**: Bind each step to a distinct `FormGroup`.
+11. **Buttons**: DO NOT use `<button mat-raised-button>`. Use `<button mat-flat-button>`.
+12. **Message (Alerts)**: Use the `<app-message>` component.
+13. **Expand Button (Collapsible Pattern)**: Use text buttons with icons for lightweight expand/collapse sections (e.g., "Advanced Settings").
+    - **Rule**: Toggle a boolean flag with `*ngIf` to toggle content.
+    - Example:
+      ```html
+      <button mat-button color="primary" (click)="isExpanded = !isExpanded">
+        <mat-icon>{{ isExpanded ? 'expand_less' : 'expand_more' }}</mat-icon>
+        <span>{{ isExpanded ? 'Hide' : 'Show' }} advanced settings</span>
+      </button>
+      <div *ngIf="isExpanded">Content</div>
+      ```
+14. **Slide Toggle**: Use `<mat-slide-toggle>` for boolean state switches.
+    - **Rule**: Support standard Material colors (`color="primary"`, `accent`, `warn`).
+    - **Rule**: Support binding via `[(ngModel)]` or `formControlName`.
+    - Example:
+      ```html
+      <mat-slide-toggle [(ngModel)]="isChecked">Enable Feature</mat-slide-toggle>
+      ```
+
+15. **Tooltip**: Use `matTooltip` directive to provide supplemental information on hover or long-press.
+    - **Rule**: Use standard positioning inputs (`matTooltipPosition="above|below|left|right"`).
+    - **Rule**: Prefer RTL-friendly positions (`before`, `after`) if localizing.
+    - Example:
+      ```html
+      <button mat-flat-button matTooltip="Supplemental info">Hover me</button>
+      ```
+
+16. **Code Snippet**: Use standard `<pre class="code-block">` for read-only displays, or `@ngstack/code-editor` for interactive editing.
+    - **Rule**: For `code-editor`, initialize `CodeEditorModule.forRoot()` at the app level config.
+    - **Rule**: Bind to a `CodeModel` object defining language and value.
+    - Example:
+      ```html
+      <ngs-code-editor [codeModel]="codeModel" style="height: 300px;"></ngs-code-editor>
+      ```

package/.agents/skills/creating-pages/SKILL.MD

@@ -0,0 +1,205 @@
+---
+name: Creating Pages
+description: Instructions for building pages using Angular and Material UI with custom components. Use when you need to build List, Details, or Create forms views.
+---
+
+# Creating Pages with Angular & Material UI
+
+This skill provides guidelines and best practices for building consistent, themed pages in this application based on the golden templates (List, Details, Create).
+
+## When to use this skill
+
+- Use this when building new pages in Angular with Material UI.
+- This is helpful for structuring List views, Details views, and Form Create views using the design system.
+
+## How to use it
+
+### 1. Page Wrapper (`app-page`)
+
+Every page **MUST** use the `<app-page>` component as its root wrapper. This ensures a uniform header with title and consistent content spacing layout.
+
+#### Selector
+`<app-page>`
+
+#### Slots (Projection)
+- **`actions`**: Elements on the right side of the toolbar.
+- **`left-actions`**: Elements on the left side, next to the title (e.g., "Add Rule" button).
+- **`back-button`**: Icon-only button (e.g., `<button back-button mat-icon-button>`).
+
+---
+
+### 2. List Pages (Collections)
+
+Follow these norms for List pages depicting collections (e.g., Firewall Rules, Routes).
+
+#### Layout
+- **No Page Padding Container**: **DO NOT** wrap the list in `<div class="default-container-padding">`. Lists should be full-width.
+- **Top Actions**: Action buttons placed in `left-actions` slot. Must be primary text links (`button mat-button color="primary"`) with plus icons (`<mat-icon>add</mat-icon>`).
+
+#### Table & Filter Standards
+- Rely on global styles for tables. **DO NOT** add local `.scss` styles or overrides for standard Material tables.
+- Use `<div class="table-container">` to wrap standard tables and let global styles apply.
+- Use standard Material `<mat-table>` with `mat-elevation` classes for standard styling.
+- **Checkboxes ARE REQUIRED**: All list views **MUST** include checkboxes for multi-selection using standard Material checkboxes.
+- Interactive triggers (like "View Details") should appear strictly inside explicit resource identifier columns (like Name) using standard `<a>` tags. **DO NOT** make the entire row clickable.
+
+#### Selection logic setup
+Include `SelectionModel` from `@angular/cdk/collections` in your `.ts` file:
+```typescript
+selection = new SelectionModel<T>(true, []);
+
+@ViewChild(MatPaginator) paginator!: MatPaginator;
+
+isAllSelected() {
+  const numSelected = this.selection.selected.length;
+  const numRows = this.dataSource.data.length;
+  return numSelected === numRows;
+}
+
+toggleAllRows() {
+  if (this.isAllSelected()) {
+    this.selection.clear();
+    return;
+  }
+  this.selection.select(...this.dataSource.data);
+}
+
+ngAfterViewInit() {
+  this.dataSource.paginator = this.paginator;
+}
+```
+
+#### Schema Setup
+```html
+<app-page title="Resource List View">
+  <button left-actions mat-button color="primary" (click)="navigateToAdd()">
+    <mat-icon>add</mat-icon> Add Rule
+  </button>
+
+  <div class="filter-container">
+    <mat-icon>filter_list</mat-icon>
+    <span class="filter-title">Filter</span>
+    <input class="filter-input" (keyup)="applyFilter($event)" placeholder="Filter items" />
+  </div>
+
+  <div class="table-container">
+    <table mat-table [dataSource]="dataSource" matSort class="mat-elevation">
+      <!-- Standard Material Table usage -->
+    </table>
+    
+    <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
+  </div>
+</app-page>
+```
+
+---
+
+### 3. Details Pages (Single Resource Views)
+
+Follow these norms for Details pages depicting single resource properties.
+
+#### Layout
+- **Page Padding Container**: Use `<div class="default-container-padding">` around the main page content.
+- **Flat Property Table**: Use `.details-table` defined globally to show Property/Value lists in a grid.
+- **Tabs and Charts**: Place a `<mat-tab-group>` section at the bottom to house metrics and logs. Standardize on Line/Bar charts for traffic visualization using `ng2-charts`.
+
+#### HTML Schema Setup
+```html
+<app-page title="Resource details">
+  <button back-button mat-icon-button (click)="goBack()">
+    <mat-icon>arrow_back</mat-icon>
+  </button>
+
+  <div class="default-container-padding">
+    <h2>Resource Name (Primary Title)</h2>
+
+    <div class="details-table" *ngIf="rule">
+      <div class="table-row">
+        <div class="table-label">ID</div>
+        <div class="table-value">{{ rule.id }}</div>
+      </div>
+      <!-- Repeat property rows -->
+    </div>
+
+    <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" style="width: 100%; margin-top: 30px;">
+      <mat-tab label="Traffic Metrics">
+        <div style="padding: 16px; height: 300px;">
+          <canvas baseChart [data]="chartData" [options]="chartOptions" [type]="'line'"></canvas>
+        </div>
+      </mat-tab>
+      <mat-tab label="Logs List">
+        <div style="padding: 16px;">
+          <!-- Sample Nested Material Table -->
+        </div>
+      </mat-tab>
+    </mat-tab-group>
+  </div>
+</app-page>
+```
+
+---
+
+### 4. Create Pages (Forms View)
+
+To maintain clean layout architecture:
+
+#### Layout Alignment
+- **Page Padding Container**: Use `<div class="default-container-padding">` around the main form content.
+- **Form Caps Size**: Align to the **Left** and cap maximum width at **600px**. No centered forms.
+- **Row Columns layout**: Wrap fields grouped horizontally via row elements collapsing responsively.
+- **Action Buttons placement**: Save and Cancel buttons **MUST** be placed at the bottom on the **Left** side.
+
+#### Create View Setup
+```html
+<app-page title="Create Resource">
+  <div class="default-container-padding">
+    <form [formGroup]="form" class="form-container">
+      <div class="row">
+        <mat-form-field appearance="outline">
+          <mat-label>Name</mat-label>
+          <input matInput formControlName="name">
+        </mat-form-field>
+      </div>
+
+      <div class="actions">
+        <button mat-flat-button color="primary" type="submit">Create</button>
+        <button mat-button type="button" (click)="cancel()">Cancel</button>
+      </div>
+    </form>
+  </div>
+</app-page>
+```
+
+---
+
+### 5. Styling Strategy & Variables Usage
+
+#### Use Shared Variables from components package
+- **DO NOT** hardcode colors.
+- Use SCSS variables from the shared `components` package:
+  ```scss
+  @use 'components/variables' as theme;
+  // Use theme.$blue50, theme.$grey100, etc.
+  ```
+- Import global shared styles for standard layouts:
+  ```scss
+  @use 'components/styles';
+  ```
+- Rely on global stylesheets for standard components (tables, headers) instead of duplicating them in local component `.scss`.
+
+---
+
+### 6. Standard Component & Style Reuse
+
+Always reuse standard UI elements and components to maintain visual consistency.
+
+#### Common Components
+- Use `<app-page>` as the root wrapper for all pages. Import it from your project's local `layout/page` folder (e.g., `import { PageComponent } from '../layout/page/page'`).
+- Use `<app-message>` for alerts and status notifications if available.
+- Use `<button mat-flat-button>` for primary actions (DO NOT use `mat-raised-button`).
+- Use `.chip-badge` (standard `.scss` utility) for status badges in tables.
+
+#### Design System Workspace (Reference)
+The `components` workspace acts as a **Reference System**. When designing new pages or components, reference its demos and templates to learn from its layout, but DO NOT import files directly from it into your app workspace.
+- **Learn from demos**: `components/src/app/components`
+- **Learn from styles**: Check global styles defined in `components/styles` package to replicate them locally if needed.

package/.agents/skills/sidebar/SKILL.MD

@@ -0,0 +1,63 @@
+---
+name: Using Sidebar Drawer
+description: Guidelines and best practices for utilizing the `<app-sidebar>` overlay panel component for details or summaries over layouts. Use when you need a contextual side drawer opening from the right.
+---
+
+# Using Sidebar Drawer Overlay
+
+This skill provides configuration and implementation standards for contextual side drawers opening from the right utilizing `@angular/cdk/overlay`.
+
+## When to use this skill
+
+- Use this when you need a contextual side drawer to show details or summaries without leaving the page.
+- This is helpful for quick edits, viewing resource details, or showing logs side-by-side.
+
+## How to use it
+
+### 1. Setup & Component Definition
+
+The sidebar component triggers programmatically using coordinate strategies.
+
+#### Selector
+`<app-sidebar>`
+
+#### Inputs
+| Input | Type | Description |
+| :--- | :--- | :--- |
+| `isOpen` | `boolean` | State toggle to initiate slide translation and Backdrop masks. |
+| `title` | `string` | Text payload rendered inside the top `<mat-toolbar>` header bar. |
+
+#### Outputs
+| Output | Type | Description |
+| :--- | :--- | :--- |
+| `close` | `EventEmitter<void>` | Notification event triggered when the user clicks the external overlay mask or close button toolbar item. |
+
+---
+
+### 2. Usage Examples
+
+Place the sidebar anywhere inside the page template view scope and bind the outputs to toggle flags.
+
+#### Standard Template Integration:
+```html
+<app-page title="Resource Dashboard">
+  <button mat-flat-button color="primary" (click)="isSidebarOpen = true">
+    View Summary Detail
+  </button>
+
+  <app-sidebar [isOpen]="isSidebarOpen" title="Element Status" (close)="isSidebarOpen = false">
+    <!-- Projected Content -->
+    <div class="summary">
+      <p>Content rendered overlaying viewport securely scaling dimension guides bounds reliably.</p>
+    </div>
+  </app-sidebar>
+</app-page>
+```
+
+---
+
+### 3. Best Practices Guidelines
+
+1.  **Close Binding strictly Required**: Make sure to always wire `(close)="isOpen = false"` so clicking backdrops executes dismissal triggers gracefully.
+2.  **Sizing Boundaries**: The sidebar is fixed at height `100vh` and width `576px` with smart responsive limits (`max-width: 100vw`). Ensure items projecting fit within safe scroll regions without breaking overflows.
+3.  **MatToolbar configuration**: Sidebars bundle native container toolbars setup mapping title bars. Spacer classes `.spacer { flex: 1 1 auto; }` are provided default scaling to push close actions items comfortably right-aligned.

package/.agents/skills/workflow-graph/SKILL.MD

@@ -0,0 +1,160 @@
+---
+name: Workflow Graph
+description: Guidelines on using @google/workflow-graph inside standalone Angular apps. Use when you need to integrate directed acyclic graphs for visualization.
+---
+
+# Using Workflow Graph
+
+This skill provides instructions for adding and configuring details regarding nodes layouts inside components canvases.
+
+## When to use this skill
+
+- Use this when you need to render complex workflows, DAGs (Directed Acyclic Graphs), or step-by-step state representations.
+- This is helpful for showing deployment pipelines, resource dependencies, or traffic flow maps.
+
+## How to use it
+
+### 1. Registration setup
+
+Always import the side-effect module inside your standard typescript class or layout main file initialization routine:
+
+```typescript
+import '@google/workflow-graph/web-component/registerWorkflowGraphWebComponent.js';
+```
+
+Adding `<workflow-graph>` directly onto html structures. To enable typescript compilers to accept this wrapper add `CUSTOM_ELEMENTS_SCHEMA` schema layer sets rules inside corresponding components.
+
+### 2. Setting Schema Config
+
+```typescript
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+@Component({
+  ...
+  schemas: [CUSTOM_ELEMENTS_SCHEMA] 
+})
+export class MyGraphComponent { ... }
+```
+
+### 3. Data Structure Specification (`dagSpec`)
+
+The `<workflow-graph>` relies heavily on structural specifications.
+
+#### A. Graph Skeleton (`skeleton`)
+An array setting up hierarchy and connections:
+
+```typescript
+const skeleton = [
+  {
+    id: 'step-a',
+    type: 'execution',
+    next: [
+      { id: 'step-b', type: 'execution' }
+    ]
+  }
+];
+```
+
+| Field | Type | Description |
+| :--- | :--- | :--- |
+| `id` | `string` | Unique identifier |
+| `type` | `string` | Node variant: `execution`, `group` |
+| `next` | `Array` | Array of child node declarations |
+
+#### B. Grouping Nodes
+To group items together map `type: 'group'`:
+
+```typescript
+{
+  id: 'my-group',
+  type: 'group',
+  definition: [
+    { id: 'child-a', type: 'execution' },
+    { id: 'child-b', type: 'execution' }
+  ],
+  next: [ { id: 'next-node', type: 'execution' } ]
+}
+```
+
+#### C. State Mapping Configs
+Array lookup mapping layout specification diagrams:
+
+```typescript
+const state = {
+  'step-a': {
+    displayName: 'A Node Title',
+    state: 'SUCCEEDED', // Valid states: SUCCEEDED, RUNNING, PENDING, FAILED, TIMEOUT, SKIPPED, NOT_TRIGGERED, CANCELLED
+    description: 'Subtitle explanation',
+    subType: 'Type Label',
+    icon: {
+      name: 'web',
+      iconset: 'shell',
+      size: 'small'
+    }
+  }
+};
+```
+
+You can also use Text-based icons:
+```typescript
+const state = {
+  'node-id': {
+    displayName: 'My Node',
+    icon: {
+      text: 'BQ',
+      iconColors: 'inverted'
+    }
+  }
+};
+```
+
+---
+
+### 4. Setting Attributes Trigger
+
+To propagate details forward trigger direct specs binding through mapped viewport triggers:
+
+```typescript
+@ViewChild('graph') graph!: ElementRef;
+
+updateGraph() {
+  const dagSpec = { skeleton, meta: state };
+  this.graph.nativeElement.dagSpec = dagSpec;
+  this.graph.nativeElement.enableMinimap = true;
+  this.graph.nativeElement.layout = {
+    rankDirection: "LR", // TB (Top-Bottom) / LR (Left-Right)
+    ranker: "network-simplex"
+  };
+}
+```
+
+---
+
+### 5. Troubleshooting & Best Practices
+
+#### A. Strict Config Validation Crash (Unexpected Keys)
+Setting `dagSpec` may fail with errors listing `Unexpected Keys: expanded` if you supply properties the wrapper is not designed to consume.
+
+To fix it, safely sanitize the metadata:
+
+```typescript
+function sanitizeMeta(obj: any): any {
+  if (!obj || typeof obj !== 'object') return obj;
+
+  if (Array.isArray(obj)) {
+    return obj.map(item => sanitizeMeta(item));
+  }
+
+  const filtered = { ...obj };
+  delete filtered.expanded;
+  for (const key in filtered) {
+    if (filtered[key] && typeof filtered[key] === 'object') {
+      filtered[key] = sanitizeMeta(filtered[key]);
+    }
+  }
+  return filtered;
+}
+
+// Assignment
+this.graph.nativeElement.dagSpec = { skeleton, meta: sanitizeMeta(state) };
+```

package/.dockerignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.git
+.DS_Store

package/.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/.prettierrc

@@ -0,0 +1,12 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]
+}