@nuraly/lumenui 0.1.0

package/dist/src/components/input/input.types.d.ts

@@ -0,0 +1,127 @@
+export declare const enum INPUT_STATE {
+    Default = "default",
+    Error = "error",
+    Warning = "warning",
+    Success = "success"
+}
+export declare const enum INPUT_SIZE {
+    Large = "large",
+    Medium = "medium",
+    Small = "small"
+}
+export declare const enum INPUT_VARIANT {
+    Outlined = "outlined",
+    Filled = "filled",
+    Borderless = "borderless",
+    Underlined = "underlined"
+}
+export declare const enum INPUT_TYPE {
+    PASSWORD = "password",
+    TEXT = "text",
+    NUMBER = "number",
+    EMAIL = "email",
+    URL = "url",
+    TEL = "tel",
+    SEARCH = "search",
+    CALENDAR = "calendar"
+}
+export interface FocusOptions {
+    preventScroll?: boolean;
+    cursor?: 'start' | 'end' | 'all' | number;
+    select?: boolean;
+}
+export interface BlurOptions {
+    preventScroll?: boolean;
+    restoreCursor?: boolean;
+}
+export interface FocusChangeEvent {
+    focused: boolean;
+    cursorPosition?: number;
+    selectedText?: string;
+}
+/**
+ * Validation rule interface
+ */
+export interface ValidationRule {
+    /** Validation rule type */
+    type?: 'string' | 'number' | 'boolean' | 'method' | 'regexp' | 'integer' | 'float' | 'array' | 'object' | 'enum' | 'date' | 'url' | 'hex' | 'email';
+    /** Required field */
+    required?: boolean;
+    /** Pattern to match */
+    pattern?: RegExp;
+    /** Minimum length for string/array */
+    minLength?: number;
+    /** Maximum length for string/array */
+    maxLength?: number;
+    /** Minimum value for number */
+    min?: number;
+    /** Maximum value for number */
+    max?: number;
+    /** Enumerable values */
+    enum?: any[];
+    /** Custom validation message */
+    message?: string;
+    /** Custom validator function */
+    validator?: (rule: ValidationRule, value: any) => Promise<void> | void | {
+        isValid: boolean;
+        message?: string;
+    } | Promise<{
+        isValid: boolean;
+        message?: string;
+    }>;
+    /** Async validator function */
+    asyncValidator?: (rule: ValidationRule, value: any) => Promise<void>;
+    /** Transform value before validation */
+    transform?: (value: any) => any;
+    /** Validation trigger */
+    trigger?: 'change' | 'blur' | 'submit';
+    /** Validation level */
+    warningOnly?: boolean;
+}
+/**
+ * Input validation result
+ */
+export interface InputValidationResult {
+    isValid: boolean;
+    errors: string[];
+    warnings: string[];
+    hasError: boolean;
+    hasWarning: boolean;
+    errorMessage?: string;
+    warningMessage?: string;
+}
+/**
+ * Built-in validation patterns
+ */
+export declare const VALIDATION_PATTERNS: {
+    readonly EMAIL: RegExp;
+    readonly URL: RegExp;
+    readonly PHONE: RegExp;
+    readonly PASSWORD_STRONG: RegExp;
+    readonly ALPHANUMERIC: RegExp;
+    readonly NUMERIC: RegExp;
+    readonly ALPHA: RegExp;
+    readonly USERNAME: RegExp;
+    readonly HEX_COLOR: RegExp;
+    readonly IPV4: RegExp;
+    readonly CREDIT_CARD: RegExp;
+};
+/**
+ * Pre-built validation rules
+ */
+export declare const VALIDATION_RULES: {
+    readonly required: (message?: string) => ValidationRule;
+    readonly email: (message?: string) => ValidationRule;
+    readonly url: (message?: string) => ValidationRule;
+    readonly minLength: (min: number, message?: string) => ValidationRule;
+    readonly maxLength: (max: number, message?: string) => ValidationRule;
+    readonly min: (min: number, message?: string) => ValidationRule;
+    readonly max: (max: number, message?: string) => ValidationRule;
+    readonly pattern: (pattern: RegExp, message?: string) => ValidationRule;
+    readonly strongPassword: (message?: string) => ValidationRule;
+    readonly phone: (message?: string) => ValidationRule;
+    readonly username: (message?: string) => ValidationRule;
+    readonly creditCard: (message?: string) => ValidationRule;
+};
+export declare const EMPTY_STRING = "";
+//# sourceMappingURL=input.types.d.ts.map

