open-index/open-npm huggingface dataset:
npm package: @makeapie/vue-component-helpers
Description: 便于导出vue组件components
Author: tangfei
Latest version: 0.0.1

# Vue组件带类型导出

## 下面以 header 组件为例

### 组件目录
```txt
components
├── index.ts
└── header
    ├── src
    |    ├── header.ts
    |    └── header.vue
    └── index.ts
```

### components/index.ts
```ts
export * from './header'
```

###  components/header/src/header.ts
```ts
import { buildProps } from '@makeapie/vue-component-helpers'
import type { ExtractPropTypes, PropType } from 'vue'
import type Header from './header.vue'

export type UserInfo = {
  id: string
  name: string
}

export const headerProps = buildProps({
  /**
   * @description 内容
   */
  value: {
    type: Object as PropType<UserInfo>,
    default: () => ({})
  }
} as const)

export type HeaderProps = ExtractPropTypes<typeof headerProps>
export type HeaderInstance = InstanceType<typeof Header>

export const headerEmits = {
  click: (value: string) => value
}
export type HeaderEmits = typeof headerEmits
```

###  components/header/src/header.vue
```vue
<template>
  <div :class="ns.b()">
    头部
  </div>
</template>

<script setup lang="ts">
import { useNamespace } from '@app/hooks'
import { headerEmits, headerProps } from './header'

defineProps(headerProps)

defineOptions({
  name: 'IcsChatHeader'
})

const emit = defineEmits(headerEmits)

const ns = useNamespace('header')

/**
 * 处理切换事件的函数
 * @emits switch 触发切换事件
 */
function handleSwitch() {
  emit('click', 'switch')
}

function handleJumoHome() {
  emit('click', 'home')
}
</script>
```


### components/header/index.ts
```ts
import { withInstall } from '@makeapie/vue-component-helpers'

import Header from './src/header.vue'
import type { SFCWithInstall } from '@makeapie/vue-component-helpers'

export const IcsChatHeader: SFCWithInstall<typeof Header> = withInstall(Header)
export default IcsChatHeader

export * from './src/header'
export * from './src/types'
```
npm package: @makeappeasy/airtable-mcp-server
Description: MCP server for Airtable operations
Author: makeappeasy
Latest version: 1.0.1

# Airtable MCP Server

An MCP (Model Context Protocol) server that provides tools for interacting with Airtable's API. This server allows AI assistants to perform various operations on Airtable bases and tables.

## Features

- **List Bases**: Get a list of all available Airtable bases
- **List Tables**: Get all tables within a specific base
- **Search Records**: Retrieve records with optional filtering and sorting
- **Edit Record**: Update existing records
- **Add Record**: Create new records
- **Custom Query**: Execute flexible Airtable API operations

## Installation

```bash
npm install @makeappeasy/airtable-mcp-server
```

## Configuration

Add the server to your MCP settings configuration file:

```json
{
  "mcpServers": {
    "airtable": {
      "command": "node",
      "args": ["node_modules/@makeappeasy/airtable-mcp-server/dist/index.js"],
      "env": {
        "AIRTABLE_API_KEY": "your-airtable-api-key"
      }
    }
  }
}
```

## Usage

Once configured, the following tools will be available:

### list_bases
Lists all available Airtable bases.

### list_tables
Lists all tables in a specific base.
- `baseId` (required): The ID of the base

### search_records
Retrieves records from a table with optional filtering.
- `baseId` (required): The ID of the base
- `tableName` (required): The name of the table
- `filterByFormula` (optional): Airtable formula to filter records
- `maxRecords` (optional): Maximum number of records to return (default: 100)
- `sort` (optional): Array of sort configurations

### edit_record
Updates an existing record.
- `baseId` (required): The ID of the base
- `tableName` (required): The name of the table
- `recordId` (required): The ID of the record to update
- `fields` (required): Object containing fields to update

### add_record
Creates a new record.
- `baseId` (required): The ID of the base
- `tableName` (required): The name of the table
- `fields` (required): Object containing fields for the new record

### custom_query
Executes a custom Airtable API request.
- `method` (required): HTTP method (GET, POST, PATCH, PUT, DELETE)
- `endpoint` (required): API endpoint relative to base URL
- `data` (optional): Request body data
- `params` (optional): Query parameters

## License

MIT
npm package: @makeappeasy/mcp-sequentialthinking
Description: MCP server for sequential thinking and problem solving
Author: Anthropic, PBC
Latest version: 0.1.0


# Sequential Thinking MCP Server

An MCP server implementation that provides a tool for dynamic and reflective problem-solving through a structured thinking process.

## Features

- Break down complex problems into manageable steps
- Revise and refine thoughts as understanding deepens
- Branch into alternative paths of reasoning
- Adjust the total number of thoughts dynamically
- Generate and verify solution hypotheses

## Tool

### sequential_thinking

Facilitates a detailed, step-by-step thinking process for problem-solving and analysis.

**Inputs:**
- `thought` (string): The current thinking step
- `nextThoughtNeeded` (boolean): Whether another thought step is needed
- `thoughtNumber` (integer): Current thought number
- `totalThoughts` (integer): Estimated total thoughts needed
- `isRevision` (boolean, optional): Whether this revises previous thinking
- `revisesThought` (integer, optional): Which thought is being reconsidered
- `branchFromThought` (integer, optional): Branching point thought number
- `branchId` (string, optional): Branch identifier
- `needsMoreThoughts` (boolean, optional): If more thoughts are needed

## Usage

The Sequential Thinking tool is designed for:
- Breaking down complex problems into steps
- Planning and design with room for revision
- Analysis that might need course correction
- Problems where the full scope might not be clear initially
- Tasks that need to maintain context over multiple steps
- Situations where irrelevant information needs to be filtered out

## Configuration

### Usage with Claude Desktop

Add this to your `claude_desktop_config.json`:

#### npx

```json
{
  "mcpServers": {
    "sequential-thinking": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-sequential-thinking"
      ]
    }
  }
}
```

