fluid-ui-svelte 0.2.4 → 0.3.1

package/dist/utilities/codeBlockContents.js

@@ -0,0 +1,298 @@
+// Parsing errors happen in code editor when imports and script tags used inside code block component's contents.
+// To prevent this we import usage examples from here.
+const gettingStartedAppCss = `// src/routes/+layout.svelte
+import '../app.css';`;
+const gettingStartedUsage = `<script>
+  // Import a base element for custom implementation
+  import { Button } from 'fluid-ui-svelte/base';
+
+  // Import a pre-built component
+  import { Accordion } from 'fluid-ui-svelte/components';
+</script>
+
+<Button onclick={handleClick}>Submit</Button>
+
+<Accordion>
+  <!-- Accordion content -->
+</Accordion>`;
+const drawerBasicUsage = `<script>
+  import { Drawer } from 'fluid-ui-svelte/components';
+  import { Button, Text } from 'fluid-ui-svelte/base';
+
+  let isBasicDrawerOpen = $state(false);
+</script>
+
+<Button onclick={async () => isBasicDrawerOpen = true}>Open Drawer</Button>
+
+<Drawer bind:isOpen={isBasicDrawerOpen} position="left">
+  <div class="flex flex-col gap-4">
+    <Text type="h2">Drawer Content</Text>
+    <Text>This is some content inside the drawer.</Text>
+    <Button onclick={async () => isBasicDrawerOpen = false}>Close</Button>
+  </div>
+</Drawer>`;
+const drawerPositions = `<script>
+  import { Drawer } from 'fluid-ui-svelte/components';
+  let left = $state(false);
+  let right = $state(false);
+  let top = $state(false);
+  let bottom = $state(false);
+</script>
+
+<Button onclick={async () => left = true}>Left</Button>
+<Button onclick={async () => right = true}>Right</Button>
+<Button onclick={async () => top = true}>Top</Button>
+<Button onclick={async () => bottom = true}>Bottom</Button>
+
+<Drawer bind:isOpen={left} position="left">Left Drawer</Drawer>
+<Drawer bind:isOpen={right} position="right">Right Drawer</Drawer>
+<Drawer bind:isOpen={top} position="top">Top Drawer</Drawer>
+<Drawer bind:isOpen={bottom} position="bottom">Bottom Drawer</Drawer>`;
+const drawerAnimated = `<script>
+  import { Drawer } from 'fluid-ui-svelte/components';
+  import { fly, fade } from 'svelte/transition';
+  
+  let isAnimatedDrawerOpen = $state(false);
+</script>
+
+<Button onclick={async () => isAnimatedDrawerOpen = true}>Open Animated</Button>
+
+<Drawer 
+  bind:isOpen={isAnimatedDrawerOpen}
+  position="right"
+  transitionFn={fly} 
+  transitionParams={{ x: 500, duration: 500 }}
+  backdropTransitionFn={fade}
+>
+  Animated Content
+</Drawer>`;
+const drawerFlyAnimation = `<script>
+  import { Drawer } from 'fluid-ui-svelte/components';
+  import { fly } from 'svelte/transition';
+  
+  let isFlyDrawerOpen = $state(false);
+</script>
+
+<Button onclick={async () => isFlyDrawerOpen = true}>Open Fly Drawer</Button>
+
+<Drawer 
+  bind:isOpen={isFlyDrawerOpen}
+  position="bottom"
+  transitionFn={fly} 
+  transitionParams={{ y: 200, duration: 800 }}
+>
+  Fly Content
+</Drawer>`;
+const calendarSingle = `<script>
+  import { Calendar } from 'fluid-ui-svelte/components';
+  import { Button, Container } from 'fluid-ui-svelte/base';
+
+  let currentDate = $state(new Date().toISOString());
+
+  const changeMonth = (increment: number) => {
+    const date = new Date(currentDate);
+    date.setMonth(date.getMonth() + increment);
+    currentDate = date.toISOString();
+  };
+</script>
+
+<Container class="flex flex-col gap-4">
+  <Container class="flex gap-2">
+    <Button onclick={() => changeMonth(-1)}>Prev</Button>
+    <Button onclick={() => changeMonth(1)}>Next</Button>
+  </Container>
+  <Calendar bind:currentDate componentId="calendar-single" />
+</Container>`;
+const calendarDual = `<script>
+  import { Calendar } from 'fluid-ui-svelte/components';
+  import { Button, Container } from 'fluid-ui-svelte/base';
+
+  let baseDate = $state(new Date().toISOString());
+  
+  // Helper to get next month relative to base
+  const getOffsetDate = (offset: number) => {
+    const d = new Date(baseDate);
+    d.setMonth(d.getMonth() + offset);
+    return d.toISOString();
+  };
+
+  const changeMonth = (increment: number) => {
+    const d = new Date(baseDate);
+    d.setMonth(d.getMonth() + increment);
+    baseDate = d.toISOString();
+  };
+</script>
+
+<Container class="flex flex-col gap-4">
+  <Container class="flex gap-2">
+    <Button onclick={() => changeMonth(-1)}>Prev</Button>
+    <Button onclick={() => changeMonth(1)}>Next</Button>
+  </Container>
+  <Container class="flex gap-8 flex-wrap">
+    <Calendar currentDate={baseDate} componentId="cal-1" />
+    <Calendar currentDate={getOffsetDate(1)} componentId="cal-2" />
+  </Container>
+</Container>`;
+const calendarSixMonth = `<script>
+  import { Calendar } from 'fluid-ui-svelte/components';
+  import { Button, Container } from 'fluid-ui-svelte/base';
+
+  let baseDate = $state(new Date().toISOString());
+  
+  const getOffsetDate = (offset: number) => {
+    const d = new Date(baseDate);
+    d.setMonth(d.getMonth() + offset);
+    return d.toISOString();
+  };
+
+  const changeMonth = (increment: number) => {
+    const d = new Date(baseDate);
+    d.setMonth(d.getMonth() + increment);
+    baseDate = d.toISOString();
+  };
+</script>
+
+<Container class="flex flex-col gap-4">
+  <Container class="flex gap-2">
+    <Button onclick={() => changeMonth(-1)}>Prev</Button>
+    <Button onclick={() => changeMonth(1)}>Next</Button>
+  </Container>
+  <Container class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+    {#each Array(6) as _, i}
+      <Calendar currentDate={getOffsetDate(i)} componentId="cal-{i}" />
+    {/each}
+  </Container>
+</Container>`;
+const calendarRange = `<script>
+  import { Calendar } from 'fluid-ui-svelte/components';
+  import { Button, Container, Text } from 'fluid-ui-svelte/base';
+
+  let baseDate = $state(new Date().toISOString());
+  let startDate = $state<string>();
+  let endDate = $state<string>();
+
+  const getOffsetDate = (offset: number) => {
+    const d = new Date(baseDate);
+    d.setMonth(d.getMonth() + offset);
+    return d.toISOString();
+  };
+
+  const changeMonth = (inc: number) => {
+    const d = new Date(baseDate);
+    d.setMonth(d.getMonth() + inc);
+    baseDate = d.toISOString();
+  };
+</script>
+
+<Container class="flex flex-col gap-4">
+  <Container class="flex justify-between items-center">
+    <Container class="flex gap-2">
+      <Button onclick={() => changeMonth(-1)}>Prev</Button>
+      <Button onclick={() => changeMonth(1)}>Next</Button>
+    </Container>
+    <Text class="text-sm font-mono">
+      {startDate || '...'} to {endDate || '...'}
+    </Text>
+  </Container>
+
+  <Container class="flex gap-8 flex-wrap">
+    <Calendar 
+      currentDate={baseDate} 
+      bind:startDate 
+      bind:endDate 
+      componentId="cal-range-1" 
+    />
+    <Calendar 
+      currentDate={getOffsetDate(1)} 
+      bind:startDate 
+      bind:endDate 
+      componentId="cal-range-2" 
+    />
+  </Container>
+</Container>`;
+const calendarMulti = `<script>
+  import { Calendar } from 'fluid-ui-svelte/components';
+  import { Button, Container } from 'fluid-ui-svelte/base';
+
+  const multiCalendarState = $state({
+    currentDate: new Date().toISOString(),
+    startDate: '',
+    endDate: ''
+  });
+
+  const changeMonthMulti = (inc: number) => {
+    const d = new Date(multiCalendarState.currentDate);
+    d.setMonth(d.getMonth() + inc);
+    multiCalendarState.currentDate = d.toISOString();
+  };
+</script>
+
+<Container class="flex flex-col gap-4">
+  <Container class="flex gap-2">
+    <Button onclick={() => changeMonthMulti(-1)}>Prev</Button>
+    <Button onclick={() => changeMonthMulti(1)}>Next</Button>
+  </Container>
+
+  <Container class="flex gap-8 flex-wrap">
+    <Calendar 
+      bind:currentDate={multiCalendarState.currentDate} 
+      bind:startDate={multiCalendarState.startDate} 
+      bind:endDate={multiCalendarState.endDate} 
+    />
+    <Calendar 
+      currentDate={new Date(new Date(multiCalendarState.currentDate).setMonth(new Date(multiCalendarState.currentDate).getMonth() + 1)).toISOString()} 
+      bind:startDate={multiCalendarState.startDate} 
+      bind:endDate={multiCalendarState.endDate} 
+    />
+  </Container>
+</Container>`;
+const carouselSlide = `<script>
+  import { Carousel } from 'fluid-ui-svelte/components';
+  import { Image } from 'fluid-ui-svelte/base';
+
+  const items = [
+    { src: 'https://via.placeholder.com/800x400?text=Slide+1', alt: 'Slide 1' },
+    { src: 'https://via.placeholder.com/800x400?text=Slide+2', alt: 'Slide 2' },
+    { src: 'https://via.placeholder.com/800x400?text=Slide+3', alt: 'Slide 3' }
+  ];
+</script>
+
+<Carousel {items} type="slide" loop>
+  {#snippet children(item)}
+    <Image src={item.src} alt={item.alt} class="w-full h-64 object-cover" />
+  {/snippet}
+</Carousel>`;
+const carouselFade = `<script>
+  import { Carousel } from 'fluid-ui-svelte/components';
+  import { Text } from 'fluid-ui-svelte/base';
+
+  const quotes = [
+    { text: "Innovation is key.", author: "Tech CEO" },
+    { text: "Design is intelligence made visible.", author: "Designer" },
+    { text: "Simplicity is the ultimate sophistication.", author: "Da Vinci" }
+  ];
+</script>
+
+<Carousel {items: quotes} type="fade" autoplay autoplayInterval={4000}>
+  {#snippet children(quote)}
+    <div class="h-64 flex flex-col items-center justify-center bg-neutral-100 dark:bg-neutral-800 p-8 text-center">
+      <Text type="h3" class="text-2xl font-bold mb-4">"{quote.text}"</Text>
+      <Text class="text-neutral-500">- {quote.author}</Text>
+    </div>
+  {/snippet}
+</Carousel>`;
+export const codeBlockContents = {
+    gettingStartedAppCss,
+    gettingStartedUsage,
+    drawerBasicUsage,
+    drawerPositions,
+    drawerAnimated,
+    drawerFlyAnimation,
+    calendarSingle,
+    calendarDual,
+    calendarSixMonth,
+    calendarRange,
+    calendarMulti,
+    carouselSlide,
+    carouselFade
+};