package/dist/src/components/input/input.types.js

@@ -0,0 +1,75 @@
+/**
+ * Built-in validation patterns
+ */
+export const VALIDATION_PATTERNS = {
+    EMAIL: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+    URL: /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/,
+    PHONE: /^[\+]?[1-9][\d]{0,15}$/,
+    PASSWORD_STRONG: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/,
+    ALPHANUMERIC: /^[a-zA-Z0-9]+$/,
+    NUMERIC: /^\d+$/,
+    ALPHA: /^[a-zA-Z]+$/,
+    USERNAME: /^[a-zA-Z0-9_-]{3,16}$/,
+    HEX_COLOR: /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,
+    IPV4: /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
+    CREDIT_CARD: /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|3[47][0-9]{13}|3[0-9]{13}|6(?:011|5[0-9]{2})[0-9]{12})$/,
+};
+/**
+ * Pre-built validation rules
+ */
+export const VALIDATION_RULES = {
+    required: (message) => ({
+        required: true,
+        message: message || 'This field is required'
+    }),
+    email: (message) => ({
+        type: 'email',
+        pattern: VALIDATION_PATTERNS.EMAIL,
+        message: message || 'Please enter a valid email address'
+    }),
+    url: (message) => ({
+        type: 'url',
+        pattern: VALIDATION_PATTERNS.URL,
+        message: message || 'Please enter a valid URL'
+    }),
+    minLength: (min, message) => ({
+        minLength: min,
+        message: message || `Minimum length is ${min} characters`
+    }),
+    maxLength: (max, message) => ({
+        maxLength: max,
+        message: message || `Maximum length is ${max} characters`
+    }),
+    min: (min, message) => ({
+        type: 'number',
+        min,
+        message: message || `Minimum value is ${min}`
+    }),
+    max: (max, message) => ({
+        type: 'number',
+        max,
+        message: message || `Maximum value is ${max}`
+    }),
+    pattern: (pattern, message) => ({
+        pattern,
+        message: message || 'Invalid format'
+    }),
+    strongPassword: (message) => ({
+        pattern: VALIDATION_PATTERNS.PASSWORD_STRONG,
+        message: message || 'Password must contain at least 8 characters, including uppercase, lowercase, number and special character'
+    }),
+    phone: (message) => ({
+        pattern: VALIDATION_PATTERNS.PHONE,
+        message: message || 'Please enter a valid phone number'
+    }),
+    username: (message) => ({
+        pattern: VALIDATION_PATTERNS.USERNAME,
+        message: message || 'Username must be 3-16 characters long and contain only letters, numbers, hyphens and underscores'
+    }),
+    creditCard: (message) => ({
+        pattern: VALIDATION_PATTERNS.CREDIT_CARD,
+        message: message || 'Please enter a valid credit card number'
+    }),
+};
+export const EMPTY_STRING = '';
+//# sourceMappingURL=input.types.js.map

package/dist/src/components/input/react.d.ts

@@ -0,0 +1,9 @@
+import { NrInputElement } from './input.component.js';
+export declare const NrInput: import("@lit-labs/react").ReactWebComponent<NrInputElement, {
+    nrInput: string;
+    nrFocus: string;
+    nrEnter: string;
+    nrCopySuccess: string;
+    nrCopyError: string;
+}>;
+//# sourceMappingURL=react.d.ts.map