#### docker

```json
{
  "mcpServers": {
    "sequentialthinking": {
      "command": "docker",
      "args": [
        "run",
        "--rm",
        "-i",
        "mcp/sequentialthinking"
      ]
    }
  }
}
```

## Building

Docker:

```bash
docker build -t mcp/sequentialthinking -f src/sequentialthinking/Dockerfile .
```

## License

This MCP server is licensed under the MIT License. This means you are free to use, modify, and distribute the software, subject to the terms and conditions of the MIT License. For more details, please see the LICENSE file in the project repository.
npm package: @makechart/scatter
Description: Config:
Author: zbryikt
Latest version: 0.0.3

# @makechart/scatter

Config:

 - `alignRange`: boolean. when true, X-axis and Y-axis shares the same value range.


Events:

 - `focus`: highlight certain points by their name.
   - options: an object with following fields:
     - `names`: a (list of) string of the name of node(s) to highlight.
   - to dismiss focus mode, simply fire `focus` event without parameter.
npm package: @makechtec/cohua
Description: Significa comprar en lengua Nahuatl, también es un API que se expone como un objeto que contiene una basta cantidad de métodos relacionados a un ecommerce.
Author: makechtec
Latest version: 1.0.5

# COHUA #

Significa comprar en lengua Nahuatl, también es un API que se expone como un objeto
que contiene una basta cantidad de métodos relacionados a un ecommerce.

Está pensado para trabajarse dentro de temas hechos en javascript, pues este objeto
puede ser llamado en cualquier parte.


default urls por el carrito:

    export const defaultUrls = {
        list: () => "/cart/list",
        clean: () => "/cart/clean",
        add: (item: CartItem) => `/cart/add/${item.id}`,
        remove: (item: CartItem) => `/cart/remove/${item.id}`,
        find: (id: number) => `/cart/find/${id}`,
        total: (attributeName: string) => `/cart/total/${attributeName}`,
        numberOfItems: () => "/cart/numberOfItems",
    }

Para stock:
npm package: @makechtec/cuahuitl
Description: ## Validator class ##
Author: MakechTec
Latest version: 1.6.1

# CuahuitlDOM #

## Validator class ## 

Constructor:

    new Validator();

Methods:

    isValidElement( element: any) : boolean;

Check if the element is null or undefined, then return false if it is. Else return true.

## CuahuitlDOM class ##

Constructor:

    new CuahuitlDOM();

Methods:

    findAndThen( query: string, success: any, fail: any ) : any;

Attempt to find a DOM element using the supplied query, if this element is found then it will call the success. Also pass the element as param.

Optionally you can pass a fail callback in case of the element is not found.

    isInDOM(query string): boolean;

Check if the element is found in the DOM, then returns a boolean value.

    find(query string): HTMLElement | null;

Same as document.querySelector().

    nodeByQuery(query string): HTMLElement | null;

Returns a Node object.

## Usage ##

    import {CuahuitlDOM} from '@makechtec/cuahuitl';

    const dom = new CuahuitlDOM();
    
    dom.findAndThen("#root", (element) => console.log(element.textNode), () => console.log("not found element"));


## Node class ##

Constructor: 

    new Node(query: string);

The query descriptor.

Methods:

    isInDOM(): boolean;

Same as CuahuitlDOM but use the same query descriptor.

    getElement();

Same as CuahuitlDOM.find but use the same query descriptor.

## Usage ##

    import {Node} from '@makechtec/cuahuitl';

    const title = new Node("#title1");

    if(title.isInDOM()){
        console.log(title.getElement());
    }

## Viewport class ##

Constructor:

    new Viewport();
    new Viewport( breakpoints: Array<Breakpoint> );

Methods:

    addBreakpoint( breakpoint: BreakPoint ): Viewport;

    removeBreakpointByName( name: string ): Viewport;

Add or return breakpoints, then returns the same Viewport instance.

    currentBreakpoint(): Breakpoint;

Measure the window.innertWidth and returns the breakpoint which corresponds.

## Breakpoint class ##

Constructor:

    new Breakpoint();
    new Breakpoint(minWidth: number, maxWidth: number, name: string);

As you can see the information is the min and max width in pixels. Also the name to be identified.

## Usage ##

    import {Viewport, Breakpoint} from '@makechtec/cuahuitl';

    const breakpoints = [
        new Breakpoint( 0, 769, "small" ),
        new Breakpoint( 770, 960, "medium" ),
        new Breakpoint( 961, 2000, "large" )
    ];

    const viewport = new Viewport(breakpoints);

    if(viewport.currentBreakpoint().name == "small"){
        console.log("this is mobile");
    }

## ClassListWrapper ##

It simply serves as a wrapper for a class list without a target object.

Constructor:

    new ClassListWrapper( str: string );

Methods:

    classList(): DOMTokenList;

Returns a class list built from the specific string.
npm package: @makechtec/pipe
Description: pipe pattern
Author: makechtec
Latest version: 1.0.7

# Pipe #

Usage:

    let content = "";

    let pipe = new Pipe(content);

    let newContent = new Pipe(content)
                    .addAction( (content, additonalParam) => {
                        return content + additionalParam;
                    }, "additonal param value " )
                    .addAction( (content, additonalParam) => {
                        return content + additionalParam;
                    }, "additonal param2 value " )
                    .addAction( (content, additonalParam) => {
                        return content + additionalParam;
                    }, "additonal param3 value " )
                    .execActions();

    console.log(newContent);

Result:

    additonal param1 value additonal param2 value additonal param3 value

the core of a pipe is apply multiple actions to an element.
npm package: @makechtec/randomkey
Description: generate randomkeyid
Author: MakechTec
Latest version: 4.0.0

# Random Key generator #

very, very, very simple to use

installation:

    npm install @makechtec/randomkey

For use:

    import {generateUUID} from "../src/globals";

    let generatedId: string = generateUUID();

