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>
<meta charset="utf-8" />
<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" />
%sveltekit.head%
<title>Nodes</title>

2
app/vite.config.ts
View File

@@ -1,10 +1,10 @@
import { sveltekit } from '@sveltejs/kit/vite';
import tailwindcss from '@tailwindcss/vite';
import { playwright } from '@vitest/browser-playwright';
import path from 'path';
import comlink from 'vite-plugin-comlink';
import glsl from 'vite-plugin-glsl';
import wasm from 'vite-plugin-wasm';
import path from 'path';
import { defineConfig } from 'vitest/config';
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 js from '@eslint/js';
import prettier from 'eslint-config-prettier';
import svelte from 'eslint-plugin-svelte';
import { defineConfig } from 'eslint/config';
import globals from 'globals';
import path from 'node:path';
import ts from 'typescript-eslint';
import svelteConfig from './svelte.config.js';
const gitignorePath = path.resolve(import.meta.dirname, '.gitignore');
export default defineConfig(
includeIgnoreFile(gitignorePath),
js.configs.recommended,
ts.configs.recommended,
svelte.configs.recommended,
prettier,
svelte.configs.prettier,
{
languageOptions: { globals: { ...globals.browser, ...globals.node } },
rules: {
// 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
'no-undef': 'off'
}
},
{
files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
languageOptions: {
parserOptions: {
projectService: true,
extraFileExtensions: ['.svelte'],
parser: ts.parser,
svelteConfig
}
}
},
{
// Override or add rule settings here, such as:
// 'svelte/button-has-type': 'error'
rules: {}
}
includeIgnoreFile(gitignorePath),
js.configs.recommended,
ts.configs.recommended,
svelte.configs.recommended,
prettier,
svelte.configs.prettier,
{
languageOptions: { globals: { ...globals.browser, ...globals.node } },
rules: {
// 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
'no-undef': 'off'
}
},
{
files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
languageOptions: {
parserOptions: {
projectService: true,
extraFileExtensions: ['.svelte'],
parser: ts.parser,
svelteConfig
}
}
},
{
// Override or add rule settings here, such as:
// 'svelte/button-has-type': 'error'
rules: {}
}
);

5
packages/planty/package.json
View File

@@ -9,8 +9,9 @@
"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",
"lint": "prettier --check . && eslint .",
"format": "prettier --write ."
"lint": "eslint .",
"format": "dprint fmt -c '../.dprint.jsonc' .",
"format:check": "dprint check -c '../.dprint.jsonc' ."
},
"files": [
"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
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}
export {};

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

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

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

