@nuraly/lumenui 0.1.0

package/dist/src/components/checkbox/checkbox.style.js

@@ -0,0 +1,323 @@
+import { css } from 'lit';
+const checkBoxStyles = css `
+  /* ========================================
+   * CHECKBOX CSS VARIABLES - FALLBACK VALUES
+   * ========================================
+   * These fallback values ensure the component works even without theme files
+   */
+  :host {
+    /* Base checkbox appearance */
+    --nuraly-checkbox-background: var(--nuraly-color-checkbox-background, #ffffff);
+    --nuraly-checkbox-text-color: var(--nuraly-color-checkbox-text, rgba(0, 0, 0, 0.88));
+    --nuraly-checkbox-label-color: var(--nuraly-color-checkbox-label, rgba(0, 0, 0, 0.88));
+
+    /* Checkbox borders and outline */
+    --nuraly-checkbox-border: var(--nuraly-border-width-checkbox, 1px) solid var(--nuraly-color-checkbox-border, #d9d9d9);
+    --nuraly-checkbox-border-radius: var(--nuraly-border-radius-checkbox, 2px);
+    --nuraly-checkbox-border-focus: var(--nuraly-border-width-checkbox, 1px) solid var(--nuraly-color-checkbox-border-focus, #1890ff);
+    --nuraly-checkbox-border-hover: var(--nuraly-border-width-checkbox, 1px) solid var(--nuraly-color-checkbox-border-hover, #40a9ff);
+
+    /* Checked/active states */
+    --nuraly-checkbox-checked-background: var(--nuraly-color-checkbox-checked-background, #1890ff);
+    --nuraly-checkbox-checked-border: var(--nuraly-color-checkbox-checked-border, #1890ff);
+    --nuraly-checkbox-checkmark-color: var(--nuraly-color-checkbox-checkmark, #ffffff);
+    --nuraly-checkbox-indeterminate-background: var(--nuraly-color-checkbox-indeterminate-background, #1890ff);
+    --nuraly-checkbox-indeterminate-mark-color: var(--nuraly-color-checkbox-indeterminate-mark, #ffffff);
+
+    /* Disabled states */
+    --nuraly-checkbox-disabled-background: var(--nuraly-color-checkbox-disabled-background, #f5f5f5);
+    --nuraly-checkbox-disabled-border: var(--nuraly-color-checkbox-disabled-border, #d9d9d9);
+    --nuraly-checkbox-disabled-text-color: var(--nuraly-color-checkbox-disabled-text, rgba(0, 0, 0, 0.25));
+    --nuraly-checkbox-disabled-checkmark-color: var(--nuraly-color-checkbox-disabled-checkmark, rgba(0, 0, 0, 0.25));
+
+    /* Focus states */
+    --nuraly-checkbox-focus-outline: var(--nuraly-size-checkbox-focus-outline, 2px) solid var(--nuraly-color-checkbox-focus-outline, rgba(24, 144, 255, 0.2));
+
+    /* Typography */
+    --nuraly-checkbox-font-family: var(--nuraly-font-family-checkbox, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif);
+    --nuraly-checkbox-font-size: var(--nuraly-font-size-checkbox, 14px);
+    --nuraly-checkbox-font-weight: var(--nuraly-font-weight-checkbox, 400);
+    --nuraly-checkbox-line-height: var(--nuraly-line-height-checkbox, 1.5715);
+
+    /* Sizing */
+    --nuraly-checkbox-size-small: var(--nuraly-size-checkbox-small, 14px);
+    --nuraly-checkbox-size-medium: var(--nuraly-size-checkbox-medium, 16px);
+    --nuraly-checkbox-size-large: var(--nuraly-size-checkbox-large, 18px);
+
+    /* Spacing */
+    --nuraly-checkbox-gap: var(--nuraly-spacing-checkbox-gap, 8px);
+    --nuraly-checkbox-padding: var(--nuraly-spacing-checkbox-padding, 4px);
+
+    /* Animation */
+    --nuraly-checkbox-transition: var(--nuraly-transition-checkbox, all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1));
+
+    /* ========================================
+     * LEGACY COMPATIBILITY VARIABLES
+     * ========================================
+     * Keep old variable names for backward compatibility
+     * These will be deprecated in future versions
+     */
+
+    /* Legacy local variables for backward compatibility */
+    --nuraly-checkbox-local-filled-background-color: var(--nuraly-checkbox-checked-background);
+    --nuraly-checkbox-local-color: var(--nuraly-checkbox-text-color);
+    --nuraly-checkbox-local-empty-background-color: var(--nuraly-checkbox-background);
+    --nuraly-checkbox-local-disabled-background-color: var(--nuraly-checkbox-disabled-background);
+    --nuraly-checkbox-local-disabled-text-color: var(--nuraly-checkbox-disabled-text-color);
+    --nuraly-checkbox-local-empty-border: var(--nuraly-checkbox-border);
+    --nuraly-checkbox-local-symbol-color: var(--nuraly-checkbox-checkmark-color);
+    --nuraly-checkbox-local-focus-border: var(--nuraly-checkbox-border-focus);
+    --nuraly-checkbox-local-focus-outline: var(--nuraly-checkbox-focus-outline);
+    --nuraly-checkbox-local-font-family: var(--nuraly-checkbox-font-family);
+    --nuraly-checkbox-local-border-radius: var(--nuraly-checkbox-border-radius);
+    --nuraly-checkbox-local-gap: var(--nuraly-checkbox-gap);
+
+    /* Legacy size variables */
+    --nuraly-checkbox-local-medium-width: var(--nuraly-checkbox-size-medium);
+    --nuraly-checkbox-local-medium-height: var(--nuraly-checkbox-size-medium);
+    --nuraly-checkbox-local-small-width: var(--nuraly-checkbox-size-small);
+    --nuraly-checkbox-local-small-height: var(--nuraly-checkbox-size-small);
+    --nuraly-checkbox-local-large-width: var(--nuraly-checkbox-size-large);
+    --nuraly-checkbox-local-large-height: var(--nuraly-checkbox-size-large);
+
+    /* Legacy checkmark sizing */
+    --nuraly-checkbox-local-small-indeterminate-size: calc(var(--nuraly-checkbox-size-small) * 0.7);
+    --nuraly-checkbox-local-large-indeterminate-size: calc(var(--nuraly-checkbox-size-large) * 0.7);
+    --nuraly-checkbox-local-medium-indeterminate-size: calc(var(--nuraly-checkbox-size-medium) * 0.7);
+
+    --nuraly-checkbox-local-small-checked-width: calc(var(--nuraly-checkbox-size-small) * 0.14);
+    --nuraly-checkbox-local-small-checked-height: calc(var(--nuraly-checkbox-size-small) * 0.5);
+    --nuraly-checkbox-local-medium-checked-width: calc(var(--nuraly-checkbox-size-medium) * 0.19);
+    --nuraly-checkbox-local-medium-checked-height: calc(var(--nuraly-checkbox-size-medium) * 0.56);
+    --nuraly-checkbox-local-large-checked-width: calc(var(--nuraly-checkbox-size-large) * 0.22);
+    --nuraly-checkbox-local-large-checked-height: calc(var(--nuraly-checkbox-size-large) * 0.56);
+  }
+
+  /* ========================================
+   * CHECKBOX COMPONENT STYLES
+   * ========================================
+   * Modern checkbox component with theme-aware styling
+   * Uses CSS custom properties for consistent theming
+   */
+
+  :host {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--nuraly-checkbox-gap);
+    font-family: var(--nuraly-checkbox-font-family);
+    font-size: var(--nuraly-checkbox-font-size);
+    font-weight: var(--nuraly-checkbox-font-weight);
+    line-height: var(--nuraly-checkbox-line-height);
+    color: var(--nuraly-checkbox-text-color);
+    cursor: pointer;
+    transition: var(--nuraly-checkbox-transition);
+  }
+
+  /* ========================================
+   * CHECKBOX INPUT ELEMENT STYLES
+   * ======================================== */
+
+  input {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    cursor: pointer;
+    position: relative;
+    border-radius: var(--nuraly-checkbox-border-radius);
+    background-color: var(--nuraly-checkbox-background);
+    border: var(--nuraly-checkbox-border);
+    transition: var(--nuraly-checkbox-transition);
+    margin: 0;
+    outline: none;
+  }
+
+  /* ========================================
+   * SIZE VARIATIONS
+   * ======================================== */
+
+  /* Medium size (default) */
+  input {
+    width: var(--nuraly-checkbox-size-medium);
+    height: var(--nuraly-checkbox-size-medium);
+  }
+
+  :host([size='small']) input {
+    width: var(--nuraly-checkbox-size-small);
+    height: var(--nuraly-checkbox-size-small);
+  }
+
+  :host([size='large']) input {
+    width: var(--nuraly-checkbox-size-large);
+    height: var(--nuraly-checkbox-size-large);
+  }
+
+  /* ========================================
+   * CHECKBOX STATE STYLES
+   * ======================================== */
+
+  /* Empty/unchecked state */
+  :host(:not([checked]):not([indeterminate]):not([disabled])) input {
+    background-color: var(--nuraly-checkbox-background);
+    border: var(--nuraly-checkbox-border);
+  }
+
+  /* Checked and indeterminate states */
+  :host(:not([disabled])[checked]) input,
+  :host(:not([disabled])[indeterminate]) input {
+    background-color: var(--nuraly-checkbox-checked-background);
+    border: 1px solid var(--nuraly-checkbox-checked-border);
+  }
+
+  /* Hover states for interactive elements */
+  :host(:not([disabled]):hover) input {
+    border: var(--nuraly-checkbox-border-hover);
+  }
+
+  :host(:not([disabled]):hover[checked]) input,
+  :host(:not([disabled]):hover[indeterminate]) input {
+    background-color: var(--nuraly-checkbox-checked-background);
+    border: 1px solid var(--nuraly-checkbox-border-hover);
+    filter: brightness(1.1);
+  }
+
+  /* Focus states */
+  input:focus,
+  input:focus-visible {
+    border: var(--nuraly-checkbox-border-focus);
+    outline: var(--nuraly-checkbox-focus-outline);
+    outline-offset: 2px;
+  }
+
+  /* ========================================
+   * DISABLED STATE
+   * ======================================== */
+
+  :host([disabled]) {
+    color: var(--nuraly-checkbox-disabled-text-color);
+    cursor: not-allowed;
+  }
+
+  :host([disabled]) input {
+    background-color: var(--nuraly-checkbox-disabled-background);
+    border: 1px solid var(--nuraly-checkbox-disabled-border);
+    cursor: not-allowed;
+  }
+
+  /* ========================================
+   * CHECKMARK AND INDETERMINATE SYMBOLS
+   * ======================================== */
+
+  /* Base symbol styling */
+  input:after {
+    color: var(--nuraly-checkbox-checkmark-color);
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -51%);
+    transition: var(--nuraly-checkbox-transition);
+  }
+
+  /* Checked state checkmark */
+  :host([checked]) input:after {
+    border: solid var(--nuraly-checkbox-checkmark-color);
+    border-width: 0 2px 2px 0;
+    transform: translate(-50%, -51%) rotate(45deg);
+    content: '';
+    width: var(--nuraly-checkbox-local-medium-checked-width); /* Default to medium size */
+    height: var(--nuraly-checkbox-local-medium-checked-height); /* Default to medium size */
+  }
+
+  /* Checkmark sizing per size variant */
+  :host([checked][size='small']) input:after {
+    width: var(--nuraly-checkbox-local-small-checked-width);
+    height: var(--nuraly-checkbox-local-small-checked-height);
+  }
+
+  :host([checked][size='medium']) input:after {
+    width: var(--nuraly-checkbox-local-medium-checked-width);
+    height: var(--nuraly-checkbox-local-medium-checked-height);
+  }
+
+  :host([checked][size='large']) input:after {
+    width: var(--nuraly-checkbox-local-large-checked-width);
+    height: var(--nuraly-checkbox-local-large-checked-height);
+  }
+
+  /* Indeterminate state symbol */
+  :host([indeterminate]:not([checked])) input:after {
+    content: '-';
+    color: var(--nuraly-checkbox-indeterminate-mark-color);
+    font-weight: bold;
+    transform: translate(-50%, -51%);
+  }
+
+  /* Indeterminate symbol sizing per size variant */
+  :host([indeterminate][size='small']) input:after {
+    font-size: var(--nuraly-checkbox-local-small-indeterminate-size);
+  }
+
+  :host([indeterminate][size='medium']) input:after {
+    font-size: var(--nuraly-checkbox-local-medium-indeterminate-size);
+  }
+
+  :host([indeterminate][size='large']) input:after {
+    font-size: var(--nuraly-checkbox-local-large-indeterminate-size);
+  }
+
+  /* Empty state - no symbol */
+  :host(:not([checked]):not([indeterminate])) input:after {
+    content: '';
+  }
+
+  /* ========================================
+   * DISABLED STATE SYMBOLS
+   * ======================================== */
+
+  :host([disabled]) input:after {
+    color: var(--nuraly-checkbox-disabled-checkmark-color);
+    border-color: var(--nuraly-checkbox-disabled-checkmark-color);
+  }
+
+  /* ========================================
+   * LABEL TEXT STYLING
+   * ======================================== */
+
+  .checkbox-label {
+    flex: 1;
+    cursor: pointer;
+    user-select: none;
+    transition: var(--nuraly-checkbox-transition);
+  }
+
+  :host([disabled]) .checkbox-label {
+    cursor: not-allowed;
+  }
+
+  /* ========================================
+   * ACCESSIBILITY IMPROVEMENTS
+   * ======================================== */
+
+  @media (prefers-reduced-motion: reduce) {
+    :host,
+    input,
+    input:after,
+    .checkbox-label {
+      transition: none;
+    }
+  }
+
+  /* High contrast mode support */
+  @media (prefers-contrast: high) {
+    input {
+      border-width: 2px;
+    }
+    
+    :host([checked]) input:after,
+    :host([indeterminate]) input:after {
+      font-weight: 900;
+    }
+  }
+`;
+export const styles = checkBoxStyles;
+//# sourceMappingURL=checkbox.style.js.map

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

