max/nodarium
1
0
Fork 0
Code Issues 9 Pull Requests 1 Actions Packages Projects Releases 5 Wiki Activity

fix: make formatter happy
Some checks failed
📊 Benchmark the Runtime / release (push) Successful in 1m3s
Details
🚀 Lint & Test & Deploy / release (push) Failing after 1m32s
Details

Browse Source
This commit is contained in:
max_richter
2026-04-20 01:32:30 +02:00
parent 4de15b19c8
commit 5d4e2e9280
21 changed files with 339 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/src/app.html
View File

@@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.svg" /> <link rel="icon" href="%sveltekit.assets%/favicon.svg" />
<meta name="color-scheme" content="light dark">
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
<title>Nodes</title> <title>Nodes</title>

2
app/vite.config.ts
View File

@@ -1,10 +1,10 @@
import { sveltekit } from '@sveltejs/kit/vite'; import { sveltekit } from '@sveltejs/kit/vite';
import tailwindcss from '@tailwindcss/vite'; import tailwindcss from '@tailwindcss/vite';
import { playwright } from '@vitest/browser-playwright'; import { playwright } from '@vitest/browser-playwright';
import path from 'path';
import comlink from 'vite-plugin-comlink'; import comlink from 'vite-plugin-comlink';
import glsl from 'vite-plugin-glsl'; import glsl from 'vite-plugin-glsl';
import wasm from 'vite-plugin-wasm'; import wasm from 'vite-plugin-wasm';
import path from 'path';
import { defineConfig } from 'vitest/config'; import { defineConfig } from 'vitest/config';
export default defineConfig({ export default defineConfig({

9
packages/planty/.prettierignore
View File

@@ -1,9 +0,0 @@
# Package Managers
package-lock.json
pnpm-lock.yaml
yarn.lock
bun.lock
bun.lockb
# Miscellaneous
/static/

16
packages/planty/.prettierrc
View File

@@ -1,16 +0,0 @@
{
"useTabs": true,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
"overrides": [
{
"files": "*.svelte",
"options": {
"parser": "svelte"
}
}
],
"tailwindStylesheet": "./src/routes/layout.css"
}

64
packages/planty/eslint.config.js
View File

@@ -1,44 +1,44 @@
import prettier from 'eslint-config-prettier';
import path from 'node:path';
import { includeIgnoreFile } from '@eslint/compat'; import { includeIgnoreFile } from '@eslint/compat';
import js from '@eslint/js'; import js from '@eslint/js';
import prettier from 'eslint-config-prettier';
import svelte from 'eslint-plugin-svelte'; import svelte from 'eslint-plugin-svelte';
import { defineConfig } from 'eslint/config'; import { defineConfig } from 'eslint/config';
import globals from 'globals'; import globals from 'globals';
import path from 'node:path';
import ts from 'typescript-eslint'; import ts from 'typescript-eslint';
import svelteConfig from './svelte.config.js'; import svelteConfig from './svelte.config.js';
const gitignorePath = path.resolve(import.meta.dirname, '.gitignore'); const gitignorePath = path.resolve(import.meta.dirname, '.gitignore');
export default defineConfig( export default defineConfig(
includeIgnoreFile(gitignorePath), includeIgnoreFile(gitignorePath),
js.configs.recommended, js.configs.recommended,
ts.configs.recommended, ts.configs.recommended,
svelte.configs.recommended, svelte.configs.recommended,
prettier, prettier,
svelte.configs.prettier, svelte.configs.prettier,
{ {
languageOptions: { globals: { ...globals.browser, ...globals.node } }, languageOptions: { globals: { ...globals.browser, ...globals.node } },
rules: { rules: {
// typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects. // typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors // see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
'no-undef': 'off' 'no-undef': 'off'
} }
}, },
{ {
files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'], files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
languageOptions: { languageOptions: {
parserOptions: { parserOptions: {
projectService: true, projectService: true,
extraFileExtensions: ['.svelte'], extraFileExtensions: ['.svelte'],
parser: ts.parser, parser: ts.parser,
svelteConfig svelteConfig
} }
} }
}, },
{ {
// Override or add rule settings here, such as: // Override or add rule settings here, such as:
// 'svelte/button-has-type': 'error' // 'svelte/button-has-type': 'error'
rules: {} rules: {}
} }
); );

5
packages/planty/package.json
View File

@@ -9,8 +9,9 @@
"prepack": "svelte-kit sync && svelte-package && publint", "prepack": "svelte-kit sync && svelte-package && publint",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check . && eslint .", "lint": "eslint .",
"format": "prettier --write ." "format": "dprint fmt -c '../.dprint.jsonc' .",
"format:check": "dprint check -c '../.dprint.jsonc' ."
}, },
"files": [ "files": [
"dist", "dist",

14
packages/planty/src/app.d.ts vendored
View File

@@ -1,13 +1,13 @@
// See https://svelte.dev/docs/kit/types#app.d.ts // See https://svelte.dev/docs/kit/types#app.d.ts
// for information about these interfaces // for information about these interfaces
declare global { declare global {
namespace App { namespace App {
// interface Error {} // interface Error {}
// interface Locals {} // interface Locals {}
// interface PageData {} // interface PageData {}
// interface PageState {} // interface PageState {}
// interface Platform {} // interface Platform {}
} }
} }
export {}; export {};

22
packages/planty/src/app.html
View File

@@ -1,13 +1,13 @@
<!doctype html> <!DOCTYPE html>
<html lang="en" class="theme-dark"> <html lang="en" class="theme-dark">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.svg" /> <link rel="icon" href="%sveltekit.assets%/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="text-scale" content="scale" /> <meta name="text-scale" content="scale" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </html>

5
packages/planty/src/lib/components/Highlight.svelte
View File

@@ -80,7 +80,7 @@
{#if rect} {#if rect}
<div <div
class="highlight fixed z-99999 rounded-md pointer-events-none" class="highlight pointer-events-none fixed z-99999 rounded-md"
style:top="{rect.top}px" style:top="{rect.top}px"
style:left="{rect.left}px" style:left="{rect.left}px"
style:width="{rect.width}px" style:width="{rect.width}px"
@@ -91,7 +91,8 @@
<style> <style>
@keyframes pulse { @keyframes pulse {
0%, 100% { 0%,
100% {
box-shadow: box-shadow:
0 0 0 9999px rgba(0, 0, 0, 0.45), 0 0 0 9999px rgba(0, 0, 0, 0.45),
0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 2px rgba(255, 255, 255, 0.9),

13
packages/planty/src/lib/components/Planty.svelte
View File

@@ -13,12 +13,7 @@
onComplete?: () => void; onComplete?: () => void;
} }
let { let { config, hooks = {}, onStepChange, onComplete }: Props = $props();
config,
hooks = {},
onStepChange,
onComplete
}: Props = $props();
const AVATAR_SIZE = 80; const AVATAR_SIZE = 80;
const SCREEN_PADDING = 20; const SCREEN_PADDING = 20;
@@ -182,11 +177,7 @@
{#if isActive} {#if isActive}
<div class="pointer-events-none fixed inset-0 z-99999"> <div class="pointer-events-none fixed inset-0 z-99999">
{#if highlight} {#if highlight}
<Highlight <Highlight selector={highlight.selector} hookName={highlight.hookName} {hooks} />
selector={highlight.selector}
hookName={highlight.hookName}
{hooks}
/>
{/if} {/if}
<PlantyAvatar bind:x={avatarX} bind:y={avatarY} {mood} /> <PlantyAvatar bind:x={avatarX} bind:y={avatarY} {mood} />

234
packages/planty/src/lib/components/PlantyAvatar.svelte
View File

@@ -82,14 +82,10 @@
} }
const left = $derived( const left = $derived(
displayMood === 'talking' displayMood === 'talking' ? { px: 0, py: 0 } : pupilOffset(cursorX, cursorY, 9.5, 30.5)
? { px: 0, py: 0 }
: pupilOffset(cursorX, cursorY, 9.5, 30.5)
); );
const right = $derived( const right = $derived(
displayMood === 'talking' displayMood === 'talking' ? { px: 0, py: 0 } : pupilOffset(cursorX, cursorY, 31.5, 35.5)
? { px: 0, py: 0 }
: pupilOffset(cursorX, cursorY, 31.5, 35.5)
); );
</script> </script>
@@ -176,10 +172,10 @@
cursor: grab; cursor: grab;
user-select: none; user-select: none;
pointer-events: auto; pointer-events: auto;
filter: drop-shadow(0px 0px 10px black); filter: drop-shadow(0px 0px 10px black);
transition: transition:
left 0.85s cubic-bezier(0.33, 1, 0.68, 1), left 0.85s cubic-bezier(0.33, 1, 0.68, 1),
top 0.85s cubic-bezier(0.33, 1, 0.68, 1), top 0.85s cubic-bezier(0.33, 1, 0.68, 1);
} }
.dragging { .dragging {
@@ -189,49 +185,83 @@
/* idle: steady vertical bob */ /* idle: steady vertical bob */
@keyframes bob { @keyframes bob {
0%, 100% { transform: translateY(0); } 0%,
50% { transform: translateY(-5px); } 100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
.mood-idle {
animation: bob 2.6s ease-in-out infinite;
}
.mood-happy {
animation: bob 1.8s ease-in-out infinite;
} }
.mood-idle { animation: bob 2.6s ease-in-out infinite; }
.mood-happy { animation: bob 1.8s ease-in-out infinite; }
/* thinking: head tilted to the side — clearly different from idle */ /* thinking: head tilted to the side — clearly different from idle */
@keyframes think { @keyframes think {
0%, 100% { transform: rotate(-12deg) translateY(0); } 0%,
50% { transform: rotate(-12deg) translateY(-3px); } 100% {
transform: rotate(-12deg) translateY(0);
}
50% {
transform: rotate(-12deg) translateY(-3px);
}
}
.mood-thinking {
animation: think 2.8s ease-in-out infinite;
} }
.mood-thinking { animation: think 2.8s ease-in-out infinite; }
/* talking: subtle head waggle */ /* talking: subtle head waggle */
@keyframes waggle { @keyframes waggle {
0%, 100% { transform: rotate(0deg); } 0%,
25% { transform: rotate(-2deg) translateY(-1px); } 100% {
75% { transform: rotate(2deg) translateY(1px); } transform: rotate(0deg);
}
25% {
transform: rotate(-2deg) translateY(-1px);
}
75% {
transform: rotate(2deg) translateY(1px);
}
}
.mood-talking {
animation: waggle 0.3s ease-in-out infinite;
} }
.mood-talking { animation: waggle 0.3s ease-in-out infinite; }
/* moving: forward-lean glide */ /* moving: forward-lean glide */
@keyframes glide { @keyframes glide {
0%, 100% { transform: translateY(0) rotate(-6deg); } 0%,
50% { transform: translateY(-8px) rotate(-4deg); } 100% {
transform: translateY(0) rotate(-6deg);
}
50% {
transform: translateY(-8px) rotate(-4deg);
}
}
.mood-moving {
animation: glide 0.4s ease-in-out infinite;
} }
.mood-moving { animation: glide 0.4s ease-in-out infinite; }
/* ── Drop shadows ────────────────────────────────────────────────── */ /* ── Drop shadows ────────────────────────────────────────────────── */
.body { .body {
filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.5)); filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.5));
transition: d 0.12s ease-in-out; transition: d 0.12s ease-in-out;
} }
.eye-left, .eye-right { .eye-left,
.eye-right {
filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.5)); filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.5));
} }
.mood-talking { .mood-talking {
.eye-left, .eye-right { .eye-left,
> g { .eye-right {
transition: transform 0.5s ease-in-out; > g {
} transition: transform 0.5s ease-in-out;
} }
}
} }
/* ── Leaves ──────────────────────────────────────────────────────── */ /* ── Leaves ──────────────────────────────────────────────────────── */
@@ -246,74 +276,154 @@
/* idle: slow gentle breathing wave */ /* idle: slow gentle breathing wave */
@keyframes idle-right { @keyframes idle-right {
0%, 100% { transform: rotate(0deg); } 0%,
50% { transform: rotate(-9deg); } 100% {
transform: rotate(0deg);
}
50% {
transform: rotate(-9deg);
}
} }
@keyframes idle-left { @keyframes idle-left {
0%, 100% { transform: rotate(0deg); } 0%,
50% { transform: rotate(7deg); } 100% {
transform: rotate(0deg);
}
50% {
transform: rotate(7deg);
}
}
.mood-idle .leave-right {
animation: idle-right 3s ease-in-out infinite;
}
.mood-idle .leave-left {
animation: idle-left 3s ease-in-out infinite 0.15s;
} }
.mood-idle .leave-right { animation: idle-right 3s ease-in-out infinite; }
.mood-idle .leave-left { animation: idle-left 3s ease-in-out infinite 0.15s; }
/* thinking: wings held raised, minimal drift */ /* thinking: wings held raised, minimal drift */
@keyframes think-right { @keyframes think-right {
0%, 100% { transform: rotate(-14deg); } 0%,
50% { transform: rotate(-10deg); } 100% {
transform: rotate(-14deg);
}
50% {
transform: rotate(-10deg);
}
} }
@keyframes think-left { @keyframes think-left {
0%, 100% { transform: rotate(10deg); } 0%,
50% { transform: rotate(7deg); } 100% {
transform: rotate(10deg);
}
50% {
transform: rotate(7deg);
}
}
.mood-thinking .leave-right {
animation: think-right 4s ease-in-out infinite;
}
.mood-thinking .leave-left {
animation: think-left 4s ease-in-out infinite 0.3s;
} }
.mood-thinking .leave-right { animation: think-right 4s ease-in-out infinite; }
.mood-thinking .leave-left { animation: think-left 4s ease-in-out infinite 0.3s; }
/* talking: nearly still — tiny passive counter-sway */ /* talking: nearly still — tiny passive counter-sway */
@keyframes talk-right { @keyframes talk-right {
0%, 100% { transform: rotate(-2deg); } 0%,
50% { transform: rotate(2deg); } 100% {
transform: rotate(-2deg);
}
50% {
transform: rotate(2deg);
}
} }
@keyframes talk-left { @keyframes talk-left {
0%, 100% { transform: rotate(2deg); } 0%,
50% { transform: rotate(-2deg); } 100% {
transform: rotate(2deg);
}
50% {
transform: rotate(-2deg);
}
}
.mood-talking .leave-right {
animation: talk-right 0.6s ease-in-out infinite;
}
.mood-talking .leave-left {
animation: talk-left 0.6s ease-in-out infinite 0.1s;
} }
.mood-talking .leave-right { animation: talk-right 0.6s ease-in-out infinite; }
.mood-talking .leave-left { animation: talk-left 0.6s ease-in-out infinite 0.1s; }
/* happy: light casual flap */ /* happy: light casual flap */
@keyframes happy-right { @keyframes happy-right {
0%, 100% { transform: rotate(0deg); } 0%,
50% { transform: rotate(-18deg); } 100% {
transform: rotate(0deg);
}
50% {
transform: rotate(-18deg);
}
} }
@keyframes happy-left { @keyframes happy-left {
0%, 100% { transform: rotate(0deg); } 0%,
50% { transform: rotate(13deg); } 100% {
transform: rotate(0deg);
}
50% {
transform: rotate(13deg);
}
}
.mood-happy .leave-right {
animation: happy-right 1.4s ease-in-out infinite;
}
.mood-happy .leave-left {
animation: happy-left 1.4s ease-in-out infinite 0.1s;
} }
.mood-happy .leave-right { animation: happy-right 1.4s ease-in-out infinite; }
.mood-happy .leave-left { animation: happy-left 1.4s ease-in-out infinite 0.1s; }
/* moving: vigorous wing flap — full range, fast */ /* moving: vigorous wing flap — full range, fast */
@keyframes flap-right { @keyframes flap-right {
0%, 100% { transform: rotate(0deg); } 0%,
40% { transform: rotate(-40deg); } 100% {
transform: rotate(0deg);
}
40% {
transform: rotate(-40deg);
}
} }
@keyframes flap-left { @keyframes flap-left {
0%, 100% { transform: rotate(0deg); } 0%,
40% { transform: rotate(26deg); } 100% {
transform: rotate(0deg);
}
40% {
transform: rotate(26deg);
}
}
.mood-moving .leave-right {
animation: flap-right 0.34s ease-in-out infinite;
}
.mood-moving .leave-left {
animation: flap-left 0.34s ease-in-out infinite 0.04s;
} }
.mood-moving .leave-right { animation: flap-right 0.34s ease-in-out infinite; }
.mood-moving .leave-left { animation: flap-left 0.34s ease-in-out infinite 0.04s; }
/* ── Eye blink (on pupil so it doesn't fight cursor translate) ───── */ /* ── Eye blink (on pupil so it doesn't fight cursor translate) ───── */
@keyframes blink { @keyframes blink {
0%, 93%, 100% { transform: scaleY(1); } 0%,
96% { transform: scaleY(0.05); } 93%,
100% {
transform: scaleY(1);
}
96% {
transform: scaleY(0.05);
}
} }
.pupil { .pupil {
transform-box: fill-box; transform-box: fill-box;
transform-origin: center; transform-origin: center;
animation: blink 4s ease-in-out infinite; animation: blink 4s ease-in-out infinite;
} }
.eye-left .pupil { animation-delay: 0s; } .eye-left .pupil {
.eye-right .pupil { animation-delay: 0.07s; } animation-delay: 0s;
}
.eye-right .pupil {
animation-delay: 0.07s;
}
</style> </style>

