open-index/open-npm huggingface dataset:
npm package: @sveltinio/essentials
Description: A collection of essentials, type-safe, accessible and configurable Svelte components.
Author: dev
Latest version: 0.7.9

<div align="center">
    <h1>@sveltinio/essentials</h1>
    <a href="https://github.com/sveltinio/components-library/blob/main/LICENSE" target="_blank">
        <img src="https://img.shields.io/badge/license-mit-blue?style=flat-square&logo=none" alt="license" />
    </a>
    &nbsp;
    <a href="https://www.npmjs.com/package/@sveltinio/essentials" target="_blank">
        <img src="https://img.shields.io/npm/v/@sveltinio/essentials.svg?style=flat" alt="sveltinio/essentials NPM version badge" />
    </a>
</div>

## Description

A collection of _essentials_, type-safe, accessible and configurable Svelte components.

## Demos

You can see live demos [here](https://www.sveltelab.dev/fe9w6pw2qs8sgm9) or if you clone the repos by running `pnpm dev`

## Components List

- [Button]
- [ButtonGroup]
- [ColorViewer]
- [Dropdown]
- [Link]
- [Tabs]
- [ToggleList]

## Install

```bash
# pnpm
pnpm install @sveltinio/essentials

# npm
npm install @sveltinio/essentials

# yarn
yarn add @sveltinio/essentials
```

## License

Free and open-source software under the [MIT License](LICENSE)

[Button]: https://github.com/sveltinio/components-library/tree/main/packages/essentials/src/lib/components/button
[ButtonGroup]: https://github.com/sveltinio/components-library/tree/main/packages/essentials/src/lib/components/button-group/
[ColorViewer]: https://github.com/sveltinio/components-library/tree/main/packages/essentials/src/lib/components/color/
[Dropdown]: https://github.com/sveltinio/components-library/tree/main/packages/essentials/src/lib/components/dropdown/
[Link]: https://github.com/sveltinio/components-library/tree/main/packages/essentials/src/lib/components/link/
[Tabs]: https://github.com/sveltinio/components-library/tree/main/packages/essentials/src/lib/components/tabs/
[ToggleList]: https://github.com/sveltinio/components-library/tree/main/packages/essentials/src/lib/components/list/
npm package: @sveltinio/media-content
Description: A collection of type-safe Svelte components to easily embed media contents in your Svelte and SvelteKit projects.
Author: dev
Latest version: 0.4.3

<div align="center">
    <h1>@sveltinio/media-content</h1>
    <a href="https://github.com/sveltinio/components-library/blob/main/LICENSE" target="_blank">
        <img src="https://img.shields.io/badge/license-mit-blue?style=flat-square&logo=none" alt="license" />
    </a>
    &nbsp;
    <a href="https://www.npmjs.com/package/@sveltinio/media-content" target="_blank">
       <img src="https://img.shields.io/npm/v/@sveltinio/media-content.svg?style=flat" alt="sveltinio/media.content NPM version badge" />
    </a>
</div>

## Description

A collection of type-safe Svelte components to easily embed media contents in your Svelte and SvelteKit projects.

## Demos

You can see live demos [here](https://www.sveltelab.dev/h57nt8jpieokw1n) or if you clone the repos by running `pnpm dev`

### Components List

- [CodePen]
- [CodeSandbox]
- [Facebook]
- [SlideShare]
- [StackBlitz]
- [Tweet]
- [Vimeo]
- [YouTube]

## Install

```bash
# pnpm
pnpm install @sveltinio/media-content

# npm
npm install @sveltinio/media-content

# yarn
yarn add @sveltinio/media-content
```

## License

Free and open-source software under the [MIT License](LICENSE)

[CodePen]: https://github.com/sveltinio/components-library/tree/main/packages/media-content/src/lib/components/codepen
[CodeSandbox]: https://github.com/sveltinio/components-library/tree/main/packages/media-content/src/lib/components/codesandbox
[Facebook]: https://github.com/sveltinio/components-library/tree/main/packages/media-content/src/lib/components/facebook
[SlideShare]: https://github.com/sveltinio/components-library/tree/main/packages/media-content/src/lib/components/slideshare
[StackBlitz]: https://github.com/sveltinio/components-library/tree/main/packages/media-content/src/lib/components/stackblitz
[Tweet]: https://github.com/sveltinio/components-library/tree/main/packages/media-content/src/lib/components/tweet
[Vimeo]: https://github.com/sveltinio/components-library/tree/main/packages/media-content/src/lib/components/vimeo
[YouTube]: https://github.com/sveltinio/components-library/tree/main/packages/media-content/src/lib/components/youtube
npm package: @sveltinio/remark-headings
Description: Extracts the headings tree from your markdown and add it to the frontmatter.
Author: sveltinio
Latest version: 1.0.3

<div align="center">
    <h1>remark-headings</h1>
    &nbsp;
    <a href="https://www.npmjs.com/package/@sveltinio/remark-headings" target="_blank"><img src="https://img.shields.io/npm/v/@sveltinio/remark-headings.svg?style=flat" alt="sveltinio/remark-headings NPM version badge" /></a>
    &nbsp;
    <a href="https://github.com/sveltinio/remark-headings/blob/main/LICENSE" target="_blank">
        <img src="https://img.shields.io/badge/license-mit-blue?style=flat&logo=none" alt="license" />
    </a>
</div>

Extracts the headings tree from your markdown and add it to the frontmatter.

## Installation

`npm install @sveltinio/remark-headings`

## Usage

### remark

```javascript
import { remark } from 'remark';
import { reporter } from 'vfile-reporter';
import headings from '@sveltinio/remark-headings';

const mdContent = `
# Welcome Post

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

## Intro

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

## Roadmap

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

### Short-Term

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

### Long-Term

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
`;

remark()
	.use(headings)
	.process(mdContent)
	.then((file) => {
		console.log(JSON.stringify(file.data.fm.headings, null, 3));
		console.error(reporter(file));
	});
```

**Output**

```javascript
// file.data.fm.headings
[
   {
      "id": "welcome-post",
      "depth": 1,
      "value": "Welcome Post",
      "children": [
         {
            "id": "intro",
            "depth": 2,
            "value": "Intro"
         },
         {
            "id": "roadmap",
            "depth": 2,
            "value": "Roadmap",
            "children": [
               {
                  "id": "short-term",
                  "depth": 3,
                  "value": "Short-Term"
               },
               {
                  "id": "long-term",
                  "depth": 3,
                  "value": "Long-Term"
               }
            ]
         }
      ]
   }
]
```

### mdsvex

```javascript
// mdsvex.config.js
import headings from "@sveltinio/remark-headings";

export default {
  // ... rest of your config
  remarkPlugins: [headings],
};
```

## License

Free and open-source software under the [MIT License](LICENSE)
npm package: @sveltinio/seo
Description: A collection of type-safe SEO related Svelte components to easily add structured SEO data to pages in Svelte & SvelteKit.
Latest version: 0.4.4

<div align="center">
    <h1>@sveltinio/seo</h1>
    <a href="https://github.com/sveltinio/components-library/blob/main/LICENSE" target="_blank">
        <img src="https://img.shields.io/badge/license-mit-blue?style=flat-square&logo=none" alt="license" />
    </a>
    &nbsp;
    <a href="https://www.npmjs.com/package/@sveltinio/seo" target="_blank">
        <img src="https://img.shields.io/npm/v/@sveltinio/seo.svg?style=flat" alt="sveltinio/seo NPM version badge" />
    </a>
</div>

## Description

A collection of types SEO related Svelte components to easily add structured SEO data to pages in Svelte & SvelteKit.

## Demos

You can see live demos [here](https://www.sveltelab.dev/1omlyex216bwf75) or if you clone the repos by running `pnpm dev`

## Components List

### Metadata

- [PageMetaTags]

### SchemaOrg

- [JsonLdWebSite]
- [JsonLdWebPage]
- [JsonLdBreadcrumbs]
- [JsonLdSiteNavigationElement]

## Install

```bash
# pnpm
pnpm install @sveltinio/seo

# npm
npm install @sveltinio/seo

# yarn
yarn add @sveltinio/seo
```

## License

Free and open-source software under the [MIT License](LICENSE)

[PageMetaTags]: https://github.com/sveltinio/components-library/tree/main/packages/seo/src/lib/components/metadata/
[JsonLdWebSite]: https://github.com/sveltinio/components-library/tree/main/packages/seo/src/lib/components/schemaorg/website
[JsonLdWebPage]: https://github.com/sveltinio/components-library/tree/main/packages/seo/src/lib/components/schemaorg/webpage
[JsonLdBreadcrumbs]: https://github.com/sveltinio/components-library/tree/main/packages/seo/src/lib/components/schemaorg/breadcrumbs
[JsonLdSiteNavigationElement]: https://github.com/sveltinio/components-library/tree/main/packages/seo/src/lib/components/schemaorg/sitenavigationelements
npm package: @sveltinio/services
Description: Type-safe Svelte components to easily use GoogleFonts, GoogleAnalytics and Umami in your Svelte and SvelteKit projects.
Author: dev
Latest version: 0.4.3

<div align="center">
    <h1>@sveltinio/services</h1>
    <a href="https://github.com/sveltinio/components-library/blob/main/LICENSE" target="_blank">
        <img src="https://img.shields.io/badge/license-mit-blue?style=flat-square&logo=none" alt="license" />
    </a>
    &nbsp;
    <a href="https://www.npmjs.com/package/@sveltinio/services" target="_blank">
        <img src="https://img.shields.io/npm/v/@sveltinio/services.svg?style=flat" alt="sveltinio/services NPM version badge" />
    </a>
</div>

## Description

Type-safe Svelte components to easily use GoogleFonts, GoogleAnalytics and Umami in your Svelte and SvelteKit projects.

## Demos

You can see live demos [here](https://www.sveltelab.dev/mu01l23m3291k52) or if you clone the repos by running `pnpm dev`

## Components List

- [GoogleFonts]
- [GoogleAnalytics]
- [UmamiAnalytics]

## Install

```bash
# pnpm
pnpm install @sveltinio/services

# npm
npm install @sveltinio/services

# yarn
yarn add @sveltinio/services
```

## License

Free and open-source software under the [MIT License](LICENSE)

[GoogleFonts]: https://github.com/sveltinio/components-library/tree/main/packages/services/src/lib/components/google/fonts
[GoogleAnalytics]: https://github.com/sveltinio/components-library/tree/main/packages/services/src/lib/components/google/analytics
[UmamiAnalytics]: https://github.com/sveltinio/components-library/tree/main/packages/services/src/lib/components/umami
npm package: @sveltinio/widgets
Description: A collection of responsive, type-safe, accessible and configurable Svelte components for cards, pages navigation, TOC (Table of Contents), ...
Author: dev
Latest version: 0.7.9

<div align="center">
    <h1>@sveltinio/widgets</h1>
    <a href="https://github.com/sveltinio/components-library/blob/main/LICENSE" target="_blank">
        <img src="https://img.shields.io/badge/license-mit-blue?style=flat-square&logo=none" alt="license" />
    </a>
    &nbsp;
    <a href="https://www.npmjs.com/package/@sveltinio/widgets" target="_blank">
        <img src="https://img.shields.io/npm/v/@sveltinio/widgets.svg?style=flat" alt="sveltinio/widgets NPM version badge" />
    </a>
</div>

## Description

A collection of responsive, type-safe, accessible and configurable Svelte components for cards, pages navigation, TOC (Table of Contents) ...

## Demos

You can see live demos [here](https://www.sveltelab.dev/sw6o1z34sn9bn75) or if you clone the repos by running `pnpm dev`

## Components List

- [Breadcrumbs]
- [Card]
- [PagesNavigator]
- [ResponsiveCard]
- [ScrollToTopButton]
- [TOC] (Table of Contents)

## Install

```bash
# pnpm
pnpm install @sveltinio/widgets

# npm
npm install @sveltinio/widgets

# yarn
yarn add @sveltinio/widgets
```

## License

Free and open-source software under the [MIT License](LICENSE)

[Breadcrumbs]: https://github.com/sveltinio/components-library/blob/main/packages/widgets/src/lib/components/breadcrumbs/
[Card]: https://github.com/sveltinio/components-library/blob/main/packages/widgets/src/lib/components/card/
[PagesNavigator]: https://github.com/sveltinio/components-library/blob/main/packages/widgets/src/lib/components/pages-navigator/
[ResponsiveCard]:  https://github.com/sveltinio/components-library/blob/main/packages/widgets/src/lib/components/responsive-card/
[ScrollToTopButton]: https://github.com/sveltinio/components-library/blob/main/packages/widgets/src/lib/components/scroll-to-top/
[TOC]: https://github.com/sveltinio/components-library/blob/main/packages/widgets/src/lib/components/toc/
npm package: @sveltique/components
Description: Build beautiful and consistent user interfaces with ready-to-use components, a cohesive design system and Tailwind's flexibility.
Author: Sajidur Rahman
Latest version: 0.12.0

# @sveltique/components

> [!CAUTION]
> Until 1.0, this library is not suited for production-level code, as there may be breaking changes
> between minor versions (especially in the early versions).

> [!NOTE]
> Since the library is not finished yet, docs may be incomplete. [Help us improve them !](https://github.com/sveltique/sveltique)
> Any suggestions are welcome.

Build beautiful and consistent user interfaces with ready-to-use components, a cohesive design system
and Tailwind's flexibility.

## Getting Started

Head over to [the docs](https://sveltique.dev/docs/components) to know more.
npm package: @sveltis/jwt
Description: Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
Author: Sergei Zheleznov
Latest version: 0.0.7
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# create-svelte

Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Building

To create a production version of your app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
npm package: @sveltium/create
Description: CLI tool to scaffold Sveltium projects with NW.js, Svelte, and Vite
Author: Oosuke Ren
Latest version: 1.2.0

# create-sveltium

CLI tool to scaffold [Sveltium](https://github.com/OosukeRen/Sveltium) projects — desktop apps built with NW.js, Svelte 5, and Vite.

## Usage

```bash
npm create sveltium
```

Or with a project name:

```bash
npm create sveltium my-app
```

You can also use `npx`:

```bash
npx @sveltium/create
```

## What it does

The CLI walks you through a few questions and generates a ready-to-develop project:

```
  Project name
  Enable legacy mode? (Chrome 40 support for older NW.js)
  Select a language (TypeScript / JavaScript)
  Add preconfigured custom ESLint rules?
  Setup auto generation with Sveltium build tools?
```

## Generated project structure

```
my-app/
  .gitignore
  index.html
  package.json
  svelte.config.js
  vite.config.js
  src/
    App.svelte
    app.css
    main.js (or main.ts)
    assets/
    lib/
```

Depending on your choices, the project may also include:

- `tsconfig.json`, `tsconfig.app.json`, `tsconfig.node.json` — when TypeScript is selected
- `jsconfig.json` — when JavaScript is selected
- `eslint.config.js` — when custom ESLint rules are enabled
- `sveltium.config.js` — when build tools auto-generation is enabled

## Options

### Legacy mode

Enables `@vitejs/plugin-legacy` targeting Chrome 40 for older NW.js versions (e.g., 0.12.x - 0.14.x). The plugin is conditionally loaded in `vite.config.js` via the `LEGACY=true` environment variable.

### Language

Choose between TypeScript and JavaScript. TypeScript projects include `svelte-check`, `@tsconfig/svelte`, and full tsconfig setup.

### Custom ESLint rules

Adds `@sveltium/eslint-rules` and `eslint-config-prettier` with a preconfigured flat config for ESLint 9+.

### Build tools auto-generation

Adds `@sveltium/build-tools` with `sveltium:build` and `sveltium:run` npm scripts, plus a `sveltium.config.js` where you define NW.js build profiles (versions, platforms, flavors).

## Requirements

- Node.js >= 16.0.0

## License

MIT
npm package: @sveltium/eslint-rules
Description: Custom ESLint rules for Sveltium projects
Author: Oosuke Ren
Latest version: 0.1.1

# @sveltium/eslint-rules

Custom ESLint layout rules for [Sveltium](https://github.com/OosukeRen/Sveltium) projects. Enforces consistent whitespace patterns around blocks and object declarations.

Requires ESLint 9+ (flat config).

## Installation

```bash
npm install -D @sveltium/eslint-rules eslint
```

## Usage

```js
// eslint.config.js
import sveltiumRules from "@sveltium/eslint-rules/index.js";

export default [
  {
    plugins: {
      sveltium: sveltiumRules,
    },
    rules: {
      "sveltium/blank-line-after-block-open-if-long": ["error", { minInnerLines: 4, targets: ["function", "if"] }],
      "sveltium/blank-line-after-object-declaration": "error",
    },
  },
];
```

## Rules

### `blank-line-after-object-declaration`

Enforces a blank line after any variable declaration that uses an object literal initializer. Auto-fixable.

```js
// Bad
const config = { a: 1 };
doSomething();

// Good
const config = { a: 1 };

doSomething();
```

No options.

### `blank-line-after-block-open-if-long`

Enforces a blank line after the opening `{` of a block when the block exceeds a configurable line count. Auto-fixable.

```js
// Bad (block has > 2 inner lines, no blank line after {)
function doThing() {
  const a = 1;
  const b = 2;
  const c = 3;
  return a + b + c;
}

// Good
function doThing() {

  const a = 1;
  const b = 2;
  const c = 3;
  return a + b + c;
}
```

#### Options

| Option | Type | Default | Description |
|---|---|---|---|
| `minInnerLines` | integer | `2` | Minimum inner lines before the rule triggers |
| `targets` | array | `["function", "if"]` | Which block types to check: `"function"` (declarations, expressions, arrows) and/or `"if"` |

## License

MIT
npm package: @sveltium/polyfills
Description: DOM and Proxy polyfills for legacy browser support in Sveltium apps
Author: Oosuke Ren
Latest version: 0.1.1

# @sveltium/polyfills

DOM and Proxy polyfills for legacy browser support in [Sveltium](https://github.com/OosukeRen/Sveltium) NW.js applications. Targets older Chromium builds (e.g., Chrome 40 in NW.js 0.12.x).

## Installation

```bash
npm install @sveltium/polyfills
```

## Usage

Import once at the top of your entry point — all polyfills are applied as side effects:

```js
import "@sveltium/polyfills";
```

Or import individual modules:

```js
import "@sveltium/polyfills/dom.js";
import "@sveltium/polyfills/proxy.min.js";
```

You can also load them via script tags in `index.html`:

```html
<script type="module" src="/node_modules/@sveltium/polyfills/dom.js"></script>
<script type="module" src="/node_modules/@sveltium/polyfills/proxy.min.js"></script>
```

## What's included

### DOM polyfills (`dom.js`)

All patches are conditional — they only activate when the native API is missing.

| Polyfill | Targets |
|---|---|
| `before()` | `Element`, `CharacterData`, `DocumentType` |
| `after()` | `Element`, `CharacterData`, `DocumentType` |
| `remove()` | `Element`, `CharacterData`, `DocumentType` |
| `replaceWith()` | `Element`, `CharacterData`, `DocumentType` |
| `append()` | `Element`, `Document`, `DocumentFragment` |
| `prepend()` | `Element`, `Document`, `DocumentFragment` |
| `matches()` | `Element` (falls back to `msMatchesSelector` / `webkitMatchesSelector`) |
| `closest()` | `Element` |
| `forEach()` | `NodeList` |
| `CustomEvent` constructor | `window` |
| `classList.toggle` force parameter | `DOMTokenList` |

### Proxy polyfill (`proxy.min.js`)

A minimal ES6 `Proxy` polyfill for environments without native support.

**Supported traps:** `get`, `set`, `apply`, `construct`

**Supported features:**
- `new Proxy(target, handler)`
- `Proxy.revocable(target, handler)`
- Object, array, and function targets

**Limitations:**
- Cannot intercept property access on properties that didn't exist on the target at proxy creation time
- Traps beyond `get`/`set`/`apply`/`construct` are not supported and will throw

The polyfill only installs itself when `globalThis.Proxy` is not already defined.

## License

MIT