@@ -80,7 +80,7 @@
{#if rect}
<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:left="{rect.left}px"
style:width="{rect.width}px"
@@ -91,7 +91,8 @@
<style>
@keyframes pulse {
0%, 100% {
0%,
100% {
box-shadow:
0 0 0 9999px rgba(0, 0, 0, 0.45),
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;
}
let {
config,
hooks = {},
onStepChange,
onComplete
}: Props = $props();
let { config, hooks = {}, onStepChange, onComplete }: Props = $props();
const AVATAR_SIZE = 80;
const SCREEN_PADDING = 20;
@@ -182,11 +177,7 @@
{#if isActive}
<div class="pointer-events-none fixed inset-0 z-99999">
{#if highlight}
<Highlight
selector={highlight.selector}
hookName={highlight.hookName}
{hooks}
/>
<Highlight selector={highlight.selector} hookName={highlight.hookName} {hooks} />
{/if}
<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(
displayMood === 'talking'
? { px: 0, py: 0 }
: pupilOffset(cursorX, cursorY, 9.5, 30.5)
displayMood === 'talking' ? { px: 0, py: 0 } : pupilOffset(cursorX, cursorY, 9.5, 30.5)
);
const right = $derived(
displayMood === 'talking'
? { px: 0, py: 0 }
: pupilOffset(cursorX, cursorY, 31.5, 35.5)
displayMood === 'talking' ? { px: 0, py: 0 } : pupilOffset(cursorX, cursorY, 31.5, 35.5)
);
</script>
@@ -176,10 +172,10 @@
cursor: grab;
user-select: none;
pointer-events: auto;
filter: drop-shadow(0px 0px 10px black);
filter: drop-shadow(0px 0px 10px black);
transition:
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 {
@@ -189,49 +185,83 @@
/* idle: steady vertical bob */
@keyframes bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
0%,
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 */
@keyframes think {
0%, 100% { transform: rotate(-12deg) translateY(0); }
50% { transform: rotate(-12deg) translateY(-3px); }
0%,
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 */
@keyframes waggle {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-2deg) translateY(-1px); }
75% { transform: rotate(2deg) translateY(1px); }
0%,
100% {
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 */
@keyframes glide {
0%, 100% { transform: translateY(0) rotate(-6deg); }
50% { transform: translateY(-8px) rotate(-4deg); }
0%,
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 ────────────────────────────────────────────────── */
.body {
filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.5));
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));
}
.mood-talking {
.eye-left, .eye-right {
> g {
transition: transform 0.5s ease-in-out;
}
}
.eye-left,
.eye-right {
> g {
transition: transform 0.5s ease-in-out;
}
}
}
/* ── Leaves ──────────────────────────────────────────────────────── */
@@ -246,74 +276,154 @@
/* idle: slow gentle breathing wave */
@keyframes idle-right {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(-9deg); }
0%,
100% {
transform: rotate(0deg);
}
50% {
transform: rotate(-9deg);
}
}
@keyframes idle-left {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(7deg); }
0%,
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 */
@keyframes think-right {
0%, 100% { transform: rotate(-14deg); }
50% { transform: rotate(-10deg); }
0%,
100% {
transform: rotate(-14deg);
}
50% {
transform: rotate(-10deg);
}
}
@keyframes think-left {
0%, 100% { transform: rotate(10deg); }
50% { transform: rotate(7deg); }
0%,
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 */
@keyframes talk-right {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
0%,
100% {
transform: rotate(-2deg);
}
50% {
transform: rotate(2deg);
}
}
@keyframes talk-left {
0%, 100% { transform: rotate(2deg); }
50% { transform: rotate(-2deg); }
0%,
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 */
@keyframes happy-right {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(-18deg); }
0%,
100% {
transform: rotate(0deg);
}
50% {
transform: rotate(-18deg);
}
}
@keyframes happy-left {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(13deg); }
0%,
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 */
@keyframes flap-right {
0%, 100% { transform: rotate(0deg); }
40% { transform: rotate(-40deg); }
0%,
100% {
transform: rotate(0deg);
}
40% {
transform: rotate(-40deg);
}
}
@keyframes flap-left {
0%, 100% { transform: rotate(0deg); }
40% { transform: rotate(26deg); }
0%,
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) ───── */
@keyframes blink {
0%, 93%, 100% { transform: scaleY(1); }
96% { transform: scaleY(0.05); }
0%,
93%,
100% {
transform: scaleY(1);
}
96% {
transform: scaleY(0.05);
}
}
.pupil {
transform-box: fill-box;
transform-origin: center;
animation: blink 4s ease-in-out infinite;
}
.eye-left .pupil { animation-delay: 0s; }
.eye-right .pupil { animation-delay: 0.07s; }
.eye-left .pupil {
animation-delay: 0s;
}
.eye-right .pupil {
animation-delay: 0.07s;
}
</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>'
)
.replaceAll(/\*/, '')
.replaceAll(/\_/, '')
.replaceAll(/_/, '')
.replaceAll(/\n+/g, '<br>');
}
@@ -73,7 +73,6 @@
if (i < target.length) {
displayed = target.slice(0, ++i);
typeTimer = setTimeout(tick, 26);
} else {
}
}
// Defer first tick so no reads happen during the synchronous effect body
@@ -86,11 +85,11 @@
</script>
<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:left="{left}px"
style:bottom={bottom}
style:top={top}
style:bottom
style:top
style:background="var(--color-layer-0)"
style:border-color="var(--color-outline)"
>
@@ -98,7 +97,10 @@
<!-- Tail pointing up toward avatar -->
<div
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:border-color="var(--color-outline)"
>
@@ -106,26 +108,29 @@
{:else}
<!-- Tail pointing down toward avatar -->
<div
class="absolute -bottom-2 h-3.5 w-3.5 rotate-45 border-b border-r"
style:left="{Math.min(Math.max(avatarX - left + AVATAR_SIZE / 2 - 25, 12), BUBBLE_WIDTH - 28)}px"
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:background="var(--color-layer-0)"
style:border-color="var(--color-outline)"
>
</div>
{/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)">
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
{@html renderMarkdown(displayed)}
</div>
{#if choices.length > 0}
<div class="flex flex-col gap-1.5">
{#each choices as choice, i}
{#each choices as choice, i (choice.label)}
{#if finished}
<button
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:border-color="var(--color-outline)"
style:color="var(--color-text)"
@@ -138,9 +143,9 @@
</div>
{/if}
<div class="flex items-center justify-between gap-2 mt-2">
<div class="mt-2 flex items-center justify-between gap-2">
<button
class="text-xs transition-colors cursor-pointer"
class="cursor-pointer text-xs transition-colors"
style="color: var(--color-outline)"
onclick={onClose}
>
@@ -154,7 +159,7 @@
{/if}
{#if showNext && finished}
<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:color="var(--color-layer-0)"
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} />
*/
export class PlantySteps {
private _before = new Map<string, StepCallback[]>();
private _after = new Map<string, StepCallback[]>();
private _before = new Map<string, StepCallback[]>();
private _after = new Map<string, StepCallback[]>();
/** Register a handler to run before `nodeId` becomes active. Chainable. */
before(nodeId: string, fn: StepCallback): this {
const list = this._before.get(nodeId) ?? [];
this._before.set(nodeId, [...list, fn]);
return this;
}
/** Register a handler to run before `nodeId` becomes active. Chainable. */
before(nodeId: string, fn: StepCallback): this {
const list = this._before.get(nodeId) ?? [];
this._before.set(nodeId, [...list, fn]);
return this;
}
/** Register a handler to run after the user leaves `nodeId`. Chainable. */
after(nodeId: string, fn: StepCallback): this {
const list = this._after.get(nodeId) ?? [];
this._after.set(nodeId, [...list, fn]);
return this;
}
/** Register a handler to run after the user leaves `nodeId`. Chainable. */
after(nodeId: string, fn: StepCallback): this {
const list = this._after.get(nodeId) ?? [];
this._after.set(nodeId, [...list, fn]);
return this;
}
/** Remove all handlers for a node (or all nodes if omitted). */
clear(nodeId?: string) {
if (nodeId) {
this._before.delete(nodeId);
this._after.delete(nodeId);
} else {
this._before.clear();
this._after.clear();
}
}
/** Remove all handlers for a node (or all nodes if omitted). */
clear(nodeId?: string) {
if (nodeId) {
this._before.delete(nodeId);
this._after.delete(nodeId);
} else {
this._before.clear();
this._after.clear();
}
}
/** @internal — called by Planty */
async runBefore(nodeId: string, node: DialogNode): Promise<void> {
for (const fn of this._before.get(nodeId) ?? []) {
await fn(nodeId, node);
}
}
/** @internal — called by Planty */
async runBefore(nodeId: string, node: DialogNode): Promise<void> {
for (const fn of this._before.get(nodeId) ?? []) {
await fn(nodeId, node);
}
}
/** @internal — called by Planty */
async runAfter(nodeId: string, node: DialogNode): Promise<void> {
for (const fn of this._after.get(nodeId) ?? []) {
await fn(nodeId, node);
}
}
/** @internal — called by Planty */
async runAfter(nodeId: string, node: DialogNode): Promise<void> {
for (const fn of this._after.get(nodeId) ?? []) {
await fn(nodeId, node);
}
}
}
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
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);"
>
<h1 class="text-xl font-semibold">🌿 Planty</h1>
@@ -75,11 +75,17 @@
<PlantyAvatar x={0} y={0} mood={previewMood} />
</div>
<div class="flex gap-2">
{#each moods as m}
{#each moods as m (m)}
<button
class="rounded-lg border px-3 py-1 text-xs transition"
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}
</button>
@@ -95,7 +101,7 @@
style="border-color: var(--color-outline); background-color: var(--color-layer-0);"
>
<span
class="text-xs font-semibold uppercase tracking-widest"
class="text-xs font-semibold tracking-widest uppercase"
style="color: var(--color-outline);"
>Parameters</span>
<div
@@ -117,7 +123,7 @@
Leaf density: 0.6
</div>
<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);"
>Export</span>
<div
@@ -139,4 +145,3 @@
}}
/>
{/if}

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

@@ -12,11 +12,8 @@
'custom'
];
let { theme = $bindable() } = $props();
let themeIndex = $state(0);
$effect(() => {
theme = themes[themeIndex];
const classList = document.documentElement.classList;
for (const c of classList) {
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 {
color: var(--color-text);
background-color: var(--color-layer-0);
margin: 0;
color: var(--color-text);
background-color: var(--color-layer-0);
margin: 0;
}

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

@@ -11,9 +11,9 @@
"position": "bottom-right",
"text": "👋 Hey! I'm Planty — your guide to this app. How would you like me to explain things?",
"choices": [
{ "label": "🤓 Technical — give me the details", "next": "intro_nerd" },
{ "label": "🌱 Simple — keep it friendly", "next": "intro_simple" },
{ "label": "No thanks, skip the tour", "next": null }
{ "label": "🤓 Technical — give me the details", "next": "intro_nerd" },
{ "label": "🌱 Simple — keep it friendly", "next": "intro_simple" },
{ "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} */
const config = {
compilerOptions: {
// Force runes mode for the project, except for libraries. Can be removed in svelte 6.
runes: ({ filename }) => (filename.split(/[/\\]/).includes('node_modules') ? undefined : true)
},
kit: {
// 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.
// See https://svelte.dev/docs/kit/adapters for more information about adapters.
adapter: adapter()
}
compilerOptions: {
// Force runes mode for the project, except for libraries. Can be removed in svelte 6.
runes: ({ filename }) => (filename.split(/[/\\]/).includes('node_modules') ? undefined : true)
},
kit: {
// 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.
// See https://svelte.dev/docs/kit/adapters for more information about adapters.
adapter: adapter()
}
};
export default config;

26
packages/planty/tsconfig.json
View File

@@ -1,15 +1,15 @@
{
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"rewriteRelativeImportExtensions": true,
"allowJs": true,
"checkJs": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"module": "NodeNext",
"moduleResolution": "NodeNext"
}
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"rewriteRelativeImportExtensions": true,
"allowJs": true,
"checkJs": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"module": "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 tailwindcss from '@tailwindcss/vite';
import { defineConfig } from 'vite';
export default defineConfig({ plugins: [tailwindcss(), sveltekit()] });