the result is simply a random integer generated id like:

    generatedId: b9e74730-8e06-4a19-bcd6-1c0d7d263ea4

## RELEASES NOTES ##

### v4.0.0 ###
- changed algorithm to UUID, to be more efficient

change use from:

    import {IdGenerator} from "@makechtec/randomkey";

    const idGenerator = new IdGenerator();

    let generatedId = idGenerator.generate();

    console.log(generatedId);

to
    
    import {generateUUID} from "../src/globals";
    
    let generatedId: string = generateUUID();


### v3.0.0 ###
- added duplicate comprobation, then a number id never is equal for a same IdGenerator instance.
- the original Id object is now a class.
- simply tests added.
npm package: @makechtec/router-translator
Description: ## Usage ##
Author: makechtec
Latest version: 1.0.2

# RouterTranslator #

## Usage ##

    import {RouterTranslator} from "@makechtec/router-translator";

    const translator = new RouterTranslator();

    const route = translator.extractInfo("/products/{id}/description", "/products/23/description");
    console.log(route.variables);

result:

    [
        {
            key: "id",
            value: "23"
        }
    ]

other example:

    const route = translator.extractInfo("/category/{category_id}/tag/{tag_id}", "/category/23/tag/45");
    console.log(route.variables);

result:

    [
        {
            key: "category_id",
            value: "23"
        },
        {
            key: "tag_id",
            value: "45"
        }
    ]

## buildUri ##

It perform the inverse function:

    const uri = translator.buildUri("/products/{id}/description", [ {key: "id", value: "23"} ]);
    console.log(uri);

result:

    "/products/23/description"
npm package: @makechtec/tezcatl
Description: copy the specific file and change variables from comand params
Author: makechtecnology
Latest version: 1.5.6

# Tezcatl #