@@ -0,0 +1,6 @@
+export declare const enum CheckboxSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large"
+}
+//# sourceMappingURL=checkbox.types.d.ts.map

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=checkbox.types.js.map

package/dist/src/components/checkbox/index.d.ts

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

package/dist/src/components/checkbox/index.js

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

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

@@ -0,0 +1,5 @@
+import { NrCheckboxElement } from './checkbox.component.js';
+export declare const NrCheckbox: import("@lit-labs/react").ReactWebComponent<NrCheckboxElement, {
+    'nr-change': string;
+}>;
+//# sourceMappingURL=react.d.ts.map

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

@@ -0,0 +1,12 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { NrCheckboxElement } from './checkbox.component.js';
+export const NrCheckbox = createComponent({
+    tagName: 'nr-checkbox',
+    elementClass: NrCheckboxElement,
+    react: React,
+    events: {
+        'nr-change': 'nr-change',
+    },
+});
+//# sourceMappingURL=react.js.map

package/dist/src/components/code-editor/bundle.js

@@ -0,0 +1,55 @@
+import{css as e,html as t,LitElement as i}from"lit";import{property as a,customElement as s}from"lit/decorators.js";import{createRef as r,ref as n}from"lit/directives/ref.js";import*as o from"monaco-editor";import{registerCompletion as l}from"monacopilot";import d from"monaco-editor/min/vs/editor/editor.main.css?inline";import h from"monaco-editor/esm/vs/editor/editor.worker?worker";import c from"monaco-editor/esm/vs/language/typescript/ts.worker?worker";import m from"monaco-editor/esm/vs/language/html/html.worker?worker";import u from"monaco-editor/esm/vs/language/json/json.worker?worker";
+/**
+ * @license
+ * Copyright 2024 Nuraly
+ * SPDX-License-Identifier: MIT
+ */const p=e`
+  :host {
+    --nuraly-code-editor-width: 100%;
+    --nuraly-code-editor-height: 100%;
+    --nuraly-code-editor-min-height: 0;
+    --nuraly-code-editor-max-height: none;
+    --nuraly-code-editor-border-radius: 4px;
+    --nuraly-code-editor-border: 1px solid var(--nuraly-border-color, #e0e0e0);
+
+    display: block;
+    width: var(--nuraly-code-editor-width);
+    height: var(--nuraly-code-editor-height);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .editor-container {
+    width: 100%;
+    height: 100%;
+    min-height: var(--nuraly-code-editor-min-height);
+    max-height: var(--nuraly-code-editor-max-height);
+    border-radius: var(--nuraly-code-editor-border-radius);
+    overflow: hidden;
+  }
+
+  main {
+    width: 100%;
+    height: 100%;
+  }
+`
+/**
+ * @license
+ * Copyright 2024 Nuraly
+ * SPDX-License-Identifier: MIT
+ */,b={Light:"vs",Dark:"vs-dark",HighContrastDark:"hc-black",HighContrastLight:"hc-light"},y={JavaScript:"javascript",TypeScript:"typescript",JSON:"json",HTML:"html",CSS:"css",Markdown:"markdown",Python:"python",PlainText:"plaintext"},v=e=>class extends e{constructor(){super(...arguments),this.handleSystemThemeChange=()=>{this.closest("[data-theme]")||document.documentElement.hasAttribute("data-theme")||this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.setupThemeObserver(),this.setupDesignSystemObserver(),this.setupSystemThemeListener()}disconnectedCallback(){var e,t,i;super.disconnectedCallback(),null===(e=this.themeObserver)||void 0===e||e.disconnect(),null===(t=this.designSystemObserver)||void 0===t||t.disconnect(),null===(i=this.mediaQuery)||void 0===i||i.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var e;const t=this.explicitTheme;return t||((null===(e=window.matchMedia)||void 0===e?void 0:e.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get explicitTheme(){var e;return(null===(e=this.closest("[data-theme]"))||void 0===e?void 0:e.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme")||null}get currentDesignSystem(){var e;const t=(null===(e=this.closest("[design-system]"))||void 0===e?void 0:e.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===t?t:"default"}setupThemeObserver(){this.themeObserver=new MutationObserver(()=>{this.requestUpdate()}),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]})}setupDesignSystemObserver(){this.designSystemObserver=new MutationObserver(()=>{this.requestUpdate()}),this.designSystemObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["design-system"]})}setupSystemThemeListener(){window.matchMedia&&(this.mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.mediaQuery.addEventListener("change",this.handleSystemThemeChange))}};
+/**
+ * @license
+ * Copyright 2024 Nuraly
+ * SPDX-License-Identifier: MIT
+ */
+var g=function(e,t,i,a){for(var s,r=arguments.length,n=r<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a,o=e.length-1;o>=0;o--)(s=e[o])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};"undefined"!=typeof self&&(self.MonacoEnvironment={getWorker:(e,t)=>"typescript"===t||"javascript"===t?new c:"json"===t?new u:"html"===t?new m:new h});let f=class extends(v(i)){constructor(){super(...arguments),this.isEditorReady=!1,this.containerRef=r(),this.readonly=!1,this.theme=b.Dark,this.language="javascript",this.code="",this.lineNumbers=!0,this.minimap=!1,this.wordWrap=!1,this.fontSize=13,this.aiCompletions=!0,this.completionsEndpoint="/api/v1/copilot/completion",this.extraTypeDefinitions=""}render(){return t`
+      <style>
+        ${d}
+      </style>
+      <div class="editor-container" part="editor-container">
+        <main ${n(this.containerRef)}></main>
+      </div>
+    `}getValue(){var e,t;return null!==(t=null===(e=this.editor)||void 0===e?void 0:e.getValue())&&void 0!==t?t:""}setValue(e){if(this.editor){const t=this.editor.getPosition();this.editor.setValue(e),t&&this.editor.setPosition(t)}}setOptions(e){var t;null===(t=this.editor)||void 0===t||t.updateOptions(e)}focus(){var e;null===(e=this.editor)||void 0===e||e.focus()}firstUpdated(){this.containerRef.value?this.initializeEditor():console.error("NrCodeEditor: Container element not available")}initializeEditor(){const e=this.getInitialTheme();try{this.editor=o.editor.create(this.containerRef.value,{value:this.code,language:this.language,theme:e,fontSize:this.fontSize,automaticLayout:!0,readOnly:this.readonly,lineNumbers:this.lineNumbers?"on":"off",minimap:{enabled:this.minimap},wordWrap:this.wordWrap?"on":"off"}),this.isEditorReady=!0}catch(e){return void console.error("NrCodeEditor: Failed to create editor",e)}this.setupCustomIntelliSense(),this.aiCompletions&&l(o,this.editor,{language:this.language,endpoint:this.completionsEndpoint}),this.setupEventListeners(),this.setupThemeListener(),this.dispatchEvent(new CustomEvent("nr-ready",{detail:{editor:this.editor},bubbles:!0,composed:!0}))}setupEventListeners(){var e;this.editor&&(null===(e=this.editor.getModel())||void 0===e||e.onDidChangeContent(()=>{this.emit("nr-change",{value:this.getValue()})}),this.editor.onKeyDown(e=>{this.emit("nr-keydown",this.createKeyEventDetail(e))}),this.editor.onKeyUp(e=>{this.emit("nr-keyup",this.createKeyEventDetail(e))}),this.editor.onDidFocusEditorWidget(()=>this.emit("nr-focus")),this.editor.onDidBlurEditorWidget(()=>this.emit("nr-blur")))}createKeyEventDetail(e){return{event:e.browserEvent,key:e.browserEvent.key,code:e.browserEvent.code,ctrlKey:e.browserEvent.ctrlKey,shiftKey:e.browserEvent.shiftKey,altKey:e.browserEvent.altKey,metaKey:e.browserEvent.metaKey}}emit(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}setupThemeListener(){this.applyThemeFromMixin()}getMonacoThemeFromMixin(){if(this.theme)return this.theme;return this.currentTheme.includes("dark")?b.Dark:b.Light}applyThemeFromMixin(){if(!this.isEditorReady||!this.editor)return;const e=this.getMonacoThemeFromMixin();if(e!==this.lastAppliedTheme)try{o.editor.setTheme(e),this.lastAppliedTheme=e}catch(e){}}getInitialTheme(){return this.getMonacoThemeFromMixin()}setupCustomIntelliSense(){const e=o.languages.typescript.typescriptDefaults,t=o.languages.typescript.javascriptDefaults;[e,t].forEach(e=>{this.extraTypeDefinitions&&e.addExtraLib(this.extraTypeDefinitions,"database-types.d.ts")});const i={target:o.languages.typescript.ScriptTarget.ES2020,allowNonTsExtensions:!0,moduleResolution:o.languages.typescript.ModuleResolutionKind.NodeJs,module:o.languages.typescript.ModuleKind.CommonJS,noEmit:!0,esModuleInterop:!0,allowJs:!0};e.setCompilerOptions(Object.assign(Object.assign({},i),{jsx:o.languages.typescript.JsxEmit.React,reactNamespace:"React",typeRoots:["node_modules/@types"]})),t.setCompilerOptions(Object.assign(Object.assign({},i),{checkJs:!1})),o.languages.registerCompletionItemProvider(["javascript","typescript"],{provideCompletionItems:()=>({suggestions:[{label:"Database",kind:o.languages.CompletionItemKind.Class,insertText:"Database",documentation:"Static Database Client for Nuraly Database Manager",detail:"class Database"},{label:"Database.select",kind:o.languages.CompletionItemKind.Method,insertText:'Database.select(${1:"tableName"}, {${2:}})',insertTextRules:o.languages.CompletionItemInsertTextRule.InsertAsSnippet,documentation:"Select data from a table with optional criteria and relations",detail:"(method) Database.select(tableName: string, options?: SelectOptions): Promise<any>"},{label:"Database.insert",kind:o.languages.CompletionItemKind.Method,insertText:'Database.insert(${1:"tableName"}, ${2:{}})',insertTextRules:o.languages.CompletionItemInsertTextRule.InsertAsSnippet,documentation:"Insert data into a table",detail:"(method) Database.insert(tableName: string, data: Record<string, any>): Promise<any>"},{label:"Database.update",kind:o.languages.CompletionItemKind.Method,insertText:'Database.update(${1:"tableName"}, ${2:{}}, ${3:{}})',insertTextRules:o.languages.CompletionItemInsertTextRule.InsertAsSnippet,documentation:"Update data in a table",detail:"(method) Database.update(tableName: string, data: Record<string, any>, criteria: Record<string, any>): Promise<any>"},{label:"Database.delete",kind:o.languages.CompletionItemKind.Method,insertText:'Database.delete(${1:"tableName"}, ${2:{}})',insertTextRules:o.languages.CompletionItemInsertTextRule.InsertAsSnippet,documentation:"Delete data from a table",detail:"(method) Database.delete(tableName: string, criteria: Record<string, any>): Promise<any>"},{label:"Database.createTable",kind:o.languages.CompletionItemKind.Method,insertText:'Database.createTable(${1:"tableName"}, {\n  ${2:field}: { type: ${3:"varchar"}, nullable: ${4:false} }\n})',insertTextRules:o.languages.CompletionItemInsertTextRule.InsertAsSnippet,documentation:"Create a new table with specified schema",detail:"(method) Database.createTable(tableName: string, schema: TableSchema, options?: Record<string, any>): Promise<any>"},{label:"Database.paginate",kind:o.languages.CompletionItemKind.Method,insertText:'Database.paginate(${1:"tableName"}, ${2:1}, ${3:10}, ${4:{}})',insertTextRules:o.languages.CompletionItemInsertTextRule.InsertAsSnippet,documentation:"Get paginated results with metadata",detail:"(method) Database.paginate(tableName: string, page?: number, pageSize?: number, options?: SelectOptions): Promise<PaginationResult<any>>"},{label:"Database.schemaQuery",kind:o.languages.CompletionItemKind.Method,insertText:'Database.schemaQuery(${1:"LIST_TABLES"}${2:, "tableName"})',insertTextRules:o.languages.CompletionItemInsertTextRule.InsertAsSnippet,documentation:"Execute schema queries for database introspection",detail:"(method) Database.schemaQuery(type: string, tableName?: string): Promise<any>"},{label:"Database.join",kind:o.languages.CompletionItemKind.Method,insertText:'Database.join(${1:"mainTable"}, [\n  { table: ${2:"joinTable"}, on: ${3:"field1 = field2"}, type: ${4:"inner"} }\n], ${5:{}})',insertTextRules:o.languages.CompletionItemInsertTextRule.InsertAsSnippet,documentation:"Perform complex join queries",detail:"(method) Database.join(mainTable: string, joins: JoinDefinition[], options?: Record<string, any>): Promise<any>"}]})}),o.languages.registerHoverProvider(["javascript","typescript"],{provideHover:(e,t)=>{const i=e.getWordAtPosition(t);if(!i)return;return{Database:{contents:[{value:"**Database**"},{value:"Static Database Client for Nuraly Database Manager"},{value:"Provides a comprehensive interface for database operations including:"},{value:"- Table management (create, drop, schema operations)"},{value:"- Data operations (select, insert, update, delete)"},{value:"- Advanced queries (joins, aggregations, pagination)"},{value:"- Schema introspection and management"}]}}[i.word]||null}})}updated(e){var t;if(super.updated(e),this.isEditorReady&&this.editor){if(this.applyThemeFromMixin(),e.has("code")&&this.code!==e.get("code")){if(this.editor.getModel()&&this.code!==this.getValue())try{const e=this.editor.getPosition();this.editor.setValue(null!==(t=this.code)&&void 0!==t?t:""),e&&this.editor.setPosition(e)}catch(e){}}if(e.has("readonly"))try{this.editor.updateOptions({readOnly:this.readonly})}catch(e){}if(e.has("language")&&this.editor.getModel())try{o.editor.setModelLanguage(this.editor.getModel(),this.language||"plaintext")}catch(e){}if(e.has("theme"))try{o.editor.setTheme(this.theme)}catch(e){}if(e.has("fontSize"))try{this.editor.updateOptions({fontSize:this.fontSize})}catch(e){}if(e.has("lineNumbers"))try{this.editor.updateOptions({lineNumbers:this.lineNumbers?"on":"off"})}catch(e){}if(e.has("minimap"))try{this.editor.updateOptions({minimap:{enabled:this.minimap}})}catch(e){}if(e.has("wordWrap"))try{this.editor.updateOptions({wordWrap:this.wordWrap?"on":"off"})}catch(e){}}}disconnectedCallback(){if(super.disconnectedCallback(),this.editor){const e=this.editor.getModel();this.editor.dispose(),null==e||e.dispose(),this.editor=void 0}this.isEditorReady=!1}};f.styles=p,g([a({type:Boolean,reflect:!0})],f.prototype,"readonly",void 0),g([a({type:String,reflect:!0})],f.prototype,"theme",void 0),g([a({type:String,reflect:!0})],f.prototype,"language",void 0),g([a({type:String})],f.prototype,"code",void 0),g([a({type:Boolean,attribute:"line-numbers"})],f.prototype,"lineNumbers",void 0),g([a({type:Boolean})],f.prototype,"minimap",void 0),g([a({type:Boolean,attribute:"word-wrap"})],f.prototype,"wordWrap",void 0),g([a({type:Number,attribute:"font-size"})],f.prototype,"fontSize",void 0),g([a({type:Boolean,attribute:"ai-completions"})],f.prototype,"aiCompletions",void 0),g([a({type:String,attribute:"completions-endpoint"})],f.prototype,"completionsEndpoint",void 0),g([a({attribute:!1})],f.prototype,"extraTypeDefinitions",void 0),f=g([s("nr-code-editor")],f);export{y as CODE_EDITOR_LANGUAGE,b as CODE_EDITOR_THEME,f as NrCodeEditorElement,p as codeEditorStyles};

package/dist/src/components/code-editor/code-editor.component.d.ts

@@ -0,0 +1,119 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement, type PropertyValues } from 'lit';
+import { type CodeEditorTheme, type CodeEditorLanguage } from './code-editor.types.js';
+import * as monaco from 'monaco-editor';
+declare const NrCodeEditorElement_base: (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & typeof LitElement;
+/**
+ * NuralyUI Code Editor component wrapping Monaco Editor.
+ *
+ * @example
+ * ```html
+ * <nr-code-editor
+ *   language="javascript"
+ *   theme="vs-dark"
+ *   .code=${"console.log('Hello');"}
+ *   @nr-change=${(e) => console.log(e.detail.value)}
+ * ></nr-code-editor>
+ * ```
+ *
+ * @fires nr-change - Fired when the code content changes
+ * @fires nr-keydown - Fired on keydown events in the editor
+ * @fires nr-keyup - Fired on keyup events in the editor
+ * @fires nr-focus - Fired when the editor gains focus
+ * @fires nr-blur - Fired when the editor loses focus
+ * @fires nr-ready - Fired when the editor is ready
+ *
+ * @csspart editor-container - The container wrapping the editor
+ *
+ * @cssprop [--nr-code-editor-width=100%] - Width of the editor
+ * @cssprop [--nr-code-editor-height=100%] - Height of the editor
+ * @cssprop [--nr-code-editor-min-height=0] - Minimum height
+ * @cssprop [--nr-code-editor-max-height=none] - Maximum height
+ * @cssprop [--nr-code-editor-border-radius=4px] - Border radius
+ */
+export declare class NrCodeEditorElement extends NrCodeEditorElement_base {
+    static styles: import("lit").CSSResult;
+    /** Monaco editor instance */
+    editor?: monaco.editor.IStandaloneCodeEditor;
+    /** Whether editor is initialized */
+    private isEditorReady;
+    /** Reference to the editor container */
+    private containerRef;
+    /** Track the last applied Monaco theme to avoid unnecessary updates */
+    private lastAppliedTheme?;
+    /** Makes the editor read-only */
+    readonly: boolean;
+    /** Editor theme (vs, vs-dark, hc-black, hc-light) */
+    theme: CodeEditorTheme;
+    /** Programming language for syntax highlighting */
+    language: CodeEditorLanguage;
+    /** The code content */
+    code: string;
+    /** Show line numbers */
+    lineNumbers: boolean;
+    /** Show minimap */
+    minimap: boolean;
+    /** Enable word wrap */
+    wordWrap: boolean;
+    /** Font size in pixels */
+    fontSize: number;
+    /** Enable AI completions via monacopilot */
+    aiCompletions: boolean;
+    /** API endpoint for AI completions */
+    completionsEndpoint: string;
+    /** Extra type definitions for Monaco IntelliSense (host-provided) */
+    extraTypeDefinitions: string;
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Returns the current code contents
+     */
+    getValue(): string;
+    /**
+     * Sets the editor value programmatically
+     */
+    setValue(value: string): void;
+    /**
+     * Updates Monaco editor options
+     */
+    setOptions(options: monaco.editor.IStandaloneEditorConstructionOptions): void;
+    /**
+     * Focus the editor
+     */
+    focus(): void;
+    firstUpdated(): void;
+    private initializeEditor;
+    private setupEventListeners;
+    /** Helper to create keyboard event detail */
+    private createKeyEventDetail;
+    /** Helper to emit custom events */
+    private emit;
+    private setupThemeListener;
+    /**
+     * Convert the mixin's currentTheme to Monaco theme
+     * Uses explicit theme prop if set, otherwise derives from data-theme
+     */
+    private getMonacoThemeFromMixin;
+    /**
+     * Apply the current theme from the mixin to Monaco editor
+     */
+    private applyThemeFromMixin;
+    /**
+     * Get the initial theme for the editor
+     * Priority: explicit theme prop > data-theme > system preference
+     */
+    private getInitialTheme;
+    private setupCustomIntelliSense;
+    protected updated(changedProperties: PropertyValues): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-code-editor': NrCodeEditorElement;
+    }
+}
+export {};
+//# sourceMappingURL=code-editor.component.d.ts.map