le-kit 0.0.3 → 0.1.1

package/dist/types/types/blocks.d.ts

@@ -0,0 +1,136 @@
+/**
+ * Block types for the rich text editor.
+ *
+ * Used by: le-rich-text-editor, le-editor-block, le-block-menu
+ */
+/**
+ * Available block types for the editor.
+ * Start with essential types, expand in future versions.
+ */
+export type BlockType = 'paragraph' | 'heading1' | 'heading2' | 'heading3' | 'bullet-list' | 'numbered-list' | 'quote' | 'code' | 'divider';
+/**
+ * A single block in the editor.
+ *
+ * @example Paragraph block
+ * ```typescript
+ * const block: LeBlock = {
+ *   id: 'block-1',
+ *   type: 'paragraph',
+ *   content: 'Hello <strong>world</strong>!'
+ * };
+ * ```
+ *
+ * @example Code block with language
+ * ```typescript
+ * const block: LeBlock = {
+ *   id: 'block-2',
+ *   type: 'code',
+ *   content: 'const x = 1;',
+ *   attributes: { language: 'typescript' }
+ * };
+ * ```
+ */
+export interface LeBlock {
+    /**
+     * Unique identifier for the block.
+     */
+    id: string;
+    /**
+     * The type of block (paragraph, heading, list, etc.)
+     */
+    type: BlockType;
+    /**
+     * HTML content of the block.
+     * For most blocks, this is the inner HTML.
+     * For divider, this is empty.
+     */
+    content: string;
+    /**
+     * Block-specific attributes.
+     */
+    attributes?: LeBlockAttributes;
+}
+/**
+ * Block-specific attributes
+ */
+export interface LeBlockAttributes {
+    /**
+     * Programming language for code blocks.
+     */
+    language?: string;
+    /**
+     * Placeholder text shown when block is empty.
+     */
+    placeholder?: string;
+    /**
+     * Custom CSS class for the block.
+     */
+    className?: string;
+    /**
+     * Additional custom attributes.
+     */
+    [key: string]: unknown;
+}
+/**
+ * Configuration for a block type.
+ * Used by the block registry to render and manage blocks.
+ */
+export interface BlockTypeConfig {
+    /**
+     * Block type identifier.
+     */
+    type: BlockType;
+    /**
+     * Display label for the block type (shown in block menu).
+     */
+    label: string;
+    /**
+     * Icon for the block type (emoji or icon name).
+     */
+    icon?: string;
+    /**
+     * HTML tag to render for this block type.
+     */
+    tag: string;
+    /**
+     * CSS class applied to the block element.
+     */
+    className?: string;
+    /**
+     * Placeholder text shown when block is empty.
+     */
+    placeholder?: string;
+    /**
+     * Whether the block content is editable.
+     * Set to false for blocks like divider.
+     */
+    editable?: boolean;
+    /**
+     * Description shown in block menu.
+     */
+    description?: string;
+    /**
+     * Keyboard shortcut hint (e.g., "# " for heading).
+     */
+    shortcut?: string;
+}
+/**
+ * Default block type configurations.
+ */
+export declare const DEFAULT_BLOCK_CONFIGS: BlockTypeConfig[];
+/**
+ * Event detail for block changes
+ */
+export interface LeBlockChangeDetail {
+    blocks: LeBlock[];
+    changedBlock?: LeBlock;
+    action: 'add' | 'remove' | 'update' | 'move';
+}
+/**
+ * Generate a unique block ID
+ */
+export declare function generateBlockId(): string;
+/**
+ * Create a new block with default values
+ */
+export declare function createBlock(type: BlockType, content?: string): LeBlock;

package/dist/types/types/options.d.ts

