open-index/open-npm huggingface dataset:
npm package: @jiangtaste/layout-stack
Description: SwiftUI-inspired layout components for React using Tailwind CSS
Author: Paul Lee
Latest version: 1.0.4

# 🧱 layout-stack

A lightweight and reusable set of React layout components built with Tailwind CSS.

Includes: `HStack`, `VStack`, `Stack`, `ZStack`, and `Spacer` — inspired by layout patterns from SwiftUI, Figma, and other design tools.

## 📦 Installation

```bash
npm install layout-stack
```

Or use Yarn / pnpm:

```bash
yarn add layout-stack
# or
pnpm add layout-stack
```

> ⚠️ **Peer Dependencies:**
>
> - React 18+
> - Tailwind CSS (make sure your project has it properly configured)
> - `clsx` is used internally and handled as a peer dependency

---

## 🚀 Quick Usage

```tsx
import { HStack, VStack, Stack, ZStack, Spacer } from "layout-stack";

export default function Example() {
  return (
    <VStack spacing="4" className="w-full">
      <HStack spacing="2">
        <span>Item 1</span>
        <span>Item 2</span>
        <Spacer />
        <span>Right</span>
      </HStack>

      <ZStack className="h-32 bg-gray-100">
        <div className="bg-red-200">Layer 1</div>
        <div className="bg-green-200">Layer 2</div>
      </ZStack>
    </VStack>
  );
}
```

---

## 📚 Component Overview

### `HStack`

Horizontally arranges children using `flex-row` and `space-x-{spacing}`.

```tsx
<HStack spacing="4" className="bg-white">
  <div>Left</div>
  <div>Center</div>
  <div>Right</div>
</HStack>
```

### `VStack`

Vertically arranges children using `flex-col` and `space-y-{spacing}`.

```tsx
<VStack spacing="6">
  <div>Title</div>
  <div>Description</div>
</VStack>
```

### `Stack`

Similar to `VStack` but aligns items with `items-start`.

```tsx
<Stack spacing="3">
  <div>Item A</div>
  <div>Item B</div>
</Stack>
```

### `ZStack`

Stacks elements on top of each other with `relative` and `absolute` positioning.

```tsx
<ZStack className="h-48">
  <div className="bg-blue-100" />
  <div className="bg-blue-300" />
</ZStack>
```

### `Spacer`

Fills available space inside a flex container, equivalent to `<div className="flex-1" />`.

```tsx
<HStack>
  <div>Left</div>
  <Spacer />
  <div>Right</div>
</HStack>
```

---

## 🧩 Export

You can import components individually or via the default export:

```tsx
import LayoutStack from "layout-stack";
// or
import { HStack, VStack, Stack, ZStack, Spacer } from "layout-stack";
```

---

## 🛠️ Notes for Developers

- Written in TypeScript with full type support
- Tailwind utility classes are preserved in the output, ensure your host project has Tailwind properly configured

---

## 📄 License

MIT

---

Made with ❤️ by Jiangtaste
npm package: @jiangtj/hexo-renderer-stylus
Description: Stylus renderer plugin for Hexo
Author: Tommy Chen
Latest version: 1.1.0

# hexo-renderer-stylus

