@valerius_petrini/corekit-ui 0.1.22

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Valerius Petrini
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,65 @@
+# Svelte library
+
+Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+
+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!
+
+```sh
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+To recreate this project with the same configuration:
+
+```sh
+# recreate this project
+npx sv@0.12.5 create --template library --types ts --add tailwindcss="plugins:typography,forms" --install npm ./
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+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:
+
+```sh
+npm pack
+```
+
+To create a production version of your showcase app:
+
+```sh
+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):
+
+```sh
+npm publish
+```

package/dist/actions/fbm.d.ts

@@ -0,0 +1,10 @@
+export interface FBMBackgroundOptions {
+    octaves?: number;
+    warps?: number;
+    scale?: number;
+    seed?: number;
+}
+export declare function fbmBackground(canvas: HTMLCanvasElement, options?: FBMBackgroundOptions): {
+    update(newOptions: FBMBackgroundOptions): void;
+    destroy(): void;
+} | undefined;

package/dist/actions/fbm.js

@@ -0,0 +1,193 @@
+const FBM_VERTEX_SHADER_SOURCE = `
+attribute vec4 aVertexPosition;
+
+void main() {
+    gl_Position = aVertexPosition;
+}`;
+const FBM_FRAGMENT_SHADER_SOURCE = `
+precision mediump float;
+
+uniform vec2 u_resolution;
+uniform float u_seed;
+uniform float u_scale;
+uniform int u_octaves;
+uniform int u_warp;
+
+const int maxOctaves = 20;
+const int maxWarps = 5;
+
+float rand(vec2 n) { 
+    return fract(sin(dot(n.xy + u_seed, vec2(12.9898, 78.233))) * 43758.5453);
+}
+
+float noise(vec2 p){
+    vec2 i = floor(p);
+    vec2 f = fract(p);
+
+    // Four corners in 2D of a tile
+    float a = rand(i);
+    float b = rand(i + vec2(1.0, 0.0));
+    float c = rand(i + vec2(0.0, 1.0));
+    float d = rand(i + vec2(1.0, 1.0));
+
+    vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);
+    
+    return mix(a, b, u.x) +
+            (c - a)*  u.y * (1.0 - u.x) +
+            (d - b) * u.x * u.y;
+}
+
+float fbm( in vec2 x, in float H ) {
+    float v = 00.0000;
+    float a = 0.5;
+    vec2 shift = vec2(100);
+    // Rotate to reduce axial bias
+    mat2 rot = mat2(0.877, 0.479, -0.479, 0.877);
+    for (int i = 0; i < maxOctaves; ++i) {
+        v += a * noise(x);
+        x = rot * x * 2.0 + shift;
+        a *= 0.5;
+        if (i > u_octaves) break;
+    }
+    return v;
+}
+
+void main() {
+    vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+    uv.x *= u_resolution.x / u_resolution.y;
+
+    float baseNoise = fbm(uv * u_scale, 1.2);
+
+    vec2 warp = uv;
+    for (int i = 0; i < maxWarps; ++i) {
+        warp += vec2(fbm(warp * 2.0, 1.0), fbm(warp * 4.0 + vec2(10.2), 1.0));
+        if (i > u_warp) break;
+    }
+
+    baseNoise = fbm(warp * u_scale, 1.2);
+
+    gl_FragColor = vec4(vec3(baseNoise), 1.0);
+}`;
+function loadShaders(gl, type, source) {
+    const shader = gl.createShader(type);
+    if (!shader) {
+        console.error("Unable to create shader");
+        return null;
+    }
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        console.error("An error occurred compiling the shaders: " + gl.getShaderInfoLog(shader));
+        gl.deleteShader(shader);
+        return null;
+    }
+    return shader;
+}
+function initializeShaders(gl, vertexSource, fragmentSource) {
+    const vertexShader = loadShaders(gl, gl.VERTEX_SHADER, vertexSource);
+    const fragmentShader = loadShaders(gl, gl.FRAGMENT_SHADER, fragmentSource);
+    if (!vertexShader || !fragmentShader)
+        return null;
+    const shaderProgram = gl.createProgram();
+    if (!shaderProgram) {
+        console.error("Unable to create shader program");
+        return null;
+    }
+    gl.attachShader(shaderProgram, vertexShader);
+    gl.attachShader(shaderProgram, fragmentShader);
+    gl.linkProgram(shaderProgram);
+    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+        console.error("Unable to initialize the shader program: " + gl.getProgramInfoLog(shaderProgram));
+        return null;
+    }
+    return shaderProgram;
+}
+function initBuffers(gl) {
+    const positionBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+    const vertices = new Float32Array([
+        -1.0, -1.0,
+        1.0, -1.0,
+        -1.0, 1.0,
+        1.0, 1.0,
+    ]);
+    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+    return {
+        position: positionBuffer,
+    };
+}
+export function fbmBackground(canvas, options = {}) {
+    let gl = canvas.getContext("webgl", { antialias: true });
+    if (!gl) {
+        console.error("WebGL not supported");
+        return;
+    }
+    let currentOptions = { ...options };
+    let internalSeed = options.seed ?? Math.random() * 1000;
+    const shaderProgram = initializeShaders(gl, FBM_VERTEX_SHADER_SOURCE, FBM_FRAGMENT_SHADER_SOURCE);
+    if (!shaderProgram) {
+        console.error("Failed to initialize shaders");
+        return;
+    }
+    const programInfo = {
+        program: shaderProgram,
+        attribLocations: {
+            vertexPosition: gl.getAttribLocation(shaderProgram, "aVertexPosition"),
+        },
+        uniformLocations: {
+            resolution: gl.getUniformLocation(shaderProgram, "u_resolution"),
+            seed: gl.getUniformLocation(shaderProgram, "u_seed"),
+            scale: gl.getUniformLocation(shaderProgram, "u_scale"),
+            octaves: gl.getUniformLocation(shaderProgram, "u_octaves"),
+            warp: gl.getUniformLocation(shaderProgram, "u_warp"),
+        }
+    };
+    const buffers = initBuffers(gl);
+    function updateCanvasSize() {
+        const DPR = window.devicePixelRatio || 1;
+        canvas.width = Math.floor(canvas.clientWidth * DPR);
+        canvas.height = Math.floor(canvas.clientHeight * DPR);
+    }
+    function render() {
+        updateCanvasSize();
+        if (!gl)
+            return;
+        gl.viewport(0, 0, canvas.width, canvas.height);
+        gl.clearColor(0, 0, 0, 1);
+        gl.clearDepth(1.0);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        gl.enable(gl.DEPTH_TEST);
+        gl.depthFunc(gl.LEQUAL);
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
+        gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition, 2, gl.FLOAT, false, 0, 0);
+        gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
+        gl.useProgram(programInfo.program);
+        gl.uniform2f(programInfo.uniformLocations.resolution, canvas.width, canvas.height);
+        gl.uniform1f(programInfo.uniformLocations.seed, currentOptions.seed ?? internalSeed);
+        gl.uniform1i(programInfo.uniformLocations.octaves, currentOptions.octaves ?? 4);
+        gl.uniform1i(programInfo.uniformLocations.warp, currentOptions.warps ?? 2);
+        gl.uniform1f(programInfo.uniformLocations.scale, currentOptions.scale ?? 2);
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    }
+    const resizeObserver = new ResizeObserver(() => {
+        requestAnimationFrame(render);
+    });
+    resizeObserver.observe(canvas);
+    render();
+    return {
+        update(newOptions) {
+            const changed = JSON.stringify(currentOptions) !== JSON.stringify(newOptions);
+            if (changed) {
+                currentOptions = { ...newOptions };
+                render();
+            }
+        },
+        destroy() {
+            resizeObserver.disconnect();
+            gl.bindBuffer(gl.ARRAY_BUFFER, null);
+            gl.deleteBuffer(buffers.position);
+            gl.deleteProgram(shaderProgram);
+            gl.getExtension("WEBGL_lose_context")?.loseContext();
+        }
+    };
+}

package/dist/components/Analytics.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { page } from '$app/stores'
+
+    let { measurementId } = $props();
+
+    const ANALYTICS_URL = $derived(`https://www.googletagmanager.com/gtag/js?id=${measurementId}`);
+
+    $effect(() => {
+        if (typeof gtag !== 'undefined') {
+            gtag('config', measurementId, {
+                page_title: document.title,
+                page_path: $page.url.pathname,
+            })
+        }
+    })
+</script>
+  
+<svelte:head>
+    {#if measurementId}
+        <script async src={ANALYTICS_URL}></script>
+        <script>
+            window.dataLayer = window.dataLayer || [];
+            function gtag() { dataLayer.push(arguments); }
+            gtag('js', new Date());
+        </script>
+    {/if}
+</svelte:head>

package/dist/components/Analytics.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const Analytics: import("svelte").Component<{
+    measurementId: any;
+}, {}, "">;
+type Analytics = ReturnType<typeof Analytics>;
+export default Analytics;

package/dist/components/Button.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import { twMerge } from "tailwind-merge";
+
+    let { 
+        children, 
+        class: className, 
+        pill = false,
+        icon = false,
+        href = undefined,
+        ...restProps
+    } = $props();
+
+    let pillClass = "rounded-full";
+    let iconClass = "rounded-full p-2";
+    let defaultClass = $derived(twMerge("text-white cursor-pointer px-2 py-1 ", (pill ? pillClass : ""), (icon ? iconClass : "")));
+
+    let combinedClass = $derived(twMerge(defaultClass, className));
+</script>
+
+{#if href}
+    <a class={combinedClass} {href} {...restProps}>
+        {@render children?.()}
+    </a>
+{:else}
+    <button class={combinedClass} {...restProps}>
+        {@render children?.()} 
+    </button>
+{/if}

package/dist/components/Button.svelte.d.ts

@@ -0,0 +1,9 @@
+declare const Button: import("svelte").Component<{
+    children: any;
+    class: any;
+    pill?: boolean;
+    icon?: boolean;
+    href?: any;
+} & Record<string, any>, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/SEO.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    import { page } from '$app/state';
+
+    const DEFAULT_TITLE = "My SvelteKit App";
+    const DEFAULT_DESCRIPTION = "Description of your website.";
+    const DEFAULT_IMAGE = "/favicon.png";
+      
+	interface SEOProps {
+        websiteName: string;
+		title?: string;
+		description?: string;
+		image?: any;
+	}
+
+	let { websiteName, title = DEFAULT_TITLE, description = DEFAULT_DESCRIPTION, image = DEFAULT_IMAGE }: SEOProps = $props();
+
+    let fullUrl = $derived(`${websiteName}${page.url.pathname.toString()}`);
+</script>
+  
+<svelte:head>
+    <title>{title}</title>
+    <meta name="description" content={description}>
+    <meta property="og_site_name" content={websiteName}>
+    <meta property="og:url" content={fullUrl}>
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="{title}">
+    <meta property="og:description" content={description}>
+    <meta property="og:image" content={image}>
+  
+    <meta name="twitter:card" content="summary_large_image">
+    <meta property="twitter:domain" content={websiteName}>
+    <meta property="twitter:url" content={fullUrl}>
+    <meta name="twitter:title" content="{title}">
+    <meta name="twitter:description" content={description}>
+    <meta name="twitter:image" content={image}>
+    {@html `  <script type="application/ld+json">{
+     "@context": "https://schema.org",
+     "@type": "Website",
+     "name": "${title}",
+     "url": "${fullUrl}",
+     "logo": "${image}"  }</script>`}
+
+    <meta name="google-site-verification" content="F6vDzwDyZfebc9kWIZlhzpsAm5zhanaPkOArdCZdDSU" />
+</svelte:head>

package/dist/components/SEO.svelte.d.ts

@@ -0,0 +1,9 @@
+interface SEOProps {
+    websiteName: string;
+    title?: string;
+    description?: string;
+    image?: any;
+}
+declare const SEO: import("svelte").Component<SEOProps, {}, "">;
+type SEO = ReturnType<typeof SEO>;
+export default SEO;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import Button from "./components/Button.svelte";
+import { fbmBackground } from "./actions/fbm.ts";
+export { Button, fbmBackground };

package/dist/index.js

@@ -0,0 +1,4 @@
+// Reexport your entry components here
+import Button from "./components/Button.svelte";
+import { fbmBackground } from "./actions/fbm.js";
+export { Button, fbmBackground };

package/package.json

@@ -0,0 +1,58 @@
+{
+	"name": "@valerius_petrini/corekit-ui",
+	"version": "0.1.22",
+	"description": "Component Library used across all my projects",
+	"author": "Valerius Petrini Jr.",
+	"license": "MIT",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/kit": "^2.50.2",
+		"@sveltejs/package": "^2.5.7",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@tailwindcss/forms": "^0.5.11",
+		"@tailwindcss/typography": "^0.5.19",
+		"@tailwindcss/vite": "^4.1.18",
+		"publint": "^0.3.17",
+		"svelte": "^5.51.0",
+		"svelte-check": "^4.4.2",
+		"tailwindcss": "^4.1.18",
+		"typescript": "^5.9.3",
+		"vite": "^7.3.1"
+	},
+	"keywords": [
+		"components",
+		"svelte"
+	],
+	"dependencies": {
+		"tailwind-merge": "^3.5.0"
+	}
+}