package/dist/utilities/imageCrop.d.ts

@@ -0,0 +1,33 @@
+export declare function generateCropAreaState(shape?: 'circle' | 'rectangle', aspectRatio?: {
+    w: number;
+    h: number;
+}): {
+    cropArea: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    shape: "circle" | "rectangle";
+    aspectRatio: {
+        w: number;
+        h: number;
+    };
+    activeAction: string;
+    lastMousePosition: {
+        x: number;
+        y: number;
+    };
+};
+export declare function draw(canvasElement: HTMLCanvasElement, image: HTMLImageElement, cropAreaState: ReturnType<typeof generateCropAreaState>): void;
+export declare function handleMouseDown(event: PointerEvent | MouseEvent, cropAreaState: ReturnType<typeof generateCropAreaState>, canvasElement?: HTMLCanvasElement): void;
+export declare function handleMouseMove(event: PointerEvent | MouseEvent, cropAreaState: ReturnType<typeof generateCropAreaState>, canvasElement?: HTMLCanvasElement): void;
+export declare function handleMouseUp(cropAreaState: ReturnType<typeof generateCropAreaState>): void;
+/**
+ * Export the currently selected crop as a PNG Blob.
+ * - If shape === 'rectangle' exports the rectangular region.
+ * - If shape === 'circle' exports a square canvas with a circular alpha mask (transparent outside circle).
+ *
+ * Returns Promise<Blob | null>.
+ */
+export declare function exportSelectionAsPNG(canvasElement: HTMLCanvasElement, image: HTMLImageElement, cropAreaState: ReturnType<typeof generateCropAreaState>): Promise<Blob | null>;

