open-index/open-npm huggingface dataset:
npm package: @plavna/common
Description: Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
Latest version: 0.0.2

# create-svelte

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

Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).

## 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
npx sv create

# create a new project in my-app
npx sv create 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
```

Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.

## Building

To build your library:

```bash
npm run package
```

To create a production version of your showcase 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://svelte.dev/docs/kit/adapters) for your target environment.

## Publishing

Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).

To publish your library to [npm](https://www.npmjs.com):

```bash
npm publish
```
npm package: @plavna/corners
Description: ![Preview](./preview.png)
Latest version: 0.1.1

![Preview](./preview.png)

# Plavna Corners

Smooth/squircle/continuous corners for Svelte. Probably the first of its kind to work with SSR. Wrap your block and it will apply a smooth corners mask. Default smoothness is 4.

## Installation

```bash
pnpm install @plavna/corners
```

## Usage

You can also not specify smoothness and it will be set to 4 by default.

```svelte
<script lang="ts">
	import { PlavnaCorners } from '@plavna/corners';
</script>

<PlavnaCorners radius={10} smoothness={4}>
	<div class="quote">Every great leap forward has been driven by a new clarity of thought.</div>
</PlavnaCorners>
```
npm package: @plavna/design
Description: ![Preview](./preview.png)
Latest version: 0.0.11

![Preview](./preview.png)

# Plavna Design

Design system that powers [Plavna](https://plvn.app/). Short description is available [here](https://plvn.app/plavna-design/).

## Installation

```bash
pnpm install @plavna/design
```

## Usage

To use a component, we need to supply it with Theme data, we do it via wrapping the app with ThemeProvider:

1. On backend (for example +layout.ts) make a desired ThemeSet object, enrich it. It will dynamically import components and css files based on selected theme parts. Then return theme set and theme component set.

   ```ts
   import type { ThemeSet } from '@plavna/design/theming/basics';
   import { enrichThemes } from '@plavna/design/theming/enricher';

   import type { LayoutLoad } from './$types';

   export const load = (async () => {
   	const themeSet: ThemeSet = {
   		color: 'milk',
   		style: 'modern',
   		typographyInterface: 'inter',
   		typographyMarkdown: 'sequences'
   	};

   	const themeComponentSet = await enrichThemes(null, themeSet);

   	return { themeSet, themeComponentSet };
   }) satisfies LayoutLoad;
   ```

2. On the frontend (for example in +layout.svelte) pass these objects to ThemeProvider

   ```svelte
   <script lang="ts">
   	let { data, children } = $props();
   	let { themeSet, themeComponentLayers } = $derived(data);
   </script>

   <ThemeProvider {themeSet} {themeComponentLayers}>
   	{@render children()}
   </ThemeProvider>
   ```

Per-component documentation is to yet to be written, for now you can see components in action by reading [my portfolio on Plavna](https://plvn.app/den) or becoming [an author](https://plvn.app/sign-in/github). You can also see the full list of components and their props in [components folder](./src/lib/components).