[![Build Status](https://travis-ci.org/hexojs/hexo-renderer-stylus.svg?branch=master)](https://travis-ci.org/hexojs/hexo-renderer-stylus)
[![NPM version](https://badge.fury.io/js/hexo-renderer-stylus.svg)](https://www.npmjs.com/package/hexo-renderer-stylus)
[![Coverage Status](https://img.shields.io/coveralls/hexojs/hexo-renderer-stylus.svg)](https://coveralls.io/r/hexojs/hexo-renderer-stylus?branch=master)

Add support for [Stylus] with [nib] and other plugins.

## Install

Prerequisites:
- Hexo 3: >= 0.2
- Hexo 2: 0.1.x

``` bash
$ npm install hexo-renderer-stylus --save
```

## Options

You can configure this plugin in `_config.yml`.

``` yaml
stylus:
  compress: false
  sourcemaps:
    comment: true
    inline: true
    sourceRoot: ''
    basePath: .
  plugins: 'nib'
```

- **compress** - Compress generated CSS (default: `false`)
- **sourcemaps**
  - **comment** - Adds a comment with the `sourceMappingURL` to the generated CSS (default: `true`)
  - **inline** - Inlines the sourcemap with full source text in base64 format (default: `false`)
  - **sourceRoot** - `sourceRoot` property of the generated sourcemap
  - **basePath** - Base path from which sourcemap and all sources are relative (default: `.`)
- **plugins** - Stylus plugin(s) (default: `nib`)

## Setting Stylus variables

It is possible to set variables that can be used in Stylus.
The purpose of setting variable is to avoid direct modification of the Sylus code,
and thus to make themes more generic

For example, instead of hardcoding:
```stylus
div
 color #FFCC44
```

You can refer to a variable:
```stylus
div
 color convert(hexo-config("color"))
```

And in your theme's configuration, you can define this variable:
```yml
color: "#FFCC44"
```
(The "convert" function above is here to convert the string into an actual stylus color)

You can also use the theme_config variable in the main `_config.yml`:
```yml
theme_config:
  color: "#FFCC44"
```

[Stylus]: http://stylus-lang.com/
[nib]: http://stylus.github.io/nib/

## Extensibility

This plugin provide a filter `stylus:renderer` to allows you extend it. When there’s something you cannot do in Stylus, define it in JavaScript!

For example, to define some global variable:

```js
hexo.extend.filter.register('stylus:renderer', function(style) {
  style
    // we may define a global variable by passing a `Node`
    .define('has-canvas', require('stylus').nodes.false);
    // stylus also casts JavaScript values to their Stylus equivalents when possible
    .define('families', ['Helvetica Neue', 'Helvetica', 'sans-serif'])
    // also allows you to provide a JavaScript-defined function to Stylus
    .define('get-list', function(){
      return ['foo', 'bar', 'baz'];
    });
})
```

Save the file in "scripts/" folder and run Hexo as usual.

Notice: for more JavaScript api, refer to stylus's [documentation](http://stylus-lang.com/docs/js.html).
npm package: @jiangtj/ribbon.js
Description: only 1kb javascript gist to generate a ribbon in your website with HTML5 canvas.
Author: hustcc
Latest version: 1.1.0

# ribbon.js

this is a fork from `https://github.com/hustcc/ribbon.js`, add support for node.

## usage

Very easy and simple.

```bash
yarn add @jiangtj/ribbon.js
```

```js
import ribbon from '@jiangtj/ribbon.js';

// use
ribbon()
// or
ribbon({
  z: -1, // z-index
  a: 0.6, // alpha
  s: 90, // size
  target: 'body'
})
```

If you use vue, `Please add it in mounted()`.
npm package: @jiangweixian/templates
Description: templates
Author: jiangweixian
Latest version: 0.1.5

# templates

## Use

目前只支持复制`packages`文件夹下`*-templates`作为开发项目初始启动。

## DEV

> **WARNING** never use lerna link convert

**`for dev`**

```bash
npm run start // 提取`packages`下面公用包。
npm run upgrade:* // upgrade deps
```
npm package: @jiangweixian1994/vite-plugin-windicss
Description: Windi CSS for Vite, it's fast!
Author: antfu
Latest version: 0.0.2

<h1 align='center'>vite-plugin-windicss</h1>

<p align='center'><a href="https://github.com/voorjaar/windicss">Windi CSS</a> for Vite, it's fast! ⚡️<br>
</p>

<p align='center'>
<a href='https://www.npmjs.com/package/vite-plugin-windicss'>
<img src='https://img.shields.io/npm/v/vite-plugin-windicss?color=0EA5E9&label='>
</a>
</p>

## Features

- ⚡️ **It's FAST** - 20~100x times faster than Tailwind on Vite
- 🧩 On-demand CSS utilities (Fully compatible with Tailwind CSS v2)
- 📦 On-demand native elements style reseting (preflight)
- 🔥 Hot module replacement (HMR)
- 🍃 Load configurations from `tailwind.config.js`
- 🤝 Framework-agnostic - Vue, React, Svelte and vanilla!
- 📄 CSS `@apply` / `@screen` directives transforms (also works for Vue SFC's `<style>`)
- 🎳 Support Variant Groups - e.g. `bg-gray-200 hover:(bg-gray-100 text-red-300)`
- 😎 ["Design in Devtools"](#design-in-devtools) - if you work this way in the traditional Tailwind, no reason we can't!

## Documentation

Read the [documentation](https://windicss.org/integrations/vite.html) for more details.

## New Features in v3.0

### [Attributify Mode](https://windicss.org/posts/v30.html#attributify-mode)

Enabled it by 

```ts
// windi.config.ts
export default {
  attributify: true
}
```

And use them as you would like:

```html
<button 
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>
```

#### Prefix

If you are concerned about naming confliction, you can add custom prefix to attributify mode by:

```ts
// windi.config.ts
export default {
  attributify: {
    prefix: 'w:'
  }
}
```

```html
<button 
  w:bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  w:text="sm white"
  w:font="mono light"
  w:p="y-2 x-4"
  w:border="2 rounded blue-200"
>
  Button
</button>
```

### [Alias Config](https://windicss.org/posts/v30.html#alias-config)

```ts
// windi.config.ts
export default {
  alias: {
    'hstack': 'flex items-center',
    'vstack': 'flex flex-col',
    'icon': 'w-6 h-6 fill-current',
    'app': 'text-red',
    'app-border': 'border-gray-200 dark:border-dark-300',
  },
}
```

## Sponsors

<p align="center">
  <a href="https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg">
    <img src='https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg'/>
  </a>
</p>

## License

MIT License &copy; 2021 [Anthony Fu](https://github.com/antfu)
npm package: @jiangweixian1994/zustand-middlwares
Description: zustand middlewares for webext develop
Author: JW
Latest version: 0.0.3

# @jiangweixian1994/zustand-middlewares

## features

Some useful middlewares and utils for zustand and webext

- `local & sync` storage for `webext` develop.
- `logger` for `set` action logger.

## install

```sh
pnpm i @jiangweixian1994/zustand-middlewares zustand webextension-polyfill
```

## usage

### `/devtools`

#### `logger`

> REASON: webext with zustand, unable use devtools and redux-extensions. Use `logger` instead

```tsx
import { logger } from '@jiangweixian1994/zustand-middlewares/devtools'

export const useBearStore = create<BearState>()(
  logger(
    set => ({
      // ...state
      action: () => set(partialState, replace, 'actionname')
    }),
    {
      name: 'store-name',
    },
  ),
)
```

![logger](https://raw.githubusercontent.com/JiangWeixian/zustand-middlewares/main/sceenshots/logger.png?token=GHSAT0AAAAAAB2WKQN6AD5HCUBY5ZDCABQUZBVN3KQ)

**'actionname'** is required for display friendly message.

**display messgae format:**

```console
action: store-name : actionname
  prev state: <prevstate>
  action:     <action info>
  next state: <nextstate>
```

### `/storage`

#### `local`

Save store data into [`browsers.storage.local`](https://developer.chrome.com/docs/extensions/reference/storage/#property-local) instead of local-storage.

> REASON: `localstorage` is only provide(5MB per domain). `browsers.storage.local` with "unlimitedStorage" permission. Consider using it to store larger amounts of data.

```tsx
import { local } from '@jiangweixian1994/zustand-middlewares/storage'

export const useBearStore = create<BearState>()(
  persist(
    set => ({
      // ...state
    }),
    {
      name: 'store-name',
      storage: createJSONStorage(() => local),
    },
  ),
)
```

**other similar storage type**

- `sync` - `browsers.storage.sync`, sync data between devices.
npm package: @jiangweiye/install-pkg
Description: install package
Author: jiangweiye
Latest version: 0.0.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @jiangweiye/install-pkg

#### @jiangweiye/install-pkg

<p align="center">
  <img src="https://img.shields.io/npm/v/@jiangweiye/install-pkg" alt='version'>
  <img src="https://img.shields.io/npm/dw/@jiangweiye/install-pkg" alt='download'>
  <img src="https://img.shields.io/github/issues/jwyGithub/install-pkg" alt='issues'>
  <img src="https://img.shields.io/github/license/jwyGithub/install-pkg" alt='license'>
</p>
<br />

### install

#### with pnpm

```sh
pnpm add @jiangweiye/install-pkg -D
```

#### with yarn

```sh
yarn add @jiangweiye/install-pkg -D
```

#### with npm

```sh
npm install @jiangweiye/install-pkg -D
```

### use

```ts
import { installPackage } from '@jiangweiye/install-pkg';

await installPackage('vite', { silent: true });
```
npm package: @jiangxiaoxu/lm-tools-bridge-proxy
Description: Stdio MCP proxy for LM Tools Bridge (Windows Named Pipe resolve).
Latest version: 0.1.20
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# LM Tools Bridge Proxy

Stdio MCP proxy that resolves the active VS Code instance via the LM Tools Bridge Manager (Windows Named Pipe).

## Usage (Codex)

```
command = "npx"
args = ["-y", "@jiangxiaoxu/lm-tools-bridge-proxy"]
```

The proxy uses the current working directory (`cwd`) to resolve the VS Code instance.

## Handshake (required)

Codex does not pass `cwd` into `npx` MCP services, so the proxy requires an explicit workspace handshake before it forwards MCP requests.

1. Call `lmToolsBridgeProxy.requestWorkspaceMCPServer` with `params.cwd`.
2. Wait for `ok: true` and a resolved target.

Until `lmToolsBridgeProxy.requestWorkspaceMCPServer` succeeds, the proxy rejects all MCP requests (including `roots/list`) with a workspace-not-ready error.

If the target MCP goes offline, the proxy marks itself disconnected and attempts auto-reconnect every second. `lmTools/status` returns `offlineDurationSec` to show how long it has been offline.

The proxy always exposes a minimal MCP resource (`lm-tools-bridge-proxy://handshake`) via `resources/list`, and it is pinned to the top of the list. It also returns `lmToolsBridgeProxy.requestWorkspaceMCPServer` from `tools/list` before handshake so clients can discover the exact method name.

## Logging

Set `LM_TOOLS_BRIDGE_PROXY_LOG` to a file path to enable log output. If unset, the proxy emits no logs.

## Resolve test

```
node ./scripts/resolve-test.mjs --cwd <workspace-path>
```

## Development

```
npm install
npm run build
```