Tezcatl is a CLI for create files from templates, it allows avoid to write the same code over and over again.
If you need to help with tezcatl, you can send an email to:
angeldomp49@gmail.com or visit the GitHub user account [MakechTec](https://github.com/MakechTec).

This technology is yet in development, so if you find any bug, please fell free to notify us.
Also it is possible to contribute to the development of tezcatl. Or simply use it in your project, because it is open source.

Summary:

- [Installation and configuration](https://github.com/MakechTec/tezcatl/blob/master/documentation/installation.md)
- [CLI usage](https://github.com/MakechTec/tezcatl/blob/master/documentation/cli-usage.md)
- [template language](https://github.com/MakechTec/tezcatl/blob/master/documentation/template-language.md)
- [presets](https://github.com/MakechTec/tezcatl/blob/master/documentation/presets.md)
npm package: @makechtec/tezcatl-cli
Description: This module is a low level API, which is used to interact with the command line arguments. And with some file actions.
Author: makechtec
Latest version: 1.0.13

# Tezcatl CLI #

This module is a low level API, which is used to interact with the command line arguments. And with some file actions.

### installation ###

    $ npm install @makechtec/tezcatl-cli

### Argument Class ###

    export class Argument{
        constructor(name, value){
            this.name = name;
            this.value = value;
        }
    }

### Constants ###

    export const ARGUMENT_FLAG = "--";

### Pattern Object ###

    testStart(search, target) : booelean

chek if the target starts with the search

    testArg(search, target) : boolean

check if the target is an argument with the search as name

    testIsArg(target) : boolean

check if the target is an argument

    testFlag(target) : boolean

check if the target is a flag

    testHasDirectory(target) : boolean

check if the target path contains a directory

    replacePlaceholder(content, placeholder) : string

replace the placeholder name in all matches inside the content with the value of the placeholder

    countMatches(str, pattern) : number

count the number of matches of the pattern in the string

### Reader Object ###

    readTemplate(templateName) : string

Alias of read

    read(templateName) : string

read the template file

    changePlaceholders(content, placeholders) : string

replace the placeholder name in all matches inside the content with the value of the placeholder for each item in the placeholders array

### Writter Object ###

    writeFile(fileName, content) : void

create or overwrite the file with the content

    createDirectory(dirName) : void

create the directory

    insertInLine(fileName, lineNumber, text) : void

insert the text in the line number of the file

### CLI Object ###

    getArgumentValue(name, params = argv) : Argument

read the argument from the command line, it must be the form: 

    name=value

the result is an instance of the Argument class

    getArgumentsGroup(prefix, params = argv) : Argument[]

read the arguments from the command line, it must be the form:

    prefix1=value1 prefix2=value2 prefix3=value3

the result is an array of instances of the Argument class

    getFlagsGroup(params = argv) : Argument[]

read the flags from the command line, it must be the form:

    --flag1 --flag2 --flag3

the result is an array of instances of the Argument class, the value is true.

    isFlag: (name, params = argv) : boolean

check if the flag is present in the command line

    getAllArguments: function(params = argv) : Argument[]

read all arguments ignoring the flags. the result is an array of instances of the Argument class
npm package: @makechtec/tezcatl-conditional-processor
Description: Example:
Author: makechtec
Latest version: 1.0.4

# ConditionalProcessor #

Example: 

    import { ConditionalProcessor } from "../index.js";
    import fs from "node:fs";

    let processor = new ConditionalProcessor();

    let text = fs.readFileSync("./test/templates/default/jscomponent.temp", "utf8");

    let newText = processor.parse(text);



with entry:

    @foreach(import)
    import ${import} from '';
    @endforeach

    @if(class)
    export default class ${component}{
        @if(state)
        @endif
    }
    @else
    export const ${component} = {
        
    };
    export default ${component};
    @endif
    @if(func)
    export const ${component} = () => {
        return;
    };

    export default ${component};
    @endif

    @foreach(const)
    export const ${const} = () => {
        return (
            <div>
                <h1>${const}</h1>
            </div>
        );
    };
    @endforeach

    @foreach(func)
    export const ${func} = () => {
        return;
    };
    @endforeach


suppose you use the next instruction in the CLI:  

    node index.mjs --class --func

Then the result is:

    @foreach(import)
    import ${import} from '';
    @endforeach

    export default class ${component}{
        @if(state)
        @endif
    }

    export const ${component} = () => {
        return;
    };

    export default ${component};

    @foreach(const)
    export const ${const} = () => {
        return (
            <div>
                <h1>${const}</h1>
            </div>
        );
    };
    @endforeach

    @foreach(func)
    export const ${func} = () => {
        return;
    };
    @endforeach
npm package: @makechtec/tezcatl-iterative-processor
Description: ### Installation ###
Author: makechtec
Latest version: 1.1.5

# Iterative Processor #

### Installation ###

    $ npm install @makechtec/tezcatl-iterative-processor

### Usage ###

    import { IterativeProcessor } from '@makechtec/tezcatl-iterative-processor';

    const processor = new IterativeProcessor();

    let text without loops = processor.parse("text with loops");
npm package: @makechtec/tezcatl-preset-puzzle
Description: ### Installation ###
Author: makechtec
Latest version: 1.1.6

# tezcatl-preset-puzzle #

### Installation ###

    $ npm install @makechtec/tezcatl-preset-puzzle --save-dev

in your tezcatl.config.json file:

    {
        "preset": "puzzle",
    }

### Usage ###

    $ tezcatl b=templateToChoose l=2 // more args ...

first, you should specify the file to work, one is by the tezcatl.config.json file:

    {
        "preset": "puzzle",
        "file": "test/example.js"
    }

the second method is by the command line using the f parameter:

    $ tezcatl f=test/example.js b=templateToChoose l=2 // more args ...

the b parameter is the template to choose, and the l parameter is the line of the file where the processed template content will be inserted.

### case of use ###

we are the following templates:

    template1:

    let ${varname} = ${varvalue};

also the work file is:

    test/example.js:

    34 export class Component {
    35     render() {
    36         return <div>
    37             <h1>Hello</h1>
    38             <p>World</p>
    39         </div>
    40     }
    41 }

whe need to add the template content inside the work file, and the line is: 35. Also the template content is in tezcatl template language, then we can pass the __varname__ and __varvalue__ to the template by command line.

    $ tezcatl b=template1 l=35 varname=foo varvalue=true f=test/example.js

the result is:

    test/example.js:

    34 export class Component {
    35   let foo = true;
    36     render() {
    37         return <div>
    38             <h1>Hello</h1>
    39             <p>World</p>
    40         </div>
    41     }
    42 }

if the work file is specified in the tezcatl.config.json then the command is:

    $ tezcatl b=template1 l=35 varname=foo varvalue=true

ommit the f parameter.
npm package: @makechtec/tezcatl-settings
Description: ### Installation ###
Author: makechtec
Latest version: 1.0.3

# tezcatl settings #

### Installation ###

    $ npm install @makechtec/tezcatl-settings

### Settings Object ###

    get(): any

reads the ./tezcatl.config.json file and returns the object

    read: (filename: string) : any

Same as get but reads a custom file

    item(key: string): string 

get the value of a key in the settings object or empty string ""
npm package: @makechtec/tlapali
Description: Devuelve un componente react que permite mostrar código
Author: MakechTec
Latest version: 1.1.2

# Tlapali #

## Installation ##

    npm install @makechtec/tlapali @makechtec/tlapali_themes @makechtec/tlapali_langs

## Usage ##

    import { Code } from '@makechtec/tlapali';
    import { Makech } from '@makechtec/tlapali_themes';
    import { Java } from '@makechtec/tlapali_langs';

    export const App = () => {

        return(
            <Code theme={Makech} lang={Java}>
                {`
                    public class App {
                        private static final String name;
                    }
                `}
            </Code>
        );

    };

Notice that the children component is a multi-line string enclosed by curly brackets and backquotes.
npm package: @makechtec/tlapali_langs
Description: language constants for tlapali
Author: Makech Tec
Latest version: 1.2.0

# Language Descriptors #

The present are only the rule names for more details about the pattern, check the source code.

    export const Java: Lang

For java 8, the rules are the follow:

        {
            "name": "class_declaration",
        },
        {
            "name": "import_declaration",
        },
        {
            "name": "variable_declaration",
        },
        {
            "name": "method_declaration",
        },
npm package: @makechtec/tlapali_themes
Description: themes for tlapali
Author: Makech Tec
Latest version: 1.3.1

# Theme Descriptors #

Contains:

    const classStyles = [
        "color: #1c51c9;",
        "font-weight: bold;"
    ];

    const identifierStyles = [
        "color: #3894c2;",
        "font-weight: bold;"
    ];

    export const Makech: Theme = {
        name: "Makech",
        containerStyle: {
            backgroundColor: "#fdfdfa",
            fontFamily: "'Space Mono'",
            color: "#48637b",
            border: "2px solid #e0e7e6",
            borderRadius: "5px",
            maxWidth: "",
            overflow: "scroll",
        },
        supportedLaguages: [
            {
                name: "java",
                keywordsStyle: [
                    "font-weight: bold;",
                    "font-style: italic;",
                    "color: #7238c2"
                ],
                styleSets: [
                    {
                        rule: "class_declaration",
                        styles: [
                            ...classStyles
                        ]
                    },
                    {
                        rule: "class_name",
                        styles: [
                            ...classStyles
                        ]
                    },
                    {
                        rule: "import_declaration",
                        styles: [
                            ...classStyles
                        ]
                    },
                    {
                        rule: "variable_declaration",
                        styles: [
                            ...identifierStyles
                        ]
                    },
                    {
                        rule: "method_declaration",
                        styles: [
                            ...identifierStyles
                        ]
                    },
                    {
                        rule: "curly_brackets",
                        styles: [
                            "color: #b28a0a"
                        ]
                    }
                ]
            }
        ]
    }
npm package: @makechtec/zalihui
Description: 1. Leer todos los archivos 2. concatenar todos los archivos 3. escribir el archivo de destino 4. encontrar todos los imports 5. eliminar duplicados 6. colocar los imports al inicio 7. encontrar todos los export default 8. reemplazarlos por export solos.
Author: makechtec
Latest version: 1.0.5

# Zalihui #

This is a CLI tool for merge source files into one.

This first implementation only concatenates the files with javascript ES6 syntax.


## Usage ##

    $ zalihui source1=path1.js source2=path2.js ... target=path.js

## installation ##

    $ npm install location=global @makechtec/zalihui
npm package: @makecode/dom-manager
Description: DOM 관리 헬퍼
Author: sung-min
Latest version: 0.0.2

# @makecode/dom-manager

가벼운 DOM 조작 라이브러리로, jQuery에서 영감을 받아 사용하기 쉬운 API를 제공합니다. DOM 요소와 상호작용하고 수정할 수 있습니다.

## 설치

npm을 통해 패키지를 설치하세요:

```bash
npm install @makecode/dom-manager
```

## 사용법

라이브러리를 임포트하고 프로젝트에서 사용하세요:

```javascript
import $ from '@makecode/dom-manager';

// DOM 선택
const dom = $('body');

// 속성 조작
dom.attr({ 'data-test': 'value' }); // 속성 추가
console.log(dom.attr('data-test')); // 속성 가져오기

// 클래스 조작
dom.addClass('new-class');
console.log(dom.getClass()); // 'new-class'

dom.removeClass('new-class');
console.log(dom.getClass()); // ''

dom.toggleClass('toggle-class');

// 스타일 조작
dom.css({ color: 'red' }); // 스타일 설정
console.log(dom.css('color')); // 스타일 가져오기

// DOM 탐색
console.log(dom.next()); // 다음 형제 요소
console.log(dom.prev()); // 이전 형제 요소
console.log(dom.closest('div')); // 가장 가까운 상위 div 요소

// 삽입 및 교체
const newElement = $('<div>').attr({ id: 'new-div', class: 'example-class' });
dom.append(newElement); // 자식 요소로 추가
dom.prepend(newElement); // 첫 번째 자식 요소로 추가
dom.before(newElement); // 이전에 추가
dom.after(newElement); // 이후에 추가
dom.replaceWith(newElement); // 현재 요소 교체

// 데이터 속성
dom.data({ 'custom-attr': 'value' });
console.log(dom.data('custom-attr')); // 'value'

// 스크롤 가능한 부모 요소 찾기
console.log(dom.scrollParent());

// 요소 포함 여부 확인
console.log(dom.contains(newElement)); // true

// 가시성 확인
console.log(dom.isVisible()); // 요소가 보이는지 확인

// 동일한 노드인지 확인
const isEqual = dom.isEqualNode($('body'));
console.log(isEqual);

// 조건 확인
console.log(dom.is('.example-class')); // true/false
```

## 주요 기능

- 속성 조작 (`attr`, `removeAttr`, `hasAttr`)
- 클래스 조작 (`addClass`, `removeClass`, `toggleClass`, `hasClass`)
- 스타일 조작 (`css`)
- DOM 탐색 (`next`, `prev`, `closest`)
- DOM 삽입 및 교체 (`prepend`, `append`, `before`, `after`, `replaceWith`)
- 데이터 속성 관리 (`data`)
- 스크롤 부모 요소 탐색 (`scrollParent`)
- 노드 비교 (`isEqualNode`)
- 조건 확인 (`is`)
- 요소 가시성 확인 (`isVisible`)

## 브라우저 호환성

- 최신 브라우저: Chrome, Edge, Firefox, Safari
- Internet Explorer: IE11 이상

이 라이브러리는 `dataset`, `classList`, `matches`와 같은 최신 JavaScript API를 사용합니다. 따라서 오래된 브라우저에서는 이러한 기능을 지원하기 위해 폴리필을 포함해야 합니다.

## 라이선스

MIT
npm package: @makecode/gesture-manager
Description: 제스처(gesture) 관리
Author: sung-min
Latest version: 1.0.0

# @makecode/gesture-manager

`@makecode/gesture-manager`는 웹 애플리케이션에서 다양한 제스처(터치 및 클릭 동작)를 쉽게 관리할 수 있도록 도와주는 경량화된 라이브러리입니다. **단일 탭(Single Tap)**, **더블 탭(Double Tap)**, **플릭(Flick)** 등과 같은 제스처를 감지하여 효율적으로 처리할 수 있습니다.

## 📦 설치

```bash
npm install @makecode/gesture-manager
```

또는

```bash
yarn add @makecode/gesture-manager
```

## 🚀 특징

- **터치 이벤트 지원**: 모바일 환경에서의 터치 제스처 감지.
- **제스처 타입**: `press`, `singleTap`, `doubleTap`, `flickLeftToRight`, `flickRightToLeft`, `flickTopToBottom`, `flickBottomToTop` 등 다양한 이벤트 지원.
- **유연한 API**: 손쉬운 이벤트 등록 및 해제.
- **경량성**: 최소한의 코드로 빠르게 동작.

## ✨ 사용법

### 이벤트 등록

```typescript
import GestureManager from '@makecode/gesture-manager';

// 제스처 이벤트 등록
GestureManager.on('.gesture-target', {
  singleTap: event => {
    console.log('Single tap detected!', event);
  },
  doubleTap: event => {
    console.log('Double tap detected!', event);
  },
  flickLeftToRight: event => {
    console.log('Flick from left to right!', event);
  },
});
```

### 이벤트 해제

특정 제스처 이벤트를 해제하려면 다음과 같이 사용할 수 있습니다:

```typescript
// 모든 제스처 이벤트 해제
GestureManager.off('.gesture-target');

// 특정 제스처 이벤트 해제
GestureManager.off('.gesture-target', 'doubleTap');
```

## 📖 API

### `GestureManager.on(selector: string, handler: object | function)`

- **`selector`**: 이벤트를 등록할 DOM 요소를 선택하는 CSS 셀렉터 문자열.
- **`handler`**: 제스처 이벤트 핸들러 객체 또는 함수. 객체는 각 이벤트 타입(`singleTap`, `doubleTap` 등)을 키로 가지며, 해당하는 콜백 함수를 값으로 가집니다.

### `GestureManager.off(selector: string, eventType?: string)`

- **`selector`**: 이벤트를 해제할 DOM 요소를 선택하는 CSS 셀렉터 문자열.
- **`eventType`**: 선택적으로 해제할 이벤트 타입을 지정 (`press`, `singleTap`, `doubleTap` 등). 지정하지 않으면 모든 이벤트가 해제됩니다.

## 📋 지원하는 제스처 타입

- **`press`**: 길게 누름.
- **`singleTap`**: 한 번 가볍게 터치.
- **`doubleTap`**: 두 번 빠르게 터치.
- **`flickLeftToRight`**: 왼쪽에서 오른쪽으로 빠르게 스와이프.
- **`flickRightToLeft`**: 오른쪽에서 왼쪽으로 빠르게 스와이프.
- **`flickTopToBottom`**: 위에서 아래로 빠르게 스와이프.
- **`flickBottomToTop`**: 아래에서 위로 빠르게 스와이프.

## 🔧 브라우저 지원

`@makecode/gesture-manager`는 최신 브라우저와 모바일 환경을 지원합니다. 터치 이벤트를 기본으로 하며, 터치를 지원하지 않는 환경에서는 마우스 이벤트로 대체하여 동작합니다.
npm package: @makecode/mecab-analyzer
Description: A MeCab-based morphological analyzer for Node.js
Author: sung-min
Latest version: 1.0.0

# MeCab Analyzer

`mecab-analyzer`는 [MeCab](https://taku910.github.io/mecab/) 기반의 형태소 분석기 라이브러리로, 한국어 텍스트를 분석하여 품사, 형태소, 명사 등 다양한 정보를 제공합니다. 이 라이브러리는 Node.js 환경에서 쉽게 형태소 분석을 할 수 있도록 만들어졌으며, MeCab 실행 파일을 이용하여 텍스트를 분석합니다.

## 설치 방법

```bash
npm install @makecode/mecab-analyzer
```

`MECAB_PATH` 환경 변수를 통해 MeCab 실행 파일의 경로를 지정할 수 있습니다. 기본적으로는 `node_modules/@makecode/mecab-analyzer/bin/mecab` 경로를 사용합니다.

## 사용 방법

`mecab-analyzer` 라이브러리는 다음과 같은 네 가지 주요 함수를 제공합니다:

- `pos(text: string): string[]` — 입력된 텍스트의 품사(POS) 분석 결과를 반환합니다.
- `morphs(text: string): string[]` — 입력된 텍스트의 형태소(Morphs) 분석 결과를 반환합니다.
- `nouns(text: string): string[]` — 입력된 텍스트에서 명사(Nouns)만을 추출하여 반환합니다.
- `all(text: string): string[][]` — 입력된 텍스트에 대한 전체 분석 결과를 반환합니다.

### 예제 코드

아래는 각 함수의 사용 예시입니다.

```typescript
import mecabAnalyzer from '@makecode/mecab-analyzer';

const text = '오늘은 날씨가 맑습니다.';

// 품사 분석 (POS)
const posResult = mecabAnalyzer.pos(text);
console.log('POS 분석 결과:', posResult);
// 출력 예시: ['오늘,NNG', '은,JX', '날씨,NNG', '가,JKS', '맑,VA', '습니다,EF']

// 형태소 분석 (Morphs)
const morphsResult = mecabAnalyzer.morphs(text);
console.log('형태소 분석 결과:', morphsResult);
// 출력 예시: ['오늘', '은', '날씨', '가', '맑', '습니다']

// 명사 추출 (Nouns)
const nounsResult = mecabAnalyzer.nouns(text);
console.log('명사 추출 결과:', nounsResult);
// 출력 예시: ['오늘', '날씨']

// 전체 분석 결과 (All)
const allResult = mecabAnalyzer.all(text);
console.log('전체 분석 결과:', allResult);
// 출력 예시: [['오늘', 'NNG', '*', '*', '*', 'T'], ['은', 'JX', '*', '*', '*', 'T'], ...]
```

## 함수 설명

### `pos(text: string): string[]`

입력된 텍스트에 대해 품사(POS) 분석을 수행합니다. 결과는 각 단어와 해당 품사가 연결된 문자열 배열로 반환됩니다. 예를 들어, `'오늘,NNG'`와 같이 반환됩니다.

### `morphs(text: string): string[]`

입력된 텍스트를 형태소 단위로 분석하여 형태소의 배열을 반환합니다. 각 단어의 최소 단위로 나누어줍니다.

### `nouns(text: string): string[]`

입력된 텍스트에서 명사(NNG, NNP)만을 추출하여 배열로 반환합니다. 이 함수는 특정 명사만 필요할 때 유용합니다.

### `all(text: string): string[][]`

입력된 텍스트의 전체 분석 결과를 2차원 배열 형태로 반환합니다. 각 배열은 단어와 해당 품사의 모든 정보가 포함된 배열로, 보다 상세한 정보가 필요할 때 사용할 수 있습니다.

### `analyzeWithExclusions(text: string, options: { analysisType?: string, pattern?: RegExp }): string[] | string[][]`

특정 패턴을 제외하고 분석을 수행합니다. 예를 들어, URL과 같은 특정 패턴을 제외하고 텍스트를 분석하고 싶을 때 유용합니다. `analysisType`은 분석 타입 (`morphs`, `pos`, `all`)을 지정하며, `pattern`은 제외하고자 하는 정규 표현식 패턴을 지정합니다.

## 환경 변수 설정

- **MECAB_PATH**: MeCab 실행 파일의 경로를 지정할 수 있습니다. 지정하지 않는 경우 기본적으로 `node_modules` 내부에 포함된 MeCab을 사용합니다.

```bash
export MECAB_PATH=/usr/local/bin/mecab
```

## CommonJS 지원

`mecab-analyzer`는 CommonJS 환경에서도 사용할 수 있습니다.

```javascript
const mecabAnalyzer = require('@makecode/mecab-analyzer');

const text = '오늘은 날씨가 맑습니다.';
const nouns = mecabAnalyzer.nouns(text);
console.log('명사 추출 결과:', nouns);
```
npm package: @makecode/state-manager
Description: 전역 상태 관리
Author: sung-min
Latest version: 1.0.1

# @makecode/state-manager

**@makecode/state-manager**는 간단하면서도 강력한 상태 관리 라이브러리입니다. 이 라이브러리는 중소 규모 프로젝트에서 전역 상태를 관리하기에 적합합니다.

## 주요 기능

- **간단한 API**: 직관적인 메서드(`get`, `set`, `merge`)로 상태 관리.
- **이벤트 기반 구독**: 상태 변경 시 실행되는 핸들러 등록.
- **특정 상태값 감지**: 특정 상태 값에 따라 핸들러를 실행.
- **타입스크립트 지원**: 타입 안전한 상태 관리.

## 설치 방법

라이브러리를 설치하려면 다음 명령어를 사용하세요:

```bash
npm install @makecode/state-manager
```

또는

```bash
yarn add @makecode/state-manager
```

## 사용법

### 1. 초기화 및 상태 설정

StateManager 인스턴스를 생성하고 상태를 설정합니다:

```typescript
import StateManager from '@makecode/state-manager';

const state = new StateManager();

// 상태 설정
state.set({
  key: 'user',
  value: { name: 'Alice', age: 25 },
});
```

### 2. 상태 구독

상태가 변경될 때마다 특정 로직을 실행하고 싶다면 구독 기능을 사용할 수 있습니다:

```typescript
// 상태 변경 구독
const unsubscribe = state.subscribe('user', (newValue, oldValue) => {
  console.log('사용자 상태 변경!');
  console.log('이전:', oldValue);
  console.log('현재:', newValue);
});

// 상태 변경
state.set({
  key: 'user',
  value: { name: 'Alice', age: 26 },
});

// 구독 해제
unsubscribe();
```

### 3. 상태 병합

기존 상태를 유지하면서 일부 값을 업데이트하려면 `merge` 메서드를 사용하세요:

```typescript
state.merge({
  key: 'user',
  value: { location: 'New York' },
});

console.log(state.get('user'));
// 출력: { name: 'Alice', age: 26, location: 'New York' }
```

### 4. 특정 값 이벤트 핸들링

특정 상태 값에 따라 핸들러를 실행하려면 `on` 메서드를 사용합니다:

```typescript
state.on({
  key: 'user.age',
  value: 30,
  handler: () => {
    console.log('사용자의 나이가 30이 되었습니다!');
  },
});

// 상태 변경
state.set({ key: 'user', value: { name: 'Alice', age: 30 } });
// 출력: 사용자의 나이가 30이 되었습니다!
```
npm package: @makecode/text-editor
Description: 심플 텍스트 에디터
Author: sung-min
Latest version: 1.0.3

# @makecode/text-editor

현대 웹 애플리케이션에서 풍부한 텍스트 편집 경험을 제공하기 위한 경량화되고 커스터마이즈 가능한 텍스트 에디터 패키지입니다.

---

## 주요 기능

- **리치 텍스트 편집**: 굵게, 기울임, 밑줄, 제목, 인용문 등 다양한 기능 지원.
- **커스터마이즈 가능한 툴바**: 툴바 명령과 스타일을 쉽게 수정 가능.
- **ContentEditable 지원**: 네이티브 `contentEditable`을 사용하여 매끄러운 텍스트 편집 경험 제공.
- **크로스 브라우저 호환성**: 다양한 브라우저와 디바이스에서 일관된 동작 보장.
- **터치 지원**: 모바일 디바이스를 위한 최적화된 터치 이벤트 처리 포함.

---

## 설치

npm 또는 yarn을 사용하여 패키지를 설치하세요:

```bash
npm install @makecode/text-editor
# 또는
yarn add @makecode/text-editor
```

---

## 사용법

### 기본 설정

애플리케이션에 에디터를 통합하는 간단한 예제:

```typescript
import EditText from '@makecode/text-editor';

// 에디터 초기화
const editor = new EditText('#editor', {
  tooltip: true,
  classes: {
    link: 'custom-link-class',
  },
});

// 에디터 활성화
editor.on();
```

### HTML 구조

HTML에 대상 요소를 포함해야 합니다:

```html
<div id="editor" contenteditable="true"></div>
```

---

## API

### `EditText` 클래스

#### 생성자

```typescript
new EditText(target: HTMLElement | string | null, settings?: Partial<EditTextSettings>);
```

- `target`: 에디터를 적용할 대상 요소(또는 해당 선택자).
- `settings`: 선택적 설정 객체.

#### 설정 옵션

| 옵션      | 타입      | 기본값         | 설명                                   |
| --------- | --------- | -------------- | -------------------------------------- |
| `key`     | `string`  | `'editor'`     | 에디터를 식별하기 위한 고유 키.        |
| `tooltip` | `boolean` | `true`         | 툴팁 표시 여부.                        |
| `classes` | `object`  | `{ link: '' }` | 에디터 구성 요소에 대한 커스텀 클래스. |

#### 메서드

| 메서드  | 설명                                        |
| ------- | ------------------------------------------- |
| `on()`  | 에디터를 활성화하고 필요한 이벤트를 바인딩. |
| `off()` | 에디터를 비활성화하고 이벤트를 언바인딩.    |

---

## 툴바 명령

툴바에는 기본적으로 다음 명령이 포함되어 있습니다:

| 명령             | 동작                                |
| ---------------- | ----------------------------------- |
| `h1`, `h2`, `h3` | 선택한 텍스트를 제목 수준으로 변환. |
| `bold`           | 굵게 서식 적용.                     |
| `italic`         | 기울임 서식 적용.                   |
| `underline`      | 밑줄 서식 적용.                     |
| `strikethrough`  | 취소선 서식 적용.                   |
| `blockquote`     | 선택한 텍스트를 인용문으로 변환.    |
| `createLink`     | 하이퍼링크를 생성하거나 업데이트.   |

---

## 커스터마이징

### 사용자 정의 스타일

에디터 요소를 CSS로 타겟팅하여 기본 스타일을 덮어쓸 수 있습니다:

```css
#editor {
  border: 1px solid #ccc;
  padding: 10px;
  min-height: 100px;
}

.editor-text-link {
  color: blue;
  text-decoration: underline;
}
```

### 새로운 툴바 명령 추가

`setRender` 메서드를 수정하여 툴바에 사용자 정의 버튼을 추가할 수 있습니다:

```typescript
const customButton = document.createElement('button');
customButton.textContent = 'Custom';
customButton.onclick = () => {
  console.log('Custom button clicked');
};
editor.elements.command.wrap?.appendChild(customButton);
```
npm package: @makecode/worker-manager
Description: 워커 관리
Author: sung-min
Latest version: 1.0.0

# @makecode/worker-manager

`@makecode/worker-manager`는 Node.js 및 브라우저 환경에서 쉽게 사용할 수 있는 Queryable Worker Manager 라이브러리입니다. 이 라이브러리는 Worker와 메시지 핸들링을 간단하게 설정하고 사용할 수 있도록 도와줍니다.

## 설치

```bash
npm install @makecode/worker-manager
```

또는

```bash
yarn add @makecode/worker-manager
```

## 주요 기능

- 브라우저와 Node.js 환경 모두 지원
- Worker 메시지 핸들링
- `queryable` 객체를 통해 Worker 내부에서 함수 호출 가능
- Worker 파일 내부 실행 함수가 동기/비동기 경우, 응답 후 결과 실행 보장할 수 있음

## 사용 방법

### 브라우저 환경에서 사용하기

```javascript
import { createCodeBlockURL, QueryableWorker } from '@makecode/worker-manager';

// Worker 스크립트
const codeURL = createCodeBlockURL`
  const globalContext =
    typeof global !== 'undefined'
      ? global // Node.js 환경
      : typeof self !== 'undefined'
        ? self // Web Worker 환경
        : this;

  const queryable = {
    hello(name) {
      return `Hello, ${name}!`;
    },
    world(payload) {
      return new Promise((resolve, reject) => {
        const numberRandom = (max=1, min=0) => {
          if(min >= max) {
            return max;
          }
          return Math.floor(Math.random() * (max - min) + min);
        }
        const seconds = numberRandom(9000, 1000);
        setTimeout(() => {
          resolve([seconds, payload]);
        }, seconds);
      });
    }
  };

  globalContext.onmessage = async (data, postMessage) => {
    const { query, payload } = data;
    const result = await queryable[query]?.(...payload);
    postMessage({ query, result });
  };
`;

//const blob = new Blob([workerScript], { type: 'application/javascript' });
//const codeURL = URL.createObjectURL(blob);
const worker = new QueryableWorker(codeURL, {
  workerOptions: { type: 'module' },
  onMessage: message =>
    console.log('exampleCodeBlockURL', '워커로부터의 메시지', message),
  onError: error => console.error('exampleCodeBlockURL', '워커 오류', error),
});
worker.connect(); // 워커 연결
worker.addListener('hello', event =>
  console.log(
    'exampleCodeBlockURL',
    '워커 동기 실행 함수 결과 수신',
    event.detail,
  ),
);
worker.addListener('world', event =>
  console.log(
    'exampleCodeBlockURL',
    '워커 비동기 실행 함수 결과 수신',
    event.detail,
  ),
);

// 쿼리 형태가 아닌 경우
worker.postMessage('일반 메시지 워커로 전달!');

// 쿼리 형태 전송, 비동기 (호출순서에 따른 응답 실행순서 비보장)
worker.postQuery('hello', 2, 1);

// 쿼리 형태 전송, 동기 (호출순서에 따른 응답 실행순서 보장)
worker.postQuerySync('world', 'test1');
worker.postQuerySync('world', 'test2');
worker.postQuerySync('world', 'test3');
worker.postQuerySync('world', 'test4');
```

### Node.js 환경에서 사용하기

```typescript
...
```

## API

### `QueryableWorker`

Worker 인스턴스 생성, 순서 제어 등

### `createCodeBlockURL`

code string > blob > URL

createCodeBlockURL``; Tagged templates 사용

### `queryable`

Worker 내부에서 정의되는 함수 집합입니다. 각 함수는 문자열로 호출될 수 있으며, `payload`를 매개변수로 받습니다.

### `queryableMessageHandler`

메시지를 처리하는 핸들러로, Worker에서 수신된 데이터를 기반으로 적절한 `queryable` 함수를 실행하고 결과를 반환합니다.
npm package: @makeconsultores/bagui
Description: Design system base com PrimeNG padronizado
Author: Make Consultores
Latest version: 0.0.3

# Bagui

This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.

## Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

```bash
ng generate component component-name
```

For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:

```bash
ng generate --help
```

## Building

To build the library, run:

```bash
ng build bagui
```

This command will compile your project, and the build artifacts will be placed in the `dist/` directory.

### Publishing the Library

Once the project is built, you can publish your library by following these steps:

1. Navigate to the `dist` directory:
   ```bash
   cd dist/bagui
   ```

2. Run the `npm publish` command to publish your library to the npm registry:
   ```bash
   npm publish
   ```

## Running unit tests

To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:

```bash
ng test
```

## Running end-to-end tests

For end-to-end (e2e) testing, run:

```bash
ng e2e
```

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.