package/dist/src/components/input/react.js

@@ -0,0 +1,16 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { NrInputElement } from './input.component.js';
+export const NrInput = createComponent({
+    tagName: 'nr-input',
+    elementClass: NrInputElement,
+    react: React,
+    events: {
+        nrInput: 'nr-input',
+        nrFocus: 'nr-focus',
+        nrEnter: 'nr-enter',
+        nrCopySuccess: 'nr-copy-success',
+        nrCopyError: 'nr-copy-error'
+    },
+});
+//# sourceMappingURL=react.js.map

package/dist/src/components/input/validation.d.ts

@@ -0,0 +1,3 @@
+export declare const PORT: RegExp;
+export declare const NOT_EMPTY: RegExp;
+//# sourceMappingURL=validation.d.ts.map

package/dist/src/components/input/validation.js

@@ -0,0 +1,3 @@
+export const PORT = /^(?:[1-9]\d{0,4}|[1-5]\d{5}|6[0-4]\d{4}|65[0-4]\d{3}|655[0-2]\d{2}|6553[0-5])$/;
+export const NOT_EMPTY = /^.+$/;
+//# sourceMappingURL=validation.js.map

package/dist/src/components/kv-secret-select/bundle.js

@@ -0,0 +1,183 @@
+import{css as t,LitElement as e,html as r,nothing as i}from"lit";import{property as o,state as s,customElement as a}from"lit/decorators.js";
+/**
+ * @license
+ * Copyright 2024 Nuraly
+ * SPDX-License-Identifier: MIT
+ */var n=function(t,e,r,i){for(var o,s=arguments.length,a=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,r):i,n=t.length-1;n>=0;n--)(o=t[n])&&(a=(s<3?o(a):s>3?o(e,r,a):o(e,r))||a);return s>3&&a&&Object.defineProperty(e,r,a),a};let d=class extends e{constructor(){super(...arguments),this.provider="openai",this.value="",this.placeholder="Select API key...",this.type="api-key",this.entries=[],this.loading=!1,this.showCreateForm=!1,this.newKeyName="",this.newKeyValue="",this.creating=!1,this.error=""}handleSelectChange(t){var e;const r=(null===(e=t.detail)||void 0===e?void 0:e.value)||"";this.value=r,this.dispatchEvent(new CustomEvent("value-change",{detail:{value:r},bubbles:!0,composed:!0}))}toggleCreateForm(){this.showCreateForm=!this.showCreateForm,this.showCreateForm||this.resetCreateForm()}resetCreateForm(){this.newKeyName="",this.newKeyValue="",this.error="",this.creating=!1}handleCreate(){if(!this.newKeyName||!this.newKeyValue)return;this.creating=!0,this.error="";const t=`${this.provider}/${this.newKeyName}`;this.dispatchEvent(new CustomEvent("create-entry",{detail:{keyPath:t,value:this.newKeyValue,scope:this.provider,isSecret:!0},bubbles:!0,composed:!0}))}notifyCreateSuccess(t){this.value=t,this.showCreateForm=!1,this.resetCreateForm(),this.dispatchEvent(new CustomEvent("value-change",{detail:{value:t},bubbles:!0,composed:!0}))}notifyCreateError(t){this.error=t,this.creating=!1}getTypeLabel(){return"url"===this.type?"URL":"API Key"}getValuePlaceholder(){return"url"===this.type?"http://localhost:11434":"sk-..."}renderCreateForm(){const t=this.getTypeLabel();return r`
+      <div class="create-form">
+        <div class="create-form-header">
+          <span class="create-form-title">Add ${this.provider} ${t}</span>
+        </div>
+
+        <div class="form-field">
+          <label>${"url"===this.type?"Name":"Key Name"}</label>
+          <nr-input
+            .value=${this.newKeyName}
+            placeholder="e.g., production, dev"
+            @nr-input=${t=>{var e;return this.newKeyName=(null===(e=t.detail)||void 0===e?void 0:e.value)||""}}
+          ></nr-input>
+        </div>
+
+        <div class="form-field">
+          <label>${t} Value</label>
+          <nr-input
+            type=${"url"===this.type?"text":"password"}
+            .value=${this.newKeyValue}
+            placeholder=${this.getValuePlaceholder()}
+            @nr-input=${t=>{var e;return this.newKeyValue=(null===(e=t.detail)||void 0===e?void 0:e.value)||""}}
+          ></nr-input>
+        </div>
+
+        ${this.error?r`<div class="error-message">${this.error}</div>`:i}
+
+        <div class="form-actions">
+          <button
+            class="btn btn-primary"
+            ?disabled=${!this.newKeyName||!this.newKeyValue||this.creating}
+            @click=${this.handleCreate}
+          >
+            ${this.creating?"Creating...":"Create"}
+          </button>
+          <button
+            class="btn btn-secondary"
+            @click=${this.toggleCreateForm}
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    `}renderAddButton(){const t=this.getTypeLabel().toLowerCase();return r`
+      <div class="add-btn-container">
+        <button class="add-btn" @click=${this.toggleCreateForm}>
+          <nr-icon name="plus" size="small"></nr-icon>
+          Add new ${this.provider} ${t}
+        </button>
+      </div>
+    `}render(){const t=this.entries.filter(t=>t.isSecret).map(t=>({label:t.keyPath.replace(`${this.provider}/`,""),value:t.keyPath,icon:"url"===this.type?"link":"key"})),e=`No ${this.getTypeLabel().toLowerCase()}s for ${this.provider}`;return r`
+      <nr-select
+        .value=${this.value}
+        .options=${t}
+        placeholder=${this.placeholder}
+        .noOptionsMessage=${e}
+        @nr-change=${this.handleSelectChange}
+      >
+        <div slot="after-options">
+          ${this.loading?r`<div class="loading">Loading...</div>`:i}
+          ${this.showCreateForm?this.renderCreateForm():this.renderAddButton()}
+        </div>
+      </nr-select>
+    `}};d.styles=t`
+    :host {
+      display: block;
+    }
+
+    .create-form {
+      padding: 12px;
+      border-top: 1px solid var(--border-color, #e5e7eb);
+      background: var(--bg-secondary, #f9fafb);
+    }
+
+    .create-form-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+
+    .create-form-title {
+      font-weight: 600;
+      font-size: 13px;
+      color: var(--text-primary, #1f2937);
+    }
+
+    .form-field {
+      margin-bottom: 12px;
+    }
+
+    .form-field label {
+      display: block;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--text-secondary, #6b7280);
+      margin-bottom: 4px;
+    }
+
+    .form-actions {
+      display: flex;
+      gap: 8px;
+      margin-top: 12px;
+    }
+
+    .btn {
+      padding: 6px 12px;
+      border-radius: 6px;
+      font-size: 12px;
+      font-weight: 500;
+      cursor: pointer;
+      border: none;
+      transition: all 0.2s;
+    }
+
+    .btn-primary {
+      background: var(--primary-color, #6366f1);
+      color: white;
+    }
+
+    .btn-primary:hover {
+      background: #4f46e5;
+    }
+
+    .btn-primary:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .btn-secondary {
+      background: var(--bg-secondary, #f3f4f6);
+      color: var(--text-primary, #1f2937);
+      border: 1px solid var(--border-color, #e5e7eb);
+    }
+
+    .btn-secondary:hover {
+      background: #e5e7eb;
+    }
+
+    .add-btn-container {
+      padding: 8px 12px;
+      border-top: 1px solid var(--border-color, #e5e7eb);
+    }
+
+    .add-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      width: 100%;
+      padding: 8px 12px;
+      background: transparent;
+      border: 1px dashed var(--border-color, #d1d5db);
+      border-radius: 6px;
+      color: var(--text-secondary, #6b7280);
+      font-size: 13px;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .add-btn:hover {
+      border-color: var(--primary-color, #6366f1);
+      color: var(--primary-color, #6366f1);
+      background: #f5f3ff;
+    }
+
+    .error-message {
+      color: #dc2626;
+      font-size: 12px;
+      margin-top: 4px;
+    }
+
+    .loading {
+      padding: 12px;
+      text-align: center;
+      color: var(--text-secondary, #6b7280);
+      font-size: 13px;
+    }
+  `,n([o({type:String})],d.prototype,"provider",void 0),n([o({type:String})],d.prototype,"value",void 0),n([o({type:String})],d.prototype,"placeholder",void 0),n([o({type:String})],d.prototype,"type",void 0),n([o({attribute:!1})],d.prototype,"entries",void 0),n([o({type:Boolean})],d.prototype,"loading",void 0),n([s()],d.prototype,"showCreateForm",void 0),n([s()],d.prototype,"newKeyName",void 0),n([s()],d.prototype,"newKeyValue",void 0),n([s()],d.prototype,"creating",void 0),n([s()],d.prototype,"error",void 0),d=n([a("nr-kv-secret-select")],d);export{d as NrKvSecretSelect};

