@joel_jsp/vortex-ui 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Joel Schecheleski
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the Software), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED AS IS, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,256 @@
-# Temporary Holding Version
+# VortexUI
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+**Angular 22+ component suite** — Standalone, Signals-first, zoneless-ready.  
+DataGrid de alta performance, File Manager, Charts, Scheduler, AI opt-in e temas Fluent / LDS.
+
+[![npm](https://img.shields.io/npm/v/@joel_jsp/vortex-ui.svg)](https://www.npmjs.com/package/@joel_jsp/vortex-ui)
+[![license](https://img.shields.io/npm/l/@joel_jsp/vortex-ui.svg)](./LICENSE)
+[![Angular](https://img.shields.io/badge/Angular-22%2B-dd0031)](https://angular.dev/)
+
+📦 **npm:** [`@joel_jsp/vortex-ui`](https://www.npmjs.com/package/@joel_jsp/vortex-ui)  
+📂 **GitHub:** [JoelSchecheleski/vortex-ui](https://github.com/JoelSchecheleski/vortex-ui)
+
+---
+
+## Por que VortexUI?
+
+| Diferencial | Detalhe |
+|-------------|---------|
+| **Angular nativo** | 100% Standalone + `input()` / `model()` / `output()` / `signal` / `computed` |
+| **Zoneless** | `OnPush` e compatível com apps sem Zone.js |
+| **DataGrid** | Virtualização, remote DataSource (1M+ rows), sort/filter/group/edit/export |
+| **AI opt-in** | Assistant + AI Columns via entry separado `@joel_jsp/vortex-ui/ai` |
+| **Temas** | Design tokens `--vx-*` · Fluent Blue/SaaS (Light/Dark) · LDS |
+| **Tree-shakeable** | Importe só o que usa; CSS e AI não entram no bundle se não forem referenciados |
+
+Inspirado na superfície de produto DevExtreme — **implementação própria**, MIT.
+
+---
+
+## Install
+
+```bash
+npm install @joel_jsp/vortex-ui
+```
+
+**Peers:** `@angular/core`, `@angular/common`, `@angular/forms` ^22.
+
+---
+
+## Setup rápido (3 passos)
+
+### 1. Estilos (uma vez no app)
+
+No `styles` do `angular.json` / `project.json`, ou no CSS global:
+
+```css
+@import '@joel_jsp/vortex-ui/styles/vortex-ui.css';
+```
+
+### 2. Tema
+
+```ts
+import { inject, ApplicationConfig, provideAppInitializer } from '@angular/core';
+import { VortexThemeService } from '@joel_jsp/vortex-ui';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideAppInitializer(() => {
+      inject(VortexThemeService).setTheme('fluent-blue-light');
+    }),
+  ],
+};
+```
+
+Ou em qualquer componente:
+
+```ts
+inject(VortexThemeService).setTheme('fluent-saas-dark');
+```
+
+### 3. Use um componente
+
+```ts
+import { Component } from '@angular/core';
+import { VxButtonComponent, VxDataGridComponent, VxColumnDef } from '@joel_jsp/vortex-ui';
+
+@Component({
+  standalone: true,
+  imports: [VxButtonComponent, VxDataGridComponent],
+  template: `
+    <vx-button variant="primary">Salvar</vx-button>
+
+    <vx-data-grid
+      [columns]="columns"
+      [data]="rows"
+      [rowHeight]="36"
+      [virtualScroll]="true"
+    />
+  `,
+})
+export class DemoPage {
+  readonly columns: VxColumnDef[] = [
+    { field: 'id', header: 'ID', width: 72 },
+    { field: 'product', header: 'Produto' }, // fluida (preenche o grid)
+    { field: 'region', header: 'Região', minWidth: 100 },
+  ];
+  readonly rows = [
+    { id: 1, product: 'SolarMax', region: 'África' },
+    { id: 2, product: 'EcoCharge', region: 'Europa' },
+  ];
+}
+```
+
+---
+
+## Temas
+
+Aplique via `data-vx-theme` (feito automaticamente pelo `VortexThemeService`):
+
+| ID | Descrição |
+|----|-----------|
+| `fluent-blue-light` | **Default** (alias `fluent`) |
+| `fluent-blue-dark` | Fluent Blue Dark |
+| `fluent-saas-light` | Fluent SaaS Light |
+| `fluent-saas-dark` | Fluent SaaS Dark |
+| `lds` | LDS (Poppins + guideline interno) |
+
+```ts
+import { VortexThemeService, VORTEX_THEMES, VORTEX_THEME_LABELS } from '@joel_jsp/vortex-ui';
+
+const themes = inject(VortexThemeService);
+themes.setTheme('lds');
+themes.toggleTheme(); // cicla pelos oficiais
+```
+
+Componentes usam **somente** tokens `--vx-*` (sem hex hardcoded no core).
+
+---
+
+## AI (opt-in)
+
+A IA **não** entra no bundle principal. Use o secondary entry:
+
+```ts
+import {
+  VortexAIConfig,
+  VortexMockAIIntegration,
+} from '@joel_jsp/vortex-ui/ai';
+```
+
+```ts
+readonly aiConfig: VortexAIConfig = {
+  enabled: true,
+  assistant: { enabled: true, title: 'AI Assistant' },
+  contextFields: ['id', 'product', 'region'],
+  maxRowsInContext: 50,
+};
+
+readonly ai = new VortexMockAIIntegration();
+```
+
+```html
+<vx-data-grid
+  [columns]="columns"
+  [data]="rows"
+  [ai]="aiConfig"
+  [aiIntegration]="ai"
+/>
+```
+
+- Deny by default (`ai.enabled = false`)
+- Contexto tipado (não lê o DOM)
+- Command bus / allowlist de ações
+- Pluggable: troque o mock por OpenAI, Azure, modelo local, etc.
+
+---
+
+## Catálogo (v0.1)
+
+### Data & grids
+`vx-data-grid` · `vx-tree-list` · `vx-card-view` · `vx-pivot-grid` · `vx-pivot-field-chooser` · `vx-filter-builder` · `vx-list`
+
+### Forms & editors
+`vx-form` · `vx-text-box` · `vx-text-area` · `vx-number-box` · `vx-select-box` · `vx-date-box` · `vx-date-range-box` · `vx-checkbox` · `vx-switch` · `vx-radio-group` · `vx-slider` · `vx-range-slider` · `vx-color-box` · `vx-tag-box` · `vx-autocomplete` · `vx-lookup` · `vx-calendar` · `vx-field-set` · validation summary
+
+### Buttons & actions
+`vx-button` · `vx-button-group` · `vx-drop-down-button` · `vx-fab`
+
+### Navigation & layout
+`vx-tabs` · `vx-accordion` · `vx-drawer` · `vx-menu` · `vx-tree-view` · `vx-splitter` · `vx-stepper` · `vx-toolbar` · `vx-box` · `vx-multi-view` · `vx-pagination` · `vx-gallery` · `vx-tile-view` · `vx-scroll-view`
+
+### Feedback & overlays
+`vx-dialog` · `vx-toast` · `vx-load-panel` · `vx-tooltip` · `vx-popover` · `vx-context-menu` · `vx-action-sheet` · progress / load-indicator
+
+### Visualization
+`vx-chart` (bar/line/area/pie/funnel/polar) · `vx-sparkline` · `vx-bullet` · `vx-funnel` · `vx-tree-map` · `vx-sankey` · gauges · `vx-diagram`
+
+### Scheduling & files
+`vx-scheduler` (day/week/month) · `vx-gantt` · `vx-file-manager` · `vx-file-uploader`
+
+### Messaging & maps
+`vx-chat` · `vx-html-editor` · `vx-map` · `vx-vector-map`
+
+### Wrappers
+`vx-draggable` · `vx-sortable` · `vx-resizable`
+
+> Maturidade atual: **M0–M1** na maior parte da Super Suite; DataGrid / temas / AI Foundation mais avançados. Roadmap no [PRD](https://github.com/JoelSchecheleski/vortex-ui/blob/main/VortexUI-PRD.md).
+
+---
+
+## DataGrid — tips
+
+```html
+<vx-data-grid
+  [columns]="columns"
+  [data]="rows"
+  [dataSource]="remoteSource"
+  [virtualScroll]="true"
+  [editable]="true"
+  [exportEnabled]="true"
+  (cellEdit)="onEdit($event)"
+/>
+```
+
+- **Sem `width`** → coluna fluida (reparte o espaço do container, estilo DX)
+- **Com `width`** → fixa; use `minWidth` nas fluidas
+- Remote: implemente `VxDataSource` / use `VxRemoteMockDataSource` nos demos
+- Export CSV nativo na toolbar
+
+---
+
+## Entries do pacote
+
+| Import | Conteúdo |
+|--------|----------|
+| `@joel_jsp/vortex-ui` | Componentes + theme + validators |
+| `@joel_jsp/vortex-ui/ai` | AI Bridge, dialogs, mock integration |
+| `@joel_jsp/vortex-ui/styles/vortex-ui.css` | Tokens + temas oficiais |
+
+---
+
+## Requisitos
+
+- Node 20+ recomendado  
+- Angular **22+**  
+- TypeScript 5.x  
+
+---
+
+## Desenvolvimento (monorepo)
+
+```bash
+git clone https://github.com/JoelSchecheleski/vortex-ui.git
+cd vortex-ui
+npm install
+npm start              # Widgets Gallery → http://localhost:4200
+npm run storybook      # Storybook
+npm run build          # build da lib
+npm run prepare:npm    # artefato em dist/libs/vortex-ui
+```
+
+---
+
+## License
+
+MIT © [Joel Schecheleski](https://github.com/JoelSchecheleski)

package/ai/README.md

@@ -0,0 +1,18 @@
+# vortex-ui/ai
+
+Secondary entry point for VortexUI AI Foundation.
+
+## Usage
+
+```ts
+import {
+  VortexAIIntegration,
+  VortexMockAIIntegration,
+  VxAiAssistantDialogComponent,
+  VxAiPromptEditorComponent,
+} from 'vortex-ui/ai';
+// monorepo alias:
+// import { ... } from '@vortex-ui/ai';
+```
+
+Keep this entry opt-in: apps that never enable AI should import only from `vortex-ui`.

package/ai/ai-assistant-dialog.component.d.ts

@@ -0,0 +1,25 @@
+import { VortexAIMessage, VortexAISuggestion } from './ai.types';
+import * as i0 from "@angular/core";
+export interface VxAIChatMessage extends VortexAIMessage {
+    title?: string;
+}
+export declare class VxAIAssistantDialogComponent {
+    readonly open: import("@angular/core").ModelSignal<boolean>;
+    readonly title: import("@angular/core").InputSignal<string>;
+    readonly placeholder: import("@angular/core").InputSignal<string>;
+    readonly messages: import("@angular/core").InputSignal<VxAIChatMessage[]>;
+    readonly suggestions: import("@angular/core").InputSignal<VortexAISuggestion[]>;
+    readonly busy: import("@angular/core").InputSignal<boolean>;
+    readonly sendMessage: import("@angular/core").OutputEmitterRef<string>;
+    readonly suggestionSelect: import("@angular/core").OutputEmitterRef<VortexAISuggestion>;
+    readonly clear: import("@angular/core").OutputEmitterRef<void>;
+    readonly closed: import("@angular/core").OutputEmitterRef<void>;
+    draft: string;
+    close(): void;
+    onOverlayClick(_: MouseEvent): void;
+    onEnter(event: Event): void;
+    send(): void;
+    onSuggestion(s: VortexAISuggestion): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<VxAIAssistantDialogComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<VxAIAssistantDialogComponent, "vx-ai-assistant-dialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; "suggestions": { "alias": "suggestions"; "required": false; "isSignal": true; }; "busy": { "alias": "busy"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "sendMessage": "sendMessage"; "suggestionSelect": "suggestionSelect"; "clear": "clear"; "closed": "closed"; }, never, never, true, never>;
+}

package/ai/ai-prompt-editor.component.d.ts

@@ -0,0 +1,14 @@
+import * as i0 from "@angular/core";
+export declare class VxAIPromptEditorComponent {
+    readonly open: import("@angular/core").ModelSignal<boolean>;
+    readonly title: import("@angular/core").InputSignal<string>;
+    readonly placeholder: import("@angular/core").InputSignal<string>;
+    readonly prompt: import("@angular/core").ModelSignal<string>;
+    readonly canApply: import("@angular/core").InputSignal<boolean>;
+    readonly regenerate: import("@angular/core").OutputEmitterRef<string>;
+    readonly apply: import("@angular/core").OutputEmitterRef<string>;
+    readonly closed: import("@angular/core").OutputEmitterRef<void>;
+    close(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<VxAIPromptEditorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<VxAIPromptEditorComponent, "vx-ai-prompt-editor", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "prompt": { "alias": "prompt"; "required": false; "isSignal": true; }; "canApply": { "alias": "canApply"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "prompt": "promptChange"; "regenerate": "regenerate"; "apply": "apply"; "closed": "closed"; }, never, never, true, never>;
+}

package/ai/ai.types.d.ts

@@ -0,0 +1,109 @@
+/** Config opt-in por componente (deny by default). */
+export interface VortexAIConfig {
+    enabled?: boolean;
+    assistant?: {
+        enabled?: boolean;
+        title?: string;
+    };
+    /** Campos permitidos no contexto enviado ao modelo (R2). */
+    contextFields?: string[];
+    /** Cap de linhas no contexto (R3). Default: 100. */
+    maxRowsInContext?: number;
+}
+export interface VortexAIMessage {
+    role: 'user' | 'assistant' | 'system';
+    content: string;
+}
+export interface VortexAIContext {
+    schemaVersion: 1;
+    componentType: string;
+    columns?: Array<{
+        field: string;
+        header: string;
+    }>;
+    sort?: {
+        field: string;
+        direction: 'asc' | 'desc';
+    } | null;
+    filter?: VortexAIFilterState | null;
+    /** Linhas já projetadas (só campos allowlist). */
+    rows?: Record<string, unknown>[];
+    totalRows?: number;
+    meta?: Record<string, unknown>;
+}
+export interface VortexAIFilterState {
+    field: string;
+    value: string;
+    operator?: 'contains' | 'equals';
+}
+export interface VortexAIToolDefinition {
+    name: string;
+    description: string;
+    parameters?: Record<string, unknown>;
+}
+export interface VortexAIRequest {
+    feature: 'assistant' | 'ai-column' | 'smart-paste' | 'semantic-search' | 'editor' | string;
+    componentType: string;
+    componentId?: string;
+    messages?: VortexAIMessage[];
+    prompt?: string;
+    context: VortexAIContext;
+    tools?: VortexAIToolDefinition[];
+    signal?: AbortSignal;
+}
+export interface VortexAICommand {
+    type: string;
+    payload?: Record<string, unknown>;
+}
+export interface VortexAIResponse {
+    title?: string;
+    text: string;
+    commands?: VortexAICommand[];
+    /** Resultados estruturados (ex.: AI Column cells). */
+    data?: {
+        cells?: Array<{
+            rowKey: string;
+            value: string;
+        }>;
+    };
+}
+export type VortexAIStreamEvent = {
+    type: 'token';
+    text: string;
+} | {
+    type: 'command';
+    command: VortexAICommand;
+} | {
+    type: 'done';
+    response: VortexAIResponse;
+};
+export interface VortexAISuggestion {
+    id: string;
+    label: string;
+    /** Prompt enviado ao adapter se não houver command direto. */
+    prompt?: string;
+    command?: VortexAICommand;
+}
+export interface VortexAIRequestCreatingEvent {
+    request: VortexAIRequest;
+    cancel: boolean;
+}
+export interface VortexAIPrivacyPolicy {
+    contextFields?: string[];
+    maxRowsInContext?: number;
+}
+export interface VortexAICommandSpec {
+    type: string;
+    description: string;
+}
+export interface VortexAICapability {
+    componentType: string;
+    commands: VortexAICommandSpec[];
+    projectContext(state: unknown, policy: VortexAIPrivacyPolicy): VortexAIContext;
+    execute(command: VortexAICommand): void | Promise<void>;
+    suggest?(state: unknown): VortexAISuggestion[];
+}
+export interface VortexAIIntegration {
+    sendRequest(req: VortexAIRequest): Promise<VortexAIResponse>;
+    stream?(req: VortexAIRequest): AsyncIterable<VortexAIStreamEvent>;
+}

package/ai/ai.utils.d.ts

@@ -0,0 +1,3 @@
+import { VortexAIContext, VortexAIPrivacyPolicy } from './ai.types';
+export declare function projectRowsForAI(rows: Record<string, unknown>[], policy: VortexAIPrivacyPolicy): Record<string, unknown>[];
+export declare function emptyAIContext(componentType: string): VortexAIContext;

package/ai/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Secondary entry: `vortex-ui/ai` (alias monorepo `@vortex-ui/ai`).
+ */
+export * from './ai.types';
+export * from './ai.utils';
+export * from './mock-ai-integration';
+export * from './ai-assistant-dialog.component';
+export * from './ai-prompt-editor.component';

package/ai/mock-ai-integration.d.ts

@@ -0,0 +1,8 @@
+import { VortexAIIntegration, VortexAIRequest, VortexAIResponse } from './ai.types';
+/**
+ * Adapter local sem LLM — interpreta intents simples (PT/EN)
+ * e devolve commands tipados da allowlist do DataGrid.
+ */
+export declare class VortexMockAIIntegration implements VortexAIIntegration {
+    sendRequest(req: VortexAIRequest): Promise<VortexAIResponse>;
+}

package/ai/vortex-ui-ai.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="vortex-ui/ai" />
+export * from './index';