@@ -0,0 +1,124 @@
+/**
+ * Universal option interface used across Le-Kit components.
+ *
+ * Used by: le-select, le-combobox, le-multiselect, le-tabs,
+ * le-block-menu, le-emoji-picker, and any menu/list components.
+ *
+ * @example Basic option
+ * ```typescript
+ * const option: LeOption = {
+ *   label: 'Option 1',
+ *   value: 'opt1'
+ * };
+ * ```
+ *
+ * @example With icons and description
+ * ```typescript
+ * const option: LeOption = {
+ *   label: 'Settings',
+ *   value: 'settings',
+ *   iconStart: '⚙️',
+ *   description: 'Configure application settings'
+ * };
+ * ```
+ *
+ * @example Grouped options
+ * ```typescript
+ * const options: LeOption[] = [
+ *   { label: 'Apple', value: 'apple', group: 'Fruits' },
+ *   { label: 'Banana', value: 'banana', group: 'Fruits' },
+ *   { label: 'Carrot', value: 'carrot', group: 'Vegetables' },
+ * ];
+ * ```
+ *
+ * @example Nested options (for submenus)
+ * ```typescript
+ * const option: LeOption = {
+ *   label: 'More actions',
+ *   iconEnd: '▶',
+ *   children: [
+ *     { label: 'Duplicate', value: 'duplicate' },
+ *     { label: 'Archive', value: 'archive' },
+ *   ]
+ * };
+ * ```
+ */
+export interface LeOption {
+    /**
+     * Unique identifier for the option.
+     * Auto-generated if not provided.
+     */
+    id?: string;
+    /**
+     * Display text for the option (required).
+     */
+    label: string;
+    /**
+     * Selection value. Defaults to label if not provided.
+     */
+    value?: string | number;
+    /**
+     * Whether the option is disabled and cannot be selected.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the option is currently selected.
+     * Used for multiselect and menu components.
+     */
+    selected?: boolean;
+    /**
+     * Whether the option is checked.
+     * Used for checkbox/radio menu items.
+     */
+    checked?: boolean;
+    /**
+     * Icon displayed at the start (left) of the option.
+     * Can be a URL, icon name, or emoji character.
+     */
+    iconStart?: string;
+    /**
+     * Icon displayed at the end (right) of the option.
+     * Can be a URL, icon name, or emoji character.
+     */
+    iconEnd?: string;
+    /**
+     * Secondary description text displayed below the label.
+     */
+    description?: string;
+    /**
+     * Nested child options for hierarchical menus or submenus.
+     */
+    children?: LeOption[];
+    /**
+     * Group label for categorizing options in flat lists.
+     * Options with the same group value are visually grouped together.
+     */
+    group?: string;
+    /**
+     * Add a visual separator line before or after this option.
+     */
+    separator?: 'before' | 'after';
+    /**
+     * Custom data passthrough for application-specific needs.
+     * This data is included in selection events.
+     */
+    data?: Record<string, unknown>;
+}
+/**
+ * Helper type for option value
+ */
+export type LeOptionValue = string | number;
+/**
+ * Event detail for option selection events
+ */
+export interface LeOptionSelectDetail {
+    value: LeOptionValue;
+    option: LeOption;
+}
+/**
+ * Event detail for multi-option selection events
+ */
+export interface LeMultiOptionSelectDetail {
+    values: LeOptionValue[];
+    options: LeOption[];
+}

package/dist/types/utils/utils.d.ts

@@ -1 +1,54 @@
-export declare function format(first: string, middle: string, last: string): string;
+/**
+ * Utility functions for le-kit components
+ */
+/**
+ * Generates a unique ID for component instances
+ */
+export declare function generateId(prefix?: string): string;
+/**
+ * Parses a comma-separated string into an array
+ */
+export declare function parseCommaSeparated(value: string | undefined): string[];
+/**
+ * Checks if a slot has content
+ */
+export declare function slotHasContent(el: HTMLElement, slotName?: string): boolean;
+/**
+ * Sets up a MutationObserver to track mode changes on ancestor elements.
+ * Returns a cleanup function to disconnect the observer.
+ *
+ * If the element or any ancestor has an explicit `mode` attribute, that creates
+ * a "mode boundary" - the mode is determined from that point, not from further up.
+ * This allows components like le-popover to force default mode for their children.
+ *
+ * @param el - The component's host element
+ * @param callback - Function to call when mode changes, receives the new mode
+ * @returns Cleanup function to disconnect the observer
+ *
+ * @example
+ * ```tsx
+ * export class MyComponent {
+ *   @Element() el: HTMLElement;
+ *   @State() adminMode: boolean = false;
+ *   private disconnectModeObserver?: () => void;
+ *
+ *   connectedCallback() {
+ *     this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {
+ *       this.adminMode = mode === 'admin';
+ *     });
+ *   }
+ *
+ *   disconnectedCallback() {
+ *     this.disconnectModeObserver?.();
+ *   }
+ * }
+ * ```
+ */
+export declare function observeModeChanges(el: HTMLElement, callback: (mode: string) => void): () => void;
+/**
+ * Combines multiple class names into a single string, filtering out falsy values.
+ *
+ * @param classes - arguments of class names, undefined, arrays, objects with boolean values and nested combinations of these
+ * @returns Combined class names string
+ */
+export declare function classnames(...classes: any[]): string;