package/dist/src/components/kv-secret-select/index.d.ts

@@ -0,0 +1,2 @@
+export * from './kv-secret-select.component.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/kv-secret-select/index.js

@@ -0,0 +1,2 @@
+export * from './kv-secret-select.component.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/kv-secret-select/kv-secret-select.component.d.ts

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+/**
+ * Minimal KV entry shape this component needs.
+ * Avoids importing from the redux store.
+ */
+export interface KvSecretEntry {
+    keyPath: string;
+    value?: any;
+    isSecret: boolean;
+}
+/**
+ * KV Secret Select Component
+ *
+ * A select component for choosing API keys, filtered by provider scope.
+ * Includes inline creation of new secrets.
+ *
+ * Data-in / events-out:
+ * - Host provides `entries` and `loading`
+ * - Component fires `create-entry` when the user submits the create form
+ * - Component fires `value-change` when the selection changes
+ *
+ * @example
+ * ```html
+ * <nr-kv-secret-select
+ *   provider="openai"
+ *   .entries=${secretEntries}
+ *   value="openai/my-key"
+ *   @value-change=${(e) => console.log(e.detail.value)}
+ *   @create-entry=${(e) => handleCreate(e.detail)}
+ * ></nr-kv-secret-select>
+ * ```
+ *
+ * @fires value-change - Fired when selection changes
+ * @fires create-entry - Fired when user submits the create form. Detail: { keyPath, value, scope, isSecret }
+ */
+export declare class NrKvSecretSelect extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Provider/scope to filter display labels */
+    provider: string;
+    /** Currently selected key path */
+    value: string;
+    /** Placeholder text */
+    placeholder: string;
+    /** Type of secret - affects labels */
+    type: 'api-key' | 'url';
+    /** Entries provided by the host */
+    entries: KvSecretEntry[];
+    /** Loading state provided by the host */
+    loading: boolean;
+    private showCreateForm;
+    private newKeyName;
+    private newKeyValue;
+    private creating;
+    private error;
+    private handleSelectChange;
+    private toggleCreateForm;
+    private resetCreateForm;
+    private handleCreate;
+    /**
+     * Called by host after create-entry succeeds to reset the form and select the new entry.
+     */
+    notifyCreateSuccess(keyPath: string): void;
+    /**
+     * Called by host if create-entry fails.
+     */
+    notifyCreateError(message: string): void;
+    private getTypeLabel;
+    private getValuePlaceholder;
+    private renderCreateForm;
+    private renderAddButton;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-kv-secret-select': NrKvSecretSelect;
+    }
+}
+//# sourceMappingURL=kv-secret-select.component.d.ts.map