package/dist/utilities/imageCrop.js

@@ -0,0 +1,217 @@
+export function generateCropAreaState(shape = 'rectangle', aspectRatio = { w: 1, h: 1 }) {
+    return {
+        cropArea: { x: 0, y: 0, width: 0, height: 0 },
+        shape,
+        aspectRatio,
+        activeAction: 'idle',
+        lastMousePosition: { x: 0, y: 0 }
+    };
+}
+export function draw(canvasElement, image, cropAreaState) {
+    if (!image || !canvasElement)
+        return;
+    const context = canvasElement.getContext('2d');
+    // 1. Draw the base image
+    context.drawImage(image, 0, 0);
+    // 2. Draw the semi-transparent mask
+    context.fillStyle = 'rgba(0, 0, 0, 0.2)';
+    context.fillRect(0, 0, canvasElement.width, canvasElement.height);
+    // 3. Cut a "hole" for the crop area
+    drawCropArea(context, cropAreaState);
+    // 4. Draw the resize handles
+    drawHandles(context, cropAreaState);
+}
+function drawCropArea(context, cropAreaState) {
+    context.save(); // Save the current state
+    context.globalCompositeOperation = 'destination-out';
+    if (cropAreaState.shape === 'circle') {
+        const { x, y, width, height } = cropAreaState.cropArea;
+        // Use the smaller dimension so the circle always fits inside the bounding box
+        const radius = Math.min(width, height) / 2;
+        const centerX = x + width / 2;
+        const centerY = y + height / 2;
+        context.beginPath();
+        context.arc(centerX, centerY, radius, 0, Math.PI * 2);
+        context.fill();
+    }
+    else {
+        // Default to square/rectangle
+        context.fillRect(cropAreaState.cropArea.x, cropAreaState.cropArea.y, cropAreaState.cropArea.width, cropAreaState.cropArea.height);
+    }
+    context.restore(); // Restore to the previous state (resets globalCompositeOperation)
+}
+const HANDLE_SIZE = 24;
+function getHandles(cropAreaState) {
+    const { x, y, width, height } = cropAreaState.cropArea;
+    // If the crop shape is a circle, place handles around the actual circle (inscribed),
+    // with a small padding so they sit slightly outside the circle's edge.
+    if (cropAreaState.shape === 'circle') {
+        const centerX = x + width / 2;
+        const centerY = y + height / 2;
+        const radius = Math.min(width, height) / 2;
+        const padding = radius * 0.05; // 5% padding
+        const r = radius + padding;
+        const diagOffset = r / Math.sqrt(2); // 45° corner offset
+        return [
+            // corners (45° around circle)
+            { x: centerX - diagOffset, y: centerY - diagOffset, name: 'tl' },
+            { x: centerX + diagOffset, y: centerY - diagOffset, name: 'tr' },
+            { x: centerX + diagOffset, y: centerY + diagOffset, name: 'br' },
+            { x: centerX - diagOffset, y: centerY + diagOffset, name: 'bl' },
+            // sides (cardinal points on circle)
+            { x: centerX, y: centerY - r, name: 't' },
+            { x: centerX + r, y: centerY, name: 'r' },
+            { x: centerX, y: centerY + r, name: 'b' },
+            { x: centerX - r, y: centerY, name: 'l' }
+        ];
+    }
+    // Default rectangle handles (unchanged)
+    return [
+        // corners
+        { x: x, y: y, name: 'tl' }, // top-left
+        { x: x + width, y: y, name: 'tr' }, // top-right
+        { x: x + width, y: y + height, name: 'br' }, // bottom-right
+        { x: x, y: y + height, name: 'bl' }, // bottom-left
+        // sides
+        { x: x + width / 2, y: y, name: 't' }, // top
+        { x: x + width, y: y + height / 2, name: 'r' }, // right
+        { x: x + width / 2, y: y + height, name: 'b' }, // bottom
+        { x: x, y: y + height / 2, name: 'l' } // left
+    ];
+}
+function drawHandles(context, cropAreaState) {
+    context.fillStyle = 'white';
+    const handles = getHandles(cropAreaState);
+    for (const handle of handles) {
+        context.fillRect(handle.x - HANDLE_SIZE / 2, handle.y - HANDLE_SIZE / 2, HANDLE_SIZE, HANDLE_SIZE);
+    }
+}
+/**
+ * Map a PointerEvent/MouseEvent to canvas coordinate space (accounts for CSS scaling).
+ */
+function getCanvasCoords(event, canvas) {
+    // Use client coordinates and canvas bounding box to map to drawing buffer pixels
+    const rect = canvas.getBoundingClientRect();
+    const clientX = event.clientX ?? event.clientX;
+    const clientY = event.clientY ?? event.clientY;
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    return {
+        x: (clientX - rect.left) * scaleX,
+        y: (clientY - rect.top) * scaleY
+    };
+}
+function clampCropToCanvas(cropArea, canvas, shape = 'rectangle', minSize = 20) {
+    // Ensure positive sizes
+    cropArea.width = Math.max(minSize, cropArea.width);
+    cropArea.height = Math.max(minSize, cropArea.height);
+    if (shape === 'circle') {
+        // Force a square bounding box that stays centered on the current center.
+        const centerX = cropArea.x + cropArea.width / 2;
+        const centerY = cropArea.y + cropArea.height / 2;
+        const size = Math.max(minSize, Math.min(cropArea.width, cropArea.height));
+        cropArea.width = size;
+        cropArea.height = size;
+        cropArea.x = centerX - size / 2;
+        cropArea.y = centerY - size / 2;
+    }
+    // Keep position inside canvas
+    cropArea.x = Math.max(0, Math.min(cropArea.x, canvas.width - cropArea.width));
+    cropArea.y = Math.max(0, Math.min(cropArea.y, canvas.height - cropArea.height));
+}
+export function handleMouseDown(event, cropAreaState, canvasElement) {
+    if (!canvasElement)
+        return;
+    const { x: offsetX, y: offsetY } = getCanvasCoords(event, canvasElement);
+    const handles = getHandles(cropAreaState);
+    // Check if a handle was clicked (handles are in canvas coordinates)
+    for (const handle of handles) {
+        const handleX = handle.x - HANDLE_SIZE / 2;
+        const handleY = handle.y - HANDLE_SIZE / 2;
+        if (offsetX >= handleX &&
+            offsetX <= handleX + HANDLE_SIZE &&
+            offsetY >= handleY &&
+            offsetY <= handleY + HANDLE_SIZE) {
+            cropAreaState.activeAction = `resizing-${handle.name}`;
+            cropAreaState.lastMousePosition = { x: offsetX, y: offsetY };
+            return;
+        }
+    }
+    // If no handle was clicked, check if the main rectangle was clicked
+    const { x, y, width, height } = cropAreaState.cropArea;
+    if (offsetX >= x && offsetX <= x + width && offsetY >= y && offsetY <= y + height) {
+        cropAreaState.activeAction = 'moving';
+        cropAreaState.lastMousePosition = { x: offsetX, y: offsetY };
+        return;
+    }
+}
+export function handleMouseMove(event, cropAreaState, canvasElement) {
+    if (cropAreaState.activeAction === 'idle')
+        return;
+    if (!canvasElement)
+        return;
+    const { x: offsetX, y: offsetY } = getCanvasCoords(event, canvasElement);
+    const deltaX = offsetX - cropAreaState.lastMousePosition.x;
+    const deltaY = offsetY - cropAreaState.lastMousePosition.y;
+    const { cropArea } = cropAreaState;
+    if (cropAreaState.activeAction === 'moving') {
+        cropArea.x += deltaX;
+        cropArea.y += deltaY;
+    }
+    else if (cropAreaState.activeAction.startsWith('resizing-')) {
+        const handleName = cropAreaState.activeAction.split('-')[1];
+        if (handleName.includes('r'))
+            cropArea.width += deltaX;
+        if (handleName.includes('l')) {
+            cropArea.x += deltaX;
+            cropArea.width -= deltaX;
+        }
+        if (handleName.includes('b'))
+            cropArea.height += deltaY;
+        if (handleName.includes('t')) {
+            cropArea.y += deltaY;
+            cropArea.height -= deltaY;
+        }
+    }
+    // Prevent negative/too-small sizes and keep crop within canvas
+    // pass the current shape so a circle forces a square bounding box
+    clampCropToCanvas(cropArea, canvasElement, cropAreaState.shape, 20);
+    cropAreaState.lastMousePosition = { x: offsetX, y: offsetY };
+}
+export function handleMouseUp(cropAreaState) {
+    cropAreaState.activeAction = 'idle';
+}
+/**
+ * Export the currently selected crop as a PNG Blob.
+ * - If shape === 'rectangle' exports the rectangular region.
+ * - If shape === 'circle' exports a square canvas with a circular alpha mask (transparent outside circle).
+ *
+ * Returns Promise<Blob | null>.
+ */
+export async function exportSelectionAsPNG(canvasElement, image, cropAreaState) {
+    if (!canvasElement || !image)
+        return null;
+    const { x, y, width, height } = cropAreaState.cropArea;
+    if (width <= 0 || height <= 0)
+        return null;
+    // Create an offscreen canvas sized to the crop bounding box (square for circle)
+    const outCanvas = document.createElement('canvas');
+    outCanvas.width = Math.round(width);
+    outCanvas.height = Math.round(height);
+    const ctx = outCanvas.getContext('2d');
+    if (!ctx)
+        return null;
+    // Draw the corresponding portion of the source image
+    // coords are in canvas/image pixel space because the component sets canvas size to image.naturalWidth/Height
+    ctx.drawImage(image, x, y, width, height, 0, 0, outCanvas.width, outCanvas.height);
+    if (cropAreaState.shape === 'circle') {
+        // Mask to a circle (destination-in keeps the circular area)
+        ctx.globalCompositeOperation = 'destination-in';
+        ctx.beginPath();
+        const r = Math.min(outCanvas.width, outCanvas.height) / 2;
+        ctx.arc(outCanvas.width / 2, outCanvas.height / 2, r, 0, Math.PI * 2);
+        ctx.fill();
+    }
+    // Return a PNG Blob
+    return await new Promise((resolve) => outCanvas.toBlob((b) => resolve(b), 'image/png'));
+}

