@deshicode/utils-sveltekit

A suite of enterprise-grade SvelteKit utilities designed for internal use. Optimized for high-performance debugging, hardware-aware responsiveness, and seamless development workflows.

@deshicode/utils-sveltekit/client

A suite of utilities and interactive components optimized for SvelteKit. Designed for high-performance debugging, hardware-aware responsiveness, and seamless development workflows.

Installation

Install the core package and its required peer dependencies using your preferred package manager:

NPM or your favorite nodejs package manager

npm install @deshicode/utils-sveltekit svelte tailwindcss

API Reference

Components

DevDeviceBlock

A lightweight, development-only visualizer for Tailwind CSS breakpoints. It helps ensure your UI scales correctly across the responsive spectrum by displaying the active breakpoint in real-time.

Usage:

<script>
  import { DevDeviceBlock } from '@deshicode/utils-sveltekit/client';
</script>

<DevDeviceBlock />

PreDebug

An advanced, interactive JSON/data inspector. Unlike standard <pre> tags, PreDebug features a portal-based stacking system, smooth drag-and-drop mechanics, and hardware-accelerated transitions.

Properties:

Features:

• Stacking Engine: Automatically manages multiple instances via a fixed portal container.
• Interactive UI: Supports drag-to-reposition for both the summary block and the full-screen modal.
• Live Metadata: Displays payload weight (KB/B) and line counts.
• Syntax Highlighting: Integrated color-coding for keys, strings, booleans, and numbers.
• Modal Viewer: Full-screen mode for deep-diving into complex nested objects with one-click clipboard copying.

Usage:

<script>
  import { PreDebug } from '@deshicode/utils-sveltekit/client';
  
  let storeData = { status: 'success', latency: '42ms', region: 'us-east-1' };
</script>

<!-- Floating portal (Default) -->
<PreDebug data={storeData} title="API Response" />

<!-- Inline mode -->
<PreDebug data={storeData} floating={false} classes="rounded-lg border" />

Stores

ClientResponsiveStore

A sophisticated, performance-first store that tracks the environment. It leverages requestAnimationFrame and matchMedia listeners to provide a comprehensive snapshot of the user's hardware and viewport.

ResponsiveState Schema:

Usage:

<script>
  import { ClientResponsiveStore } from '@deshicode/utils-sveltekit/client';
</script>

<div class="p-6">
  <h1 class="text-xl">System: {$ClientResponsiveStore.theme}</h1>
  
  {#if $ClientResponsiveStore.isMobile}
    <MobileNavigation />
  {:else}
    <DesktopNavigation />
  {/if}
</div>

Breakpoint Thresholds:

• xs: 320px
• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• 2xl: 1536px

Import Summary

import {   
    DevDeviceBlock,   
    PreDebug,   
    ClientResponsiveStore   
} from "@deshicode/utils-sveltekit/client";