33
packages/planty/src/lib/components/SpeechBubble.svelte
View File

@@ -55,7 +55,7 @@
'<code class="text-[11px] rounded px-1 font-mono" style="background: var(--color-layer-3); color: var(--color-text);">$1</code>' '<code class="text-[11px] rounded px-1 font-mono" style="background: var(--color-layer-3); color: var(--color-text);">$1</code>'
) )
.replaceAll(/\*/, '') .replaceAll(/\*/, '')
.replaceAll(/\_/, '') .replaceAll(/_/, '')
.replaceAll(/\n+/g, '<br>'); .replaceAll(/\n+/g, '<br>');
} }
@@ -73,7 +73,6 @@
if (i < target.length) { if (i < target.length) {
displayed = target.slice(0, ++i); displayed = target.slice(0, ++i);
typeTimer = setTimeout(tick, 26); typeTimer = setTimeout(tick, 26);
} else {
} }
} }
// Defer first tick so no reads happen during the synchronous effect body // Defer first tick so no reads happen during the synchronous effect body
@@ -86,11 +85,11 @@
</script> </script>
<div <div
class="fixed p-2 z-99999 pointer-events-auto rounded-md border" class="pointer-events-auto fixed z-99999 rounded-md border p-2"
style:width="{BUBBLE_WIDTH}px" style:width="{BUBBLE_WIDTH}px"
style:left="{left}px" style:left="{left}px"
style:bottom={bottom} style:bottom
style:top={top} style:top
style:background="var(--color-layer-0)" style:background="var(--color-layer-0)"
style:border-color="var(--color-outline)" style:border-color="var(--color-outline)"
> >
@@ -98,7 +97,10 @@
<!-- Tail pointing up toward avatar --> <!-- Tail pointing up toward avatar -->
<div <div
class="absolute -top-2 h-3.5 w-3.5 rotate-45 border-t border-l" class="absolute -top-2 h-3.5 w-3.5 rotate-45 border-t border-l"
style:left="{Math.min(Math.max(avatarX - left + AVATAR_SIZE / 2 - 25, 12), BUBBLE_WIDTH - 28)}px" style:left="{Math.min(
Math.max(avatarX - left + AVATAR_SIZE / 2 - 25, 12),
BUBBLE_WIDTH - 28
)}px"
style:background="var(--color-layer-0)" style:background="var(--color-layer-0)"
style:border-color="var(--color-outline)" style:border-color="var(--color-outline)"
> >
@@ -106,26 +108,29 @@
{:else} {:else}
<!-- Tail pointing down toward avatar --> <!-- Tail pointing down toward avatar -->
<div <div
class="absolute -bottom-2 h-3.5 w-3.5 rotate-45 border-b border-r" class="absolute -bottom-2 h-3.5 w-3.5 rotate-45 border-r border-b"
style:left="{Math.min(Math.max(avatarX - left + AVATAR_SIZE / 2 - 25, 12), BUBBLE_WIDTH - 28)}px" style:left="{Math.min(
Math.max(avatarX - left + AVATAR_SIZE / 2 - 25, 12),
BUBBLE_WIDTH - 28
)}px"
style:background="var(--color-layer-0)" style:background="var(--color-layer-0)"
style:border-color="var(--color-outline)" style:border-color="var(--color-outline)"
> >
</div> </div>
{/if} {/if}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="mb-2 min-h-[1.4em] text-sm leading-relaxed" style="color: var(--color-text)"> <div class="mb-2 min-h-[1.4em] text-sm leading-relaxed" style="color: var(--color-text)">
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
{@html renderMarkdown(displayed)} {@html renderMarkdown(displayed)}
</div> </div>
{#if choices.length > 0} {#if choices.length > 0}
<div class="flex flex-col gap-1.5"> <div class="flex flex-col gap-1.5">
{#each choices as choice, i} {#each choices as choice, i (choice.label)}
{#if finished} {#if finished}
<button <button
in:fade={{ duration: 200, delay: i * 250 }} in:fade={{ duration: 200, delay: i * 250 }}
class="rounded-lg px-3 py-1.5 text-left text-sm font-medium transition-colors cursor-pointer" class="cursor-pointer rounded-lg px-3 py-1.5 text-left text-sm font-medium transition-colors"
style:background="var(--color-layer-1)" style:background="var(--color-layer-1)"
style:border-color="var(--color-outline)" style:border-color="var(--color-outline)"
style:color="var(--color-text)" style:color="var(--color-text)"
@@ -138,9 +143,9 @@
</div> </div>
{/if} {/if}
<div class="flex items-center justify-between gap-2 mt-2"> <div class="mt-2 flex items-center justify-between gap-2">
<button <button
class="text-xs transition-colors cursor-pointer" class="cursor-pointer text-xs transition-colors"
style="color: var(--color-outline)" style="color: var(--color-outline)"
onclick={onClose} onclick={onClose}
> >
@@ -154,7 +159,7 @@
{/if} {/if}
{#if showNext && finished} {#if showNext && finished}
<button <button
class="rounded-lg px-3 py-1 text-xs font-semibold cursor-pointer transition-colors" class="cursor-pointer rounded-lg px-3 py-1 text-xs font-semibold transition-colors"
style:background="var(--color-outline)" style:background="var(--color-outline)"
style:color="var(--color-layer-0)" style:color="var(--color-layer-0)"
onclick={onNext} onclick={onNext}

74
packages/planty/src/lib/planty-steps.ts
View File

@@ -18,49 +18,49 @@ import type { DialogNode, StepCallback } from './types.js';
* <Planty {config} {steps} /> * <Planty {config} {steps} />
*/ */
export class PlantySteps { export class PlantySteps {
private _before = new Map<string, StepCallback[]>(); private _before = new Map<string, StepCallback[]>();
private _after = new Map<string, StepCallback[]>(); private _after = new Map<string, StepCallback[]>();
/** Register a handler to run before `nodeId` becomes active. Chainable. */ /** Register a handler to run before `nodeId` becomes active. Chainable. */
before(nodeId: string, fn: StepCallback): this { before(nodeId: string, fn: StepCallback): this {
const list = this._before.get(nodeId) ?? []; const list = this._before.get(nodeId) ?? [];
this._before.set(nodeId, [...list, fn]); this._before.set(nodeId, [...list, fn]);
return this; return this;
} }
/** Register a handler to run after the user leaves `nodeId`. Chainable. */ /** Register a handler to run after the user leaves `nodeId`. Chainable. */
after(nodeId: string, fn: StepCallback): this { after(nodeId: string, fn: StepCallback): this {
const list = this._after.get(nodeId) ?? []; const list = this._after.get(nodeId) ?? [];
this._after.set(nodeId, [...list, fn]); this._after.set(nodeId, [...list, fn]);
return this; return this;
} }
/** Remove all handlers for a node (or all nodes if omitted). */ /** Remove all handlers for a node (or all nodes if omitted). */
clear(nodeId?: string) { clear(nodeId?: string) {
if (nodeId) { if (nodeId) {
this._before.delete(nodeId); this._before.delete(nodeId);
this._after.delete(nodeId); this._after.delete(nodeId);
} else { } else {
this._before.clear(); this._before.clear();
this._after.clear(); this._after.clear();
} }
} }
/** @internal — called by Planty */ /** @internal — called by Planty */
async runBefore(nodeId: string, node: DialogNode): Promise<void> { async runBefore(nodeId: string, node: DialogNode): Promise<void> {
for (const fn of this._before.get(nodeId) ?? []) { for (const fn of this._before.get(nodeId) ?? []) {
await fn(nodeId, node); await fn(nodeId, node);
} }
} }
/** @internal — called by Planty */ /** @internal — called by Planty */
async runAfter(nodeId: string, node: DialogNode): Promise<void> { async runAfter(nodeId: string, node: DialogNode): Promise<void> {
for (const fn of this._after.get(nodeId) ?? []) { for (const fn of this._after.get(nodeId) ?? []) {
await fn(nodeId, node); await fn(nodeId, node);
} }
} }
} }
export function createPlantySteps(): PlantySteps { export function createPlantySteps(): PlantySteps {
return new PlantySteps(); return new PlantySteps();
} }

17
packages/planty/src/routes/+page.svelte
View File

@@ -34,7 +34,7 @@
> >
<!-- Header --> <!-- Header -->
<header <header
class="flex items-center gap-4 px-8 py-5 h-12" class="flex h-12 items-center gap-4 px-8 py-5"
style="border-color: var(--color-outline);" style="border-color: var(--color-outline);"
> >
<h1 class="text-xl font-semibold">🌿 Planty</h1> <h1 class="text-xl font-semibold">🌿 Planty</h1>
@@ -75,11 +75,17 @@
<PlantyAvatar x={0} y={0} mood={previewMood} /> <PlantyAvatar x={0} y={0} mood={previewMood} />
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
{#each moods as m} {#each moods as m (m)}
<button <button
class="rounded-lg border px-3 py-1 text-xs transition" class="rounded-lg border px-3 py-1 text-xs transition"
onclick={() => (previewMood = m)} onclick={() => (previewMood = m)}
style="border-color: {previewMood === m ? 'var(--color-selected)' : 'var(--color-outline)'}; color: {previewMood === m ? 'var(--color-selected)' : 'var(--color-text)'}; background: {previewMood === m ? 'var(--color-layer-2)' : 'transparent'};" style="border-color: {previewMood === m
? 'var(--color-selected)'
: 'var(--color-outline)'}; color: {previewMood === m
? 'var(--color-selected)'
: 'var(--color-text)'}; background: {previewMood === m
? 'var(--color-layer-2)'
: 'transparent'};"
> >
{m} {m}
</button> </button>
@@ -95,7 +101,7 @@
style="border-color: var(--color-outline); background-color: var(--color-layer-0);" style="border-color: var(--color-outline); background-color: var(--color-layer-0);"
> >
<span <span
class="text-xs font-semibold uppercase tracking-widest" class="text-xs font-semibold tracking-widest uppercase"
style="color: var(--color-outline);" style="color: var(--color-outline);"
>Parameters</span> >Parameters</span>
<div <div
@@ -117,7 +123,7 @@
Leaf density: 0.6 Leaf density: 0.6
</div> </div>
<span <span
class="mt-2 text-xs font-semibold uppercase tracking-widest" class="mt-2 text-xs font-semibold tracking-widest uppercase"
style="color: var(--color-outline);" style="color: var(--color-outline);"
>Export</span> >Export</span>
<div <div
@@ -139,4 +145,3 @@
}} }}
/> />
{/if} {/if}

