@motion-proto/live-tokens 0.3.7 → 0.3.9

package/README.md

@@ -1,6 +1,6 @@
 # Live Tokens
 
-A foundational design system for quickly styling and building Svelte 4 + Vite microsites. **Edit your tokens and components in real time** — colors, typography, spacing, per-component aliases — and see the site update as you drag the slider. Save the result as a portable configuration you can carry from project to project.
+A foundational design system for quickly styling and building Svelte + Vite microsites. **Edit your tokens and components in real time** — colors, typography, spacing, per-component aliases — and see the site update as you drag the slider. Save the result as a portable configuration you can carry from project to project.
 
 `npm install @motion-proto/live-tokens` into your app — install once, style fast. The editor is dev-only; production builds get plain CSS variables and your chosen components, nothing else.
 

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "type": "module",
-  "description": "Design token editor with live CSS variable editing. Svelte 4 + Vite.",
+  "description": "Design token editor with live CSS variable editing. Svelte 4/5 + Vite 5/6/7.",
   "keywords": [
     "svelte",
     "vite",
@@ -37,7 +37,8 @@
     "src/assets",
     "dist-plugin",
     "!**/*.test.ts",
-    "!**/*.spec.ts"
+    "!**/*.spec.ts",
+    "!**/__tests__/**"
   ],
   "exports": {
     ".": {
@@ -92,9 +93,9 @@
   },
   "peerDependencies": {
     "sass": "^1.0",
-    "svelte": "^4.2",
+    "svelte": "^4.2 || ^5",
     "svelte-preprocess": "^6.0",
-    "vite": "^5.0"
+    "vite": "^5 || ^6 || ^7"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.1.2",

package/src/lib/LiveEditorOverlay.svelte

@@ -4,8 +4,11 @@
   // this component's type-check passes in consumer projects that haven't added
   // the ambient global to their tsconfig.
   declare const __PROJECT_ROOT__: string | undefined;
+  declare const __APP_VERSION__: string | undefined;
   const INJECTED_PROJECT_ROOT: string =
     typeof __PROJECT_ROOT__ !== 'undefined' ? (__PROJECT_ROOT__ ?? '') : '';
+  const APP_VERSION: string =
+    typeof __APP_VERSION__ !== 'undefined' ? (__APP_VERSION__ ?? '') : '';
 </script>
 
 <script lang="ts">
@@ -294,6 +297,10 @@
       </button>
     {/if}
 
+    {#if APP_VERSION}
+      <span class="version" title="live-tokens version">v{APP_VERSION}</span>
+    {/if}
+
     {#if open}
       <div class="spacer" transition:fade={BTN_FADE}></div>
     {/if}
@@ -454,6 +461,15 @@
 
   .spacer { flex: 1; }
 
+  .version {
+    font-size: 10px;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.4);
+    letter-spacing: 0.02em;
+    margin-left: 2px;
+    user-select: none;
+  }
+
   .hdr-btn {
     display: inline-flex;
     align-items: center;