package/dist/utilities/mergeClasses.d.ts

@@ -0,0 +1 @@
+export declare function mergeClasses(classA: string, classB: string): string;

package/dist/utilities/mergeClasses.js

@@ -0,0 +1,3 @@
+export function mergeClasses(classA, classB) {
+    return [...new Set([...classA.split(' '), ...classB.split(' ')])].join(' ').trim();
+}

package/package.json

@@ -1,27 +1,27 @@
 {
 	"name": "fluid-ui-svelte",
-	"version": "0.2.4",
+	"version": "0.3.1",
 	"author": {
 		"name": "Emre Ayaz",
-		"email": "emreayaz@frostium.io",
-		"url": "https://emreayaz.com"
+		"email": "ayazthemre@gmail.com"
 	},
+	"license": "MIT",
+	"homepage": "https://github.com/ayazemre/fluid-ui-svelte",
 	"repository": {
-		"url": "https://github.com/ayazemre/fluid-ui"
+		"url": "git+https://github.com/ayazemre/fluid-ui-svelte.git"
 	},
 	"scripts": {
 		"dev": "vite dev",
-		"build": "vite build && npm run package",
+		"build": "vite build && npm run prepack",
 		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "npm run package",
+		"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",
 		"format": "prettier --write .",
 		"lint": "prettier --check . && eslint .",
 		"test:unit": "vitest",
-		"test": "npm run test:unit -- --run && npm run test:e2e",
-		"test:e2e": "playwright test"
+		"test": "npm run test:unit -- --run"
 	},
 	"files": [
 		"dist",
@@ -38,34 +38,51 @@
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
+		},
+		"./base": {
+			"types": "./dist/base/index.d.ts",
+			"svelte": "./dist/base/index.js"
+		},
+		"./components": {
+			"types": "./dist/components/index.d.ts",
+			"svelte": "./dist/components/index.js"
 		}
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.45.3",
-		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^4.0.0",
-		"@types/eslint": "^9.6.0",
-		"eslint": "^9.7.0",
-		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.36.0",
-		"globals": "^15.0.0",
-		"prettier": "^3.3.2",
-		"prettier-plugin-svelte": "^3.2.6",
-		"publint": "^0.2.0",
-		"svelte": "^5.0.0",
-		"svelte-check": "^4.0.0",
-		"typescript": "^5.0.0",
-		"typescript-eslint": "^8.0.0",
-		"vite": "^5.0.11",
-		"vitest": "^2.0.4"
+		"@eslint/compat": "^1.4.0",
+		"@eslint/js": "^9.38.0",
+		"@iconify/svelte": "^5.1.0",
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/adapter-node": "^5.4.0",
+		"@sveltejs/kit": "^2.47.1",
+		"@sveltejs/package": "^2.5.4",
+		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@tailwindcss/vite": "^4.1.14",
+		"@types/node": "^22",
+		"@vitest/browser": "^3.2.4",
+		"@vitest/ui": "^3.2.4",
+		"eslint": "^9.38.0",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.12.4",
+		"globals": "^16.4.0",
+		"playwright": "^1.56.1",
+		"prettier": "^3.6.2",
+		"prettier-plugin-svelte": "^3.4.0",
+		"prettier-plugin-tailwindcss": "^0.7.1",
+		"publint": "^0.3.14",
+		"svelte": "^5.41.0",
+		"svelte-check": "^4.3.3",
+		"tailwindcss": "^4.1.14",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.46.1",
+		"vite": "^7.1.10",
+		"vitest": "^3.2.4",
+		"vitest-browser-svelte": "^1.1.0"
 	},
-	"dependencies": {
-		"@tailwindcss/vite": "^4.0.0-alpha.31",
-		"tailwindcss": "^4.0.0-alpha.31"
-	}
-}
+	"keywords": [
+		"svelte"
+	]
+}

package/dist/community/prebuilt/index.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/community/prebuilt/index.js

@@ -1 +0,0 @@
-"use strict";

package/dist/components/Breadcrumb.svelte

@@ -1 +0,0 @@
-<!-- TODO -->