package/loader/cdn.js

@@ -0,0 +1 @@
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.cjs.js

@@ -0,0 +1 @@
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.d.ts

@@ -0,0 +1,24 @@
+export * from '../dist/types/components';
+export interface CustomElementsDefineOptions {
+  exclude?: string[];
+  resourcesUrl?: string;
+  syncQueue?: boolean;
+  jmp?: (c: Function) => any;
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
+/**
+ * @deprecated
+ */
+export declare function applyPolyfills(): Promise<void>;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare function setNonce(nonce: string): void;

package/loader/index.es2017.js

@@ -0,0 +1 @@
+export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -0,0 +1,2 @@
+(function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
+export * from '../dist/esm/loader.js';

package/package.json

@@ -1,25 +1,76 @@
 {
-  "author": "Andrey Lechev <leechy@leechy.ru> (https://www.leechy.ru)",
   "name": "le-kit",
-  "version": "0.0.3",
-  "description": "Le Kit: Unusual Web Components",
-  "module": "dist/esm/index.js",
-  "main": "dist/index.js",
-  "unpkg": "dist/ionic.js",
-  "types": "dist/types/components.d.ts",
+  "version": "0.1.1",
+  "description": "Themable web components library with CMS admin mode support",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
   "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/le-kit/le-kit.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/le-kit/le-kit.esm.js",
+      "require": "./dist/le-kit/le-kit.cjs.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./core": {
+      "import": "./dist/core/index.js",
+      "types": "./dist/core/index.d.ts"
+    },
+    "./admin": {
+      "import": "./dist/admin/index.js",
+      "types": "./dist/admin/index.d.ts"
+    },
+    "./components": {
+      "import": "./dist/components/index.js",
+      "types": "./dist/components/index.d.ts"
+    },
+    "./loader": {
+      "import": "./loader/index.js",
+      "require": "./loader/index.cjs",
+      "types": "./loader/index.d.ts"
+    },
+    "./themes": "./dist/themes/index.css",
+    "./themes/base": "./dist/themes/base.css",
+    "./themes/default": "./dist/themes/default.css",
+    "./themes/dark": "./dist/themes/dark.css",
+    "./themes/gradient": "./dist/themes/gradient.css",
+    "./themes/minimal": "./dist/themes/minimal.css",
+    "./themes/warm": "./dist/themes/warm.css"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/leechy/le-kit.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
   "files": [
-    "dist/"
+    "dist/",
+    "loader/"
   ],
   "scripts": {
-    "build": "stencil build --docs",
+    "prebuild": "node scripts/build-targets.mjs",
+    "build": "stencil build",
+    "postbuild": "node scripts/bundle-targets.mjs && cp -r src/themes dist/themes && cem analyze --stencil",
+    "prestart": "node scripts/build-targets.mjs && cem analyze --stencil",
     "start": "stencil build --dev --watch --serve",
     "test": "stencil test --spec --e2e",
-    "test.watch": "stencil test --spec --e2e --watchAll"
+    "test.watch": "stencil test --spec --e2e --watchAll",
+    "generate": "stencil generate",
+    "analyze": "cem analyze --stencil"
   },
   "devDependencies": {
-    "@stencil/core": "^0.18.1",
-    "@types/jasmine": "^3.3.12"
+    "@custom-elements-manifest/analyzer": "^0.11.0",
+    "@stencil/core": "^4.27.1",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.13.5",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
+    "puppeteer": "^24.3.0"
   },
-  "license": "MIT"
+  "license": "MIT",
+  "customElements": "custom-elements.json"
 }