3
packages/planty/src/routes/ThemeSelector.svelte
View File

@@ -12,11 +12,8 @@
'custom' 'custom'
]; ];
let { theme = $bindable() } = $props();
let themeIndex = $state(0); let themeIndex = $state(0);
$effect(() => { $effect(() => {
theme = themes[themeIndex];
const classList = document.documentElement.classList; const classList = document.documentElement.classList;
for (const c of classList) { for (const c of classList) {
if (c.startsWith('theme-')) document.documentElement.classList.remove(c); if (c.startsWith('theme-')) document.documentElement.classList.remove(c);

8
packages/planty/src/routes/layout.css
View File

@@ -1,7 +1,7 @@
@import "tailwindcss"; @import 'tailwindcss';
body { body {
color: var(--color-text); color: var(--color-text);
background-color: var(--color-layer-0); background-color: var(--color-layer-0);
margin: 0; margin: 0;
} }

6
packages/planty/static/demo-tutorial.json
View File

@@ -11,9 +11,9 @@
"position": "bottom-right", "position": "bottom-right",
"text": "👋 Hey! I'm Planty — your guide to this app. How would you like me to explain things?", "text": "👋 Hey! I'm Planty — your guide to this app. How would you like me to explain things?",
"choices": [ "choices": [
{ "label": "🤓 Technical — give me the details", "next": "intro_nerd" }, { "label": "🤓 Technical — give me the details", "next": "intro_nerd" },
{ "label": "🌱 Simple — keep it friendly", "next": "intro_simple" }, { "label": "🌱 Simple — keep it friendly", "next": "intro_simple" },
{ "label": "No thanks, skip the tour", "next": null } { "label": "No thanks, skip the tour", "next": null }
] ]
}, },

10
packages/planty/static/favicon.svg
View File

@@ -1 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128">
<title>svelte-logo</title><path
d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116"
style="fill:#ff3e00"
/><path
d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328"
style="fill:#fff"
/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

20
packages/planty/svelte.config.js
View File

@@ -2,16 +2,16 @@ import adapter from '@sveltejs/adapter-auto';
/** @type {import('@sveltejs/kit').Config} */ /** @type {import('@sveltejs/kit').Config} */
const config = { const config = {
compilerOptions: { compilerOptions: {
// Force runes mode for the project, except for libraries. Can be removed in svelte 6. // Force runes mode for the project, except for libraries. Can be removed in svelte 6.
runes: ({ filename }) => (filename.split(/[/\\]/).includes('node_modules') ? undefined : true) runes: ({ filename }) => (filename.split(/[/\\]/).includes('node_modules') ? undefined : true)
}, },
kit: { kit: {
// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list. // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
// If your environment is not supported, or you settled on a specific environment, switch out the adapter. // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
// See https://svelte.dev/docs/kit/adapters for more information about adapters. // See https://svelte.dev/docs/kit/adapters for more information about adapters.
adapter: adapter() adapter: adapter()
} }
}; };
export default config; export default config;

26
packages/planty/tsconfig.json
View File

@@ -1,15 +1,15 @@
{ {
"extends": "./.svelte-kit/tsconfig.json", "extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": { "compilerOptions": {
"rewriteRelativeImportExtensions": true, "rewriteRelativeImportExtensions": true,
"allowJs": true, "allowJs": true,
"checkJs": true, "checkJs": true,
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"resolveJsonModule": true, "resolveJsonModule": true,
"skipLibCheck": true, "skipLibCheck": true,
"sourceMap": true, "sourceMap": true,
"strict": true, "strict": true,
"module": "NodeNext", "module": "NodeNext",
"moduleResolution": "NodeNext" "moduleResolution": "NodeNext"
} }
} }

2
packages/planty/vite.config.ts
View File

@@ -1,5 +1,5 @@
import tailwindcss from '@tailwindcss/vite';
import { sveltekit } from '@sveltejs/kit/vite'; import { sveltekit } from '@sveltejs/kit/vite';
import tailwindcss from '@tailwindcss/vite';
import { defineConfig } from 'vite'; import { defineConfig } from 'vite';
export default defineConfig({ plugins: [tailwindcss(), sveltekit()] }); export default defineConfig({ plugins: [tailwindcss(), sveltekit()] });