rehlert/bea-edit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Features/shadcn #1

Merged
rehlert merged 17 commits from features/shadcn into main 2026-07-22 19:15:48 +00:00
Conversation 0 Commits 17 Files Changed 45
+3573 -397
23 changed files with 3573 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0b032b2cd8 - Show all commits
.idea/ShadcnHelperSettings.xml
Generated
+2615
View File
File diff suppressed because it is too large Load Diff
.idea/workspace.xml
Generated
+41 -19
View File
@@ -3,14 +3,30 @@
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="89f9fc3a-63ad-41cb-8d25-f07df352eb98" name="Changes" comment=""> <list default="true" id="89f9fc3a-63ad-41cb-8d25-f07df352eb98" name="Changes" comment="">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/lib/zip-processing.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/zip-processing.ts" afterDir="false" /> <change beforePath="$PROJECT_DIR$/agents.md" beforeDir="false" afterPath="$PROJECT_DIR$/agents.md" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/pnpm-lock.yaml" beforeDir="false" afterPath="$PROJECT_DIR$/pnpm-lock.yaml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/lib/components/Button.svelte" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/lib/components/Card.svelte" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/lib/components/ProcessedZipArchiveEditor.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/components/ProcessedZipArchiveEditor.svelte" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/lib/components/ZipDropzone.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/components/ZipDropzone.svelte" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/lib/nom-theme.css" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/routes/+page.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/routes/+page.svelte" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/routes/+page.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/routes/+page.svelte" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/routes/layout.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/routes/layout.css" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" /> <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" /> <option name="LAST_RESOLUTION" value="IGNORE" />
</component> </component>
<component name="FileTemplateManagerImpl">
<option name="RECENT_TEMPLATES">
<list>
<option value="CSS File" />
<option value="TypeScript File" />
</list>
</option>
</component>
<component name="Git.Settings"> <component name="Git.Settings">
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" /> <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
</component> </component>
@@ -20,29 +36,33 @@
&quot;fromUser&quot;: false &quot;fromUser&quot;: false
}</component> }</component>
<component name="ProjectId" id="3Ez6dWfFxFKqFN56n3L3nruEC06" /> <component name="ProjectId" id="3Ez6dWfFxFKqFN56n3L3nruEC06" />
<component name="ProjectLevelVcsManager">
<ConfirmationsSetting value="1" id="Add" />
</component>
<component name="ProjectViewState"> <component name="ProjectViewState">
<option name="hideEmptyMiddlePackages" value="true" /> <option name="hideEmptyMiddlePackages" value="true" />
<option name="showLibraryContents" value="true" /> <option name="showLibraryContents" value="true" />
</component> </component>
<component name="PropertiesComponent"><![CDATA[{ <component name="PropertiesComponent">{
"keyToString": { &quot;keyToString&quot;: {
"ModuleVcsDetector.initialDetectionPerformed": "true", &quot;ModuleVcsDetector.initialDetectionPerformed&quot;: &quot;true&quot;,
"RunOnceActivity.ShowReadmeOnStart": "true", &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
"RunOnceActivity.TerminalTabsStorage.copyFrom.TerminalArrangementManager.252": "true", &quot;RunOnceActivity.TerminalTabsStorage.copyFrom.TerminalArrangementManager.252&quot;: &quot;true&quot;,
"RunOnceActivity.cidr.known.project.marker": "true", &quot;RunOnceActivity.cidr.known.project.marker&quot;: &quot;true&quot;,
"RunOnceActivity.git.unshallow": "true", &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
"RunOnceActivity.readMode.enableVisualFormatting": "true", &quot;RunOnceActivity.readMode.enableVisualFormatting&quot;: &quot;true&quot;,
"RunOnceActivity.typescript.service.memoryLimit.init": "true", &quot;RunOnceActivity.typescript.service.memoryLimit.init&quot;: &quot;true&quot;,
"cidr.known.project.marker": "true", &quot;cidr.known.project.marker&quot;: &quot;true&quot;,
"codeWithMe.voiceChat.enabledByDefault": "false", &quot;codeWithMe.voiceChat.enabledByDefault&quot;: &quot;false&quot;,
"git-widget-placeholder": "features/zip-processing", &quot;git-widget-placeholder&quot;: &quot;features/shadcn&quot;,
"last_opened_file_path": "/home/rehlert/repos/juri-merger", &quot;last_opened_file_path&quot;: &quot;/home/rehlert/repos/juri-merger&quot;,
"nodejs_package_manager_path": "pnpm", &quot;list.type.of.created.stylesheet&quot;: &quot;CSS&quot;,
"settings.editor.selected.configurable": "proofread", &quot;nodejs_package_manager_path&quot;: &quot;pnpm&quot;,
"ts.external.directory.path": "/home/rehlert/repos/juri-merger/node_modules/typescript/lib", &quot;settings.editor.selected.configurable&quot;: &quot;preferences.pluginManager&quot;,
"vue.rearranger.settings.migration": "true" &quot;ts.external.directory.path&quot;: &quot;/home/rehlert/repos/juri-merger/node_modules/typescript/lib&quot;,
&quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
} }
}]]></component> }</component>
<component name="TaskManager"> <component name="TaskManager">
<task active="true" id="Default" summary="Default task"> <task active="true" id="Default" summary="Default task">
<changelist id="89f9fc3a-63ad-41cb-8d25-f07df352eb98" name="Changes" comment="" /> <changelist id="89f9fc3a-63ad-41cb-8d25-f07df352eb98" name="Changes" comment="" />
@@ -55,6 +75,8 @@
<workItem from="1781349431536" duration="3602000" /> <workItem from="1781349431536" duration="3602000" />
<workItem from="1781378743498" duration="306000" /> <workItem from="1781378743498" duration="306000" />
<workItem from="1781534483559" duration="2103000" /> <workItem from="1781534483559" duration="2103000" />
<workItem from="1781597500009" duration="2733000" />
<workItem from="1781621908149" duration="4121000" />
</task> </task>
<task id="LOCAL-00001" summary="adapts styling of rvg.legal"> <task id="LOCAL-00001" summary="adapts styling of rvg.legal">
<option name="closed" value="true" /> <option name="closed" value="true" />
components.json
+20
View File
@@ -0,0 +1,20 @@
{
"$schema": "https://shadcn-svelte.com/schema.json",
"tailwind": {
"css": "src/routes/layout.css",
"baseColor": "neutral"
},
"aliases": {
"components": "$lib/components",
"utils": "$lib/utils",
"ui": "$lib/components/ui",
"hooks": "$lib/hooks",
"lib": "$lib"
},
"typescript": true,
"registry": "https://shadcn-svelte.com/registry",
"style": "nova",
"iconLibrary": "lucide",
"menuColor": "default",
"menuAccent": "subtle"
}
package.json
+9
View File
@@ -14,18 +14,27 @@
"format": "prettier --write ." "format": "prettier --write ."
}, },
"devDependencies": { "devDependencies": {
"@fontsource-variable/geist": "^5.2.9",
"@lucide/svelte": "^1.18.0",
"@sveltejs/adapter-auto": "^7.0.1", "@sveltejs/adapter-auto": "^7.0.1",
"@sveltejs/kit": "^2.63.0", "@sveltejs/kit": "^2.63.0",
"@sveltejs/vite-plugin-svelte": "^7.1.2", "@sveltejs/vite-plugin-svelte": "^7.1.2",
"@tailwindcss/forms": "^0.5.11", "@tailwindcss/forms": "^0.5.11",
"@tailwindcss/typography": "^0.5.19", "@tailwindcss/typography": "^0.5.19",
"@tailwindcss/vite": "^4.3.0", "@tailwindcss/vite": "^4.3.0",
"bits-ui": "2.18.1",
"class-variance-authority": "0.7.1",
"clsx": "2.1.1",
"prettier": "^3.8.3", "prettier": "^3.8.3",
"prettier-plugin-svelte": "^4.1.0", "prettier-plugin-svelte": "^4.1.0",
"prettier-plugin-tailwindcss": "^0.8.0", "prettier-plugin-tailwindcss": "^0.8.0",
"shadcn-svelte": "1.3.0",
"svelte": "^5.56.1", "svelte": "^5.56.1",
"svelte-check": "^4.6.0", "svelte-check": "^4.6.0",
"tailwind-merge": "3.6.0",
"tailwind-variants": "^3.2.2",
"tailwindcss": "^4.3.0", "tailwindcss": "^4.3.0",
"tw-animate-css": "^1.4.0",
"typescript": "^6.0.3", "typescript": "^6.0.3",
"vite": "^8.0.16" "vite": "^8.0.16"
}, },
pnpm-lock.yaml
Generated
+216 -2
View File
@@ -18,6 +18,12 @@ importers:
specifier: ^6.0.227 specifier: ^6.0.227
version: 6.0.227 version: 6.0.227
devDependencies: devDependencies:
'@fontsource-variable/geist':
specifier: ^5.2.9
version: 5.2.9
'@lucide/svelte':
specifier: ^1.18.0
version: 1.18.0(svelte@5.56.3)
'@sveltejs/adapter-auto': '@sveltejs/adapter-auto':
specifier: ^7.0.1 specifier: ^7.0.1
version: 7.0.1(@sveltejs/kit@2.64.0(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3)(typescript@6.0.3)(vite@8.0.16(jiti@2.7.0))) version: 7.0.1(@sveltejs/kit@2.64.0(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3)(typescript@6.0.3)(vite@8.0.16(jiti@2.7.0)))
@@ -36,6 +42,15 @@ importers:
'@tailwindcss/vite': '@tailwindcss/vite':
specifier: ^4.3.0 specifier: ^4.3.0
version: 4.3.0(vite@8.0.16(jiti@2.7.0)) version: 4.3.0(vite@8.0.16(jiti@2.7.0))
bits-ui:
specifier: 2.18.1
version: 2.18.1(@internationalized/date@3.12.2)(@sveltejs/kit@2.64.0(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3)(typescript@6.0.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3)
class-variance-authority:
specifier: 0.7.1
version: 0.7.1
clsx:
specifier: 2.1.1
version: 2.1.1
prettier: prettier:
specifier: ^3.8.3 specifier: ^3.8.3
version: 3.8.4 version: 3.8.4
@@ -45,15 +60,27 @@ importers:
prettier-plugin-tailwindcss: prettier-plugin-tailwindcss:
specifier: ^0.8.0 specifier: ^0.8.0
version: 0.8.0(prettier-plugin-svelte@4.1.0(prettier@3.8.4)(svelte@5.56.3))(prettier@3.8.4) version: 0.8.0(prettier-plugin-svelte@4.1.0(prettier@3.8.4)(svelte@5.56.3))(prettier@3.8.4)
shadcn-svelte:
specifier: 1.3.0
version: 1.3.0(svelte@5.56.3)
svelte: svelte:
specifier: ^5.56.1 specifier: ^5.56.1
version: 5.56.3 version: 5.56.3
svelte-check: svelte-check:
specifier: ^4.6.0 specifier: ^4.6.0
version: 4.6.0(picomatch@4.0.4)(svelte@5.56.3)(typescript@6.0.3) version: 4.6.0(picomatch@4.0.4)(svelte@5.56.3)(typescript@6.0.3)
tailwind-merge:
specifier: 3.6.0
version: 3.6.0
tailwind-variants:
specifier: ^3.2.2
version: 3.2.2(tailwind-merge@3.6.0)(tailwindcss@4.3.0)
tailwindcss: tailwindcss:
specifier: ^4.3.0 specifier: ^4.3.0
version: 4.3.0 version: 4.3.0
tw-animate-css:
specifier: ^1.4.0
version: 1.4.0
typescript: typescript:
specifier: ^6.0.3 specifier: ^6.0.3
version: 6.0.3 version: 6.0.3
@@ -72,6 +99,21 @@ packages:
'@emnapi/wasi-threads@1.2.1': '@emnapi/wasi-threads@1.2.1':
resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==} resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
'@floating-ui/core@1.7.5':
resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==}
'@floating-ui/dom@1.7.6':
resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==}
'@floating-ui/utils@0.2.11':
resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
'@fontsource-variable/geist@5.2.9':
resolution: {integrity: sha512-TP+QSBG3wxKGPE33CbMy/L0Nu3qvJ6Fy81Yc4LnQ95xH+i+cfEp8fyU8/kfV14YwszxIFPhnoMTbjL71waVpyQ==}
'@internationalized/date@3.12.2':
resolution: {integrity: sha512-FY1Y+H64NDs+HAF6omlnWxm3mEpfgaCSWtL5l551ZZfImA+kGjPFgrnJrGjH6lfmLL0g8Z/mBu1R3kufeCp6Jw==}
'@jridgewell/gen-mapping@0.3.13': '@jridgewell/gen-mapping@0.3.13':
resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==} resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
@@ -88,6 +130,11 @@ packages:
'@jridgewell/trace-mapping@0.3.31': '@jridgewell/trace-mapping@0.3.31':
resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==} resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
'@lucide/svelte@1.18.0':
resolution: {integrity: sha512-S1cjiJflMLIirDZtZ8ou2Vy0xMrOqEQzYzDo29AUxoJiOjUfMHUeClvprJsGUEr60RYDJzEgkjSkWm1nlN9iyQ==}
peerDependencies:
svelte: ^5
'@napi-rs/canvas-android-arm64@1.0.0': '@napi-rs/canvas-android-arm64@1.0.0':
resolution: {integrity: sha512-3hNKJObUK7JsCF9aJlVCs1J0/KE/gGfZNeK8MO1ge6bB3aicr5walGme9t9No1f/oyk9GgvdAT/rjSdsx3gbIw==} resolution: {integrity: sha512-3hNKJObUK7JsCF9aJlVCs1J0/KE/gGfZNeK8MO1ge6bB3aicr5walGme9t9No1f/oyk9GgvdAT/rjSdsx3gbIw==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
@@ -319,6 +366,9 @@ packages:
svelte: ^5.46.4 svelte: ^5.46.4
vite: ^8.0.0-beta.7 || ^8.0.0 vite: ^8.0.0-beta.7 || ^8.0.0
'@swc/helpers@0.5.23':
resolution: {integrity: sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==}
'@tailwindcss/forms@0.5.11': '@tailwindcss/forms@0.5.11':
resolution: {integrity: sha512-h9wegbZDPurxG22xZSoWtdzc41/OlNEUQERNqI/0fOwa2aVlWGu7C35E/x6LDyD3lgtztFSSjKZyuVM0hxhbgA==} resolution: {integrity: sha512-h9wegbZDPurxG22xZSoWtdzc41/OlNEUQERNqI/0fOwa2aVlWGu7C35E/x6LDyD3lgtztFSSjKZyuVM0hxhbgA==}
peerDependencies: peerDependencies:
@@ -448,14 +498,28 @@ packages:
resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==} resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
engines: {node: '>= 0.4'} engines: {node: '>= 0.4'}
bits-ui@2.18.1:
resolution: {integrity: sha512-KkemzKFH4T3gt3H+P86JcnAWExjByv/6vlwjm/BoCwTPHu03yiCdxbghdJLvFReQTe0acCAiRcKfmixxD6XvlA==}
engines: {node: '>=20'}
peerDependencies:
'@internationalized/date': ^3.8.1
svelte: ^5.33.0
chokidar@4.0.3: chokidar@4.0.3:
resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==} resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
engines: {node: '>= 14.16.0'} engines: {node: '>= 14.16.0'}
class-variance-authority@0.7.1:
resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
clsx@2.1.1: clsx@2.1.1:
resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
engines: {node: '>=6'} engines: {node: '>=6'}
commander@14.0.3:
resolution: {integrity: sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==}
engines: {node: '>=20'}
cookie@0.6.0: cookie@0.6.0:
resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==} resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
engines: {node: '>= 0.6'} engines: {node: '>= 0.6'}
@@ -469,6 +533,10 @@ packages:
resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==} resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
engines: {node: '>=0.10.0'} engines: {node: '>=0.10.0'}
dequal@2.0.3:
resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
engines: {node: '>=6'}
detect-libc@2.1.2: detect-libc@2.1.2:
resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==} resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
engines: {node: '>=8'} engines: {node: '>=8'}
@@ -511,6 +579,9 @@ packages:
graceful-fs@4.2.11: graceful-fs@4.2.11:
resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==} resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
inline-style-parser@0.2.7:
resolution: {integrity: sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==}
is-reference@3.0.3: is-reference@3.0.3:
resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==} resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==}
@@ -599,6 +670,10 @@ packages:
locate-character@3.0.0: locate-character@3.0.0:
resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==} resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
lz-string@1.5.0:
resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
hasBin: true
magic-string@0.30.21: magic-string@0.30.21:
resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==} resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
@@ -619,6 +694,9 @@ packages:
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
hasBin: true hasBin: true
node-fetch-native@1.6.7:
resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==}
obug@2.1.2: obug@2.1.2:
resolution: {integrity: sha512-AWGB9WFcRXOQs48Z/udjI5ZcZMHXwX8XPByNpOydgcGsDLIzjGizhoMWJyKAWze7AVW/2W1i+/gPX4YtKe5cyg==} resolution: {integrity: sha512-AWGB9WFcRXOQs48Z/udjI5ZcZMHXwX8XPByNpOydgcGsDLIzjGizhoMWJyKAWze7AVW/2W1i+/gPX4YtKe5cyg==}
engines: {node: '>=12.20.0'} engines: {node: '>=12.20.0'}
@@ -724,6 +802,15 @@ packages:
engines: {node: ^20.19.0 || >=22.12.0} engines: {node: ^20.19.0 || >=22.12.0}
hasBin: true hasBin: true
runed@0.35.1:
resolution: {integrity: sha512-2F4Q/FZzbeJTFdIS/PuOoPRSm92sA2LhzTnv6FXhCoENb3huf5+fDuNOg1LNvGOouy3u/225qxmuJvcV3IZK5Q==}
peerDependencies:
'@sveltejs/kit': ^2.21.0
svelte: ^5.7.0
peerDependenciesMeta:
'@sveltejs/kit':
optional: true
sade@1.8.1: sade@1.8.1:
resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==} resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
engines: {node: '>=6'} engines: {node: '>=6'}
@@ -731,6 +818,12 @@ packages:
set-cookie-parser@3.1.0: set-cookie-parser@3.1.0:
resolution: {integrity: sha512-kjnC1DXBHcxaOaOXBHBeRtltsDG2nUiUni+jP92M9gYdW12rsmx92UsfpH7o5tDRs7I1ZZPSQJQGv3UaRfCiuw==} resolution: {integrity: sha512-kjnC1DXBHcxaOaOXBHBeRtltsDG2nUiUni+jP92M9gYdW12rsmx92UsfpH7o5tDRs7I1ZZPSQJQGv3UaRfCiuw==}
shadcn-svelte@1.3.0:
resolution: {integrity: sha512-Pd4ICWTkTks/b2YU4c9vF2XsX1x5HFPRl5bKszS1LcnWS83x+7T4WiIvbWz8Qh9knkcGZ+SCz1+Dmhdq+AYooA==}
hasBin: true
peerDependencies:
svelte: ^5.0.0
sirv@3.0.2: sirv@3.0.2:
resolution: {integrity: sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==} resolution: {integrity: sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==}
engines: {node: '>=18'} engines: {node: '>=18'}
@@ -739,6 +832,9 @@ packages:
resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
engines: {node: '>=0.10.0'} engines: {node: '>=0.10.0'}
style-to-object@1.0.14:
resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==}
svelte-check@4.6.0: svelte-check@4.6.0:
resolution: {integrity: sha512-KhVnDFDSid57mmZtHz8gfW8AAGylOZ0vPnOIzVmAL+urzwK8sBYXRss953gD8T0OdgAQ11mdWhE6uadmtOz8TQ==} resolution: {integrity: sha512-KhVnDFDSid57mmZtHz8gfW8AAGylOZ0vPnOIzVmAL+urzwK8sBYXRss953gD8T0OdgAQ11mdWhE6uadmtOz8TQ==}
engines: {node: '>= 18.0.0'} engines: {node: '>= 18.0.0'}
@@ -747,10 +843,32 @@ packages:
svelte: ^4.0.0 || ^5.0.0-next.0 svelte: ^4.0.0 || ^5.0.0-next.0
typescript: '>=5.0.0' typescript: '>=5.0.0'
svelte-toolbelt@0.10.6:
resolution: {integrity: sha512-YWuX+RE+CnWYx09yseAe4ZVMM7e7GRFZM6OYWpBKOb++s+SQ8RBIMMe+Bs/CznBMc0QPLjr+vDBxTAkozXsFXQ==}
engines: {node: '>=18', pnpm: '>=8.7.0'}
peerDependencies:
svelte: ^5.30.2
svelte@5.56.3: svelte@5.56.3:
resolution: {integrity: sha512-w7JvrM5IFl5cmfbY0TLik9o7mjRUJmRMhOR51tBPu708Gr/MjbGs7VnJnr/B0CaXeI4vtnOh7RKxDr0cwhMdDA==} resolution: {integrity: sha512-w7JvrM5IFl5cmfbY0TLik9o7mjRUJmRMhOR51tBPu708Gr/MjbGs7VnJnr/B0CaXeI4vtnOh7RKxDr0cwhMdDA==}
engines: {node: '>=18'} engines: {node: '>=18'}
tabbable@6.4.0:
resolution: {integrity: sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==}
tailwind-merge@3.6.0:
resolution: {integrity: sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==}
tailwind-variants@3.2.2:
resolution: {integrity: sha512-Mi4kHeMTLvKlM98XPnK+7HoBPmf4gygdFmqQPaDivc3DpYS6aIY6KiG/PgThrGvii5YZJqRsPz0aPyhoFzmZgg==}
engines: {node: '>=16.x', pnpm: '>=7.x'}
peerDependencies:
tailwind-merge: '>=3.0.0'
tailwindcss: '*'
peerDependenciesMeta:
tailwind-merge:
optional: true
tailwindcss@4.3.0: tailwindcss@4.3.0:
resolution: {integrity: sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==} resolution: {integrity: sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==}
@@ -772,6 +890,9 @@ packages:
tslib@2.8.1: tslib@2.8.1:
resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==} resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
tw-animate-css@1.4.0:
resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==}
typescript@6.0.3: typescript@6.0.3:
resolution: {integrity: sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==} resolution: {integrity: sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==}
engines: {node: '>=14.17'} engines: {node: '>=14.17'}
@@ -852,6 +973,23 @@ snapshots:
tslib: 2.8.1 tslib: 2.8.1
optional: true optional: true
'@floating-ui/core@1.7.5':
dependencies:
'@floating-ui/utils': 0.2.11
'@floating-ui/dom@1.7.6':
dependencies:
'@floating-ui/core': 1.7.5
'@floating-ui/utils': 0.2.11
'@floating-ui/utils@0.2.11': {}
'@fontsource-variable/geist@5.2.9': {}
'@internationalized/date@3.12.2':
dependencies:
'@swc/helpers': 0.5.23
'@jridgewell/gen-mapping@0.3.13': '@jridgewell/gen-mapping@0.3.13':
dependencies: dependencies:
'@jridgewell/sourcemap-codec': 1.5.5 '@jridgewell/sourcemap-codec': 1.5.5
@@ -871,6 +1009,10 @@ snapshots:
'@jridgewell/resolve-uri': 3.1.2 '@jridgewell/resolve-uri': 3.1.2
'@jridgewell/sourcemap-codec': 1.5.5 '@jridgewell/sourcemap-codec': 1.5.5
'@lucide/svelte@1.18.0(svelte@5.56.3)':
dependencies:
svelte: 5.56.3
'@napi-rs/canvas-android-arm64@1.0.0': '@napi-rs/canvas-android-arm64@1.0.0':
optional: true optional: true
@@ -1030,6 +1172,10 @@ snapshots:
vite: 8.0.16(jiti@2.7.0) vite: 8.0.16(jiti@2.7.0)
vitefu: 1.1.3(vite@8.0.16(jiti@2.7.0)) vitefu: 1.1.3(vite@8.0.16(jiti@2.7.0))
'@swc/helpers@0.5.23':
dependencies:
tslib: 2.8.1
'@tailwindcss/forms@0.5.11(tailwindcss@4.3.0)': '@tailwindcss/forms@0.5.11(tailwindcss@4.3.0)':
dependencies: dependencies:
mini-svg-data-uri: 1.4.4 mini-svg-data-uri: 1.4.4
@@ -1125,18 +1271,39 @@ snapshots:
axobject-query@4.1.0: {} axobject-query@4.1.0: {}
bits-ui@2.18.1(@internationalized/date@3.12.2)(@sveltejs/kit@2.64.0(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3)(typescript@6.0.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3):
dependencies:
'@floating-ui/core': 1.7.5
'@floating-ui/dom': 1.7.6
'@internationalized/date': 3.12.2
esm-env: 1.2.2
runed: 0.35.1(@sveltejs/kit@2.64.0(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3)(typescript@6.0.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3)
svelte: 5.56.3
svelte-toolbelt: 0.10.6(@sveltejs/kit@2.64.0(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3)(typescript@6.0.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3)
tabbable: 6.4.0
transitivePeerDependencies:
- '@sveltejs/kit'
chokidar@4.0.3: chokidar@4.0.3:
dependencies: dependencies:
readdirp: 4.1.2 readdirp: 4.1.2
class-variance-authority@0.7.1:
dependencies:
clsx: 2.1.1
clsx@2.1.1: {} clsx@2.1.1: {}
commander@14.0.3: {}
cookie@0.6.0: {} cookie@0.6.0: {}
cssesc@3.0.0: {} cssesc@3.0.0: {}
deepmerge@4.3.1: {} deepmerge@4.3.1: {}
dequal@2.0.3: {}
detect-libc@2.1.2: {} detect-libc@2.1.2: {}
devalue@5.8.1: {} devalue@5.8.1: {}
@@ -1163,6 +1330,8 @@ snapshots:
graceful-fs@4.2.11: {} graceful-fs@4.2.11: {}
inline-style-parser@0.2.7: {}
is-reference@3.0.3: is-reference@3.0.3:
dependencies: dependencies:
'@types/estree': 1.0.9 '@types/estree': 1.0.9
@@ -1222,6 +1391,8 @@ snapshots:
locate-character@3.0.0: {} locate-character@3.0.0: {}
lz-string@1.5.0: {}
magic-string@0.30.21: magic-string@0.30.21:
dependencies: dependencies:
'@jridgewell/sourcemap-codec': 1.5.5 '@jridgewell/sourcemap-codec': 1.5.5
@@ -1234,6 +1405,8 @@ snapshots:
nanoid@3.3.12: {} nanoid@3.3.12: {}
node-fetch-native@1.6.7: {}
obug@2.1.2: {} obug@2.1.2: {}
pako@1.0.11: {} pako@1.0.11: {}
@@ -1300,12 +1473,29 @@ snapshots:
'@rolldown/binding-win32-arm64-msvc': 1.0.3 '@rolldown/binding-win32-arm64-msvc': 1.0.3
'@rolldown/binding-win32-x64-msvc': 1.0.3 '@rolldown/binding-win32-x64-msvc': 1.0.3
runed@0.35.1(@sveltejs/kit@2.64.0(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3)(typescript@6.0.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3):
dependencies:
dequal: 2.0.3
esm-env: 1.2.2
lz-string: 1.5.0
svelte: 5.56.3
optionalDependencies:
'@sveltejs/kit': 2.64.0(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3)(typescript@6.0.3)(vite@8.0.16(jiti@2.7.0))
sade@1.8.1: sade@1.8.1:
dependencies: dependencies:
mri: 1.2.0 mri: 1.2.0
set-cookie-parser@3.1.0: {} set-cookie-parser@3.1.0: {}
shadcn-svelte@1.3.0(svelte@5.56.3):
dependencies:
commander: 14.0.3
node-fetch-native: 1.6.7
postcss: 8.5.15
svelte: 5.56.3
tailwind-merge: 3.6.0
sirv@3.0.2: sirv@3.0.2:
dependencies: dependencies:
'@polka/url': 1.0.0-next.29 '@polka/url': 1.0.0-next.29
@@ -1314,6 +1504,10 @@ snapshots:
source-map-js@1.2.1: {} source-map-js@1.2.1: {}
style-to-object@1.0.14:
dependencies:
inline-style-parser: 0.2.7
svelte-check@4.6.0(picomatch@4.0.4)(svelte@5.56.3)(typescript@6.0.3): svelte-check@4.6.0(picomatch@4.0.4)(svelte@5.56.3)(typescript@6.0.3):
dependencies: dependencies:
'@jridgewell/trace-mapping': 0.3.31 '@jridgewell/trace-mapping': 0.3.31
@@ -1327,6 +1521,15 @@ snapshots:
transitivePeerDependencies: transitivePeerDependencies:
- picomatch - picomatch
svelte-toolbelt@0.10.6(@sveltejs/kit@2.64.0(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3)(typescript@6.0.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3):
dependencies:
clsx: 2.1.1
runed: 0.35.1(@sveltejs/kit@2.64.0(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3)(typescript@6.0.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3)
style-to-object: 1.0.14
svelte: 5.56.3
transitivePeerDependencies:
- '@sveltejs/kit'
svelte@5.56.3: svelte@5.56.3:
dependencies: dependencies:
'@jridgewell/remapping': 2.3.5 '@jridgewell/remapping': 2.3.5
@@ -1348,6 +1551,16 @@ snapshots:
transitivePeerDependencies: transitivePeerDependencies:
- '@typescript-eslint/types' - '@typescript-eslint/types'
tabbable@6.4.0: {}
tailwind-merge@3.6.0: {}
tailwind-variants@3.2.2(tailwind-merge@3.6.0)(tailwindcss@4.3.0):
dependencies:
tailwindcss: 4.3.0
optionalDependencies:
tailwind-merge: 3.6.0
tailwindcss@4.3.0: {} tailwindcss@4.3.0: {}
tapable@2.3.3: {} tapable@2.3.3: {}
@@ -1361,8 +1574,9 @@ snapshots:
tslib@1.14.1: {} tslib@1.14.1: {}
tslib@2.8.1: tslib@2.8.1: {}
optional: true
tw-animate-css@1.4.0: {}
typescript@6.0.3: {} typescript@6.0.3: {}
src/lib/actions/ripple.ts
+31
View File
@@ -0,0 +1,31 @@
export function ripple(node: HTMLElement) {
function handleClick(event: MouseEvent) {
const circle = document.createElement("span");
const rect = node.getBoundingClientRect();
const size = Math.max(rect.width, rect.height);
circle.style.width = `${size}px`;
circle.style.height = `${size}px`;
circle.style.left = `${event.clientX - rect.left - size / 2}px`;
circle.style.top = `${event.clientY - rect.top - size / 2}px`;
circle.className =
"absolute rounded-full bg-white/30 animate-ripple pointer-events-none";
node.appendChild(circle);
circle.addEventListener("animationend", () => {
circle.remove();
});
}
node.addEventListener("click", handleClick);
return {
destroy() {
node.removeEventListener("click", handleClick);
}
};
}
src/lib/components/Button.svelte
-38
View File
@@ -1,38 +0,0 @@
<script lang="ts">
// Define the types for your props
type ButtonType = 'button' | 'submit' | 'reset'
type ButtonVariant = 'primary' | 'secondary'
// Define the props object including the Snippet for children
let {
type = 'button',
disabled = false,
variant = 'primary',
children
}: {
type?: ButtonType;
disabled?: boolean;
variant?: ButtonVariant
children: import('svelte').Snippet
} = $props();
const getBgColor = (variant: ButtonVariant) => {
return variant === 'primary' ? '#122f62' : 'transparent'
}
const getTextColor = (variant: ButtonVariant) => {
return variant === 'primary' ? 'white': 'primary-900'
}
let bgColor = $derived(getBgColor(variant))
let textColor = $derived(getTextColor(variant))
</script>
<button
type="{type}"
class="rounded-container not-disabled:bg-[{bgColor}] disabled:bg-[#0000001f] not-disabled:text-{textColor} disabled:text-[#00000042] whitespace-nowrap text-center text-[14px] leading-9 font-bold px-4 py-0 focus:outline-none focus:ring-2 focus:ring-primary-300 shadow-sm"
disabled={disabled}
>
{@render children()}
</button>
src/lib/components/Card.svelte
-23
View File
@@ -1,23 +0,0 @@
<script lang="ts">
import type {Snippet} from "svelte";
type Props = {
title?: Snippet
content?: Snippet
footer?: Snippet
class?: string
}
let {title, content, footer, class: className = ""}: Props = $props()
</script>
<div class="bg-white rounded-2xl shadow-sm py-2 px-2 {className}">
{#if title}
<header>{@render title()}</header>
{/if}
{#if content}
<main class="flex grow items-center">{@render content()}</main>
{/if}
{#if footer}
<footer>{@render footer()}</footer>
{/if}
</div>
src/lib/components/ProcessedZipArchiveEditor.svelte
+175 -171
View File
@@ -1,200 +1,204 @@
<script lang="ts"> <script lang="ts">
import AttachmentPreview from "$lib/components/AttachmentPreview.svelte"; import AttachmentPreview from '$lib/components/AttachmentPreview.svelte';
import { mergeProcessedZipArchive, type ProcessedZipArchive, type ZipAttachment } from "$lib/zip-processing"; import Button from '$lib/components/ui/button.svelte';
import {
mergeProcessedZipArchive,
type ProcessedZipArchive,
type ZipAttachment
} from '$lib/zip-processing';
type Props = { type Props = {
archive: ProcessedZipArchive; archive: ProcessedZipArchive;
thumbnailWidth: number; thumbnailWidth: number;
onArchiveChange?: (archive: ProcessedZipArchive) => void; onArchiveChange?: (archive: ProcessedZipArchive) => void;
}; };
let { let { archive, thumbnailWidth = 200, onArchiveChange = () => {} }: Props = $props();
archive,
thumbnailWidth = 200,
onArchiveChange = () => {
}
}: Props = $props();
let attachments = $state<ZipAttachment[]>([]); let attachments = $state<ZipAttachment[]>([]);
let archiveName = $state(""); let archiveName = $state('');
let dragIndex = $state<number | null>(null); let dragIndex = $state<number | null>(null);
let dropIndex = $state<number | null>(null); let dropIndex = $state<number | null>(null);
let isMerging = $state(false); let isMerging = $state(false);
let mergeError = $state<string | null>(null); let mergeError = $state<string | null>(null);
const toArrayBuffer = (bytes: Uint8Array) => { const toArrayBuffer = (bytes: Uint8Array) => {
const copy = new Uint8Array(bytes.byteLength); const copy = new Uint8Array(bytes.byteLength);
copy.set(bytes); copy.set(bytes);
return copy.buffer; return copy.buffer;
}; };
$effect(() => { $effect(() => {
archiveName = archive.name; archiveName = archive.name;
attachments = archive.attachments.map((attachment) => ({...attachment})); attachments = archive.attachments.map((attachment) => ({ ...attachment }));
}); });
const emitArchiveChange = () => { const emitArchiveChange = () => {
onArchiveChange({ onArchiveChange({
...archive, ...archive,
name: archiveName, name: archiveName,
attachments: attachments.map((attachment) => ({...attachment})), attachments: attachments.map((attachment) => ({ ...attachment }))
}); });
}; };
const downloadMergedPdf = async () => { const downloadMergedPdf = async () => {
if (attachments.length === 0 || isMerging) { if (attachments.length === 0 || isMerging) {
return; return;
} }
isMerging = true; isMerging = true;
mergeError = null; mergeError = null;
try { try {
const mergedBytes = await mergeProcessedZipArchive({ const mergedBytes = await mergeProcessedZipArchive({
...archive, ...archive,
name: archiveName, name: archiveName,
attachments: attachments.map((attachment) => ({...attachment})) attachments: attachments.map((attachment) => ({ ...attachment }))
}); });
const pdfBlob = new Blob([toArrayBuffer(mergedBytes)], {type: "application/pdf"}); const pdfBlob = new Blob([toArrayBuffer(mergedBytes)], { type: 'application/pdf' });
const objectUrl = URL.createObjectURL(pdfBlob); const objectUrl = URL.createObjectURL(pdfBlob);
const downloadLink = document.createElement("a"); const downloadLink = document.createElement('a');
downloadLink.href = objectUrl; downloadLink.href = objectUrl;
downloadLink.download = archiveName.toLowerCase().endsWith(".pdf") ? archiveName : `${archiveName}.pdf`; downloadLink.download = archiveName.toLowerCase().endsWith('.pdf')
downloadLink.rel = "noopener"; ? archiveName
downloadLink.click(); : `${archiveName}.pdf`;
window.setTimeout(() => URL.revokeObjectURL(objectUrl), 1000); downloadLink.rel = 'noopener';
} catch (error) { downloadLink.click();
console.error(`Failed to merge archive ${archive.name}`, error); window.setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
mergeError = "PDF konnte nicht erstellt werden."; } catch (error) {
} finally { console.error(`Failed to merge archive ${archive.name}`, error);
isMerging = false; mergeError = 'PDF konnte nicht erstellt werden.';
} } finally {
}; isMerging = false;
}
};
const moveAttachment = (fromIndex: number, toIndex: number) => { const moveAttachment = (fromIndex: number, toIndex: number) => {
if ( if (
fromIndex === toIndex || fromIndex === toIndex ||
fromIndex < 0 || fromIndex < 0 ||
toIndex < 0 || toIndex < 0 ||
fromIndex >= attachments.length || fromIndex >= attachments.length ||
toIndex >= attachments.length toIndex >= attachments.length
) { ) {
return; return;
} }
const nextAttachments = [...attachments]; const nextAttachments = [...attachments];
const [movedAttachment] = nextAttachments.splice(fromIndex, 1); const [movedAttachment] = nextAttachments.splice(fromIndex, 1);
nextAttachments.splice(toIndex, 0, movedAttachment); nextAttachments.splice(toIndex, 0, movedAttachment);
attachments = nextAttachments; attachments = nextAttachments;
emitArchiveChange(); emitArchiveChange();
}; };
const handleDragStart = (index: number, event: DragEvent) => { const handleDragStart = (index: number, event: DragEvent) => {
dragIndex = index; dragIndex = index;
dropIndex = index; dropIndex = index;
if (event.dataTransfer) { if (event.dataTransfer) {
event.dataTransfer.effectAllowed = "move"; event.dataTransfer.effectAllowed = 'move';
event.dataTransfer.setData("text/plain", String(index)); event.dataTransfer.setData('text/plain', String(index));
} }
}; };
const handleDragOver = (index: number, event: DragEvent) => { const handleDragOver = (index: number, event: DragEvent) => {
event.preventDefault(); event.preventDefault();
dropIndex = index; dropIndex = index;
}; };
const handleDrop = (index: number, event: DragEvent) => { const handleDrop = (index: number, event: DragEvent) => {
event.preventDefault(); event.preventDefault();
const dataTransferIndex = Number(event.dataTransfer?.getData("text/plain")); const dataTransferIndex = Number(event.dataTransfer?.getData('text/plain'));
const fromIndex = Number.isFinite(dataTransferIndex) ? dataTransferIndex : dragIndex; const fromIndex = Number.isFinite(dataTransferIndex) ? dataTransferIndex : dragIndex;
if (fromIndex === null) { if (fromIndex === null) {
return; return;
} }
moveAttachment(fromIndex, index); moveAttachment(fromIndex, index);
dragIndex = null; dragIndex = null;
dropIndex = null; dropIndex = null;
}; };
const handleDragEnd = () => { const handleDragEnd = () => {
dragIndex = null; dragIndex = null;
dropIndex = null; dropIndex = null;
}; };
</script> </script>
<section class="flex flex-col gap-4 rounded-2xl border border-primary-100 bg-white px-4 py-4 shadow-sm"> <section
<header class="flex flex-wrap items-baseline justify-between gap-2"> class="flex flex-col gap-4 rounded-2xl border border-primary-100 bg-white px-4 py-4 shadow-sm"
<div class="min-w-0 flex-1"> >
<label class="block min-w-0"> <header class="flex flex-wrap items-baseline justify-between gap-2 text-primary">
<span class="sr-only">Archivname</span> <div class="min-w-0 flex-1">
<input <label class="block min-w-0">
class="w-full max-w-xl rounded-md border border-primary-200 bg-white px-3 py-2 text-[16px] font-bold text-primary-900 outline-none transition focus:border-primary-400 focus:ring-2 focus:ring-primary-200" <span class="sr-only">Archivname</span>
type="text" <input
value={archiveName} class="w-full max-w-xl rounded-md border border-primary-200 bg-white px-3 py-2 text-[16px] font-bold text-primary-900 outline-none transition focus:border-primary-400 focus:ring-2 focus:ring-primary-200"
oninput={(event) => { type="text"
archiveName = (event.currentTarget as HTMLInputElement).value; value={archiveName}
emitArchiveChange(); oninput={(event) => {
}} archiveName = (event.currentTarget as HTMLInputElement).value;
/> emitArchiveChange();
</label> }}
<p class="mt-1 text-[13px] text-primary-700"> />
{attachments.length} relevante Datei{attachments.length === 1 ? "" : "en"} </label>
</p> <p class="mt-1 text-[13px] text-primary">
</div> {attachments.length} relevante Datei{attachments.length === 1 ? '' : 'en'}
</p>
</div>
<button <Button
class="rounded-container whitespace-nowrap bg-primary-900 px-4 py-2 text-[14px] font-bold leading-6 text-white shadow-sm transition hover:bg-primary-800 disabled:cursor-not-allowed disabled:bg-primary-300" class="bg-primary"
type="button" type="button"
disabled={attachments.length === 0 || isMerging} disabled={attachments.length === 0 || isMerging}
onclick={downloadMergedPdf} onclick={downloadMergedPdf}
> >
{isMerging ? "PDF wird erstellt" : "PDF herunterladen"} {isMerging ? 'PDF wird erstellt' : 'PDF herunterladen'}
</button> </Button>
</header> </header>
{#if mergeError} {#if mergeError}
<div class="rounded-container bg-red-50 px-4 py-3 text-[14px] font-medium text-red-900"> <div class="rounded-container bg-red-50 px-4 py-3 text-[14px] font-medium text-red-900">
{mergeError} {mergeError}
</div> </div>
{/if} {/if}
<ul class="flex gap-3 overflow-x-auto pb-1"> <ul class="flex gap-3 overflow-x-auto pb-1">
{#each attachments as attachment, index (attachment.path)} {#each attachments as attachment, index (attachment.path)}
<li <li
class={`flex flex-col shrink-0 items-stretch gap-2 rounded-xl border bg-primary-50 p-2 ${ class={`flex flex-col shrink-0 items-stretch gap-2 rounded-xl border text-primary bg-accent p-2 ${
dropIndex === index ? "border-primary-400 ring-1 ring-primary-200" : "border-primary-100" dropIndex === index ? 'border-primary-400 ring-1 ring-primary-200' : 'border-primary-100'
} ${dragIndex === index ? "opacity-60" : ""}`} } ${dragIndex === index ? 'opacity-60' : ''}`}
style={`width: ${thumbnailWidth}px;`} style={`width: ${thumbnailWidth}px;`}
draggable="true" draggable="true"
ondragstart={(event) => handleDragStart(index, event)} ondragstart={(event) => handleDragStart(index, event)}
ondragover={(event) => handleDragOver(index, event)} ondragover={(event) => handleDragOver(index, event)}
ondrop={(event) => handleDrop(index, event)} ondrop={(event) => handleDrop(index, event)}
ondragend={handleDragEnd} ondragend={handleDragEnd}
> >
<div class="flex min-w-0 flex-1 flex-row gap-2 py-1 items-baseline"> <div class="flex min-w-0 flex-1 flex-row gap-2 py-1 items-baseline">
<button <button
class="w-fit cursor-grab rounded-md border border-primary-200 bg-white px-2 py-1 text-sm font-semibold leading-none text-primary-700 active:cursor-grabbing" class="w-fit cursor-grab rounded-md border border-primary-200 bg-white px-2 py-1 text-sm font-semibold leading-none text-primary-700 active:cursor-grabbing"
draggable="false" draggable="false"
type="button" type="button"
aria-label="Datei verschieben" aria-label="Datei verschieben"
> >
:: ::
</button> </button>
<div <div
class="truncate text-[13px] font-medium leading-tight text-primary-900" class="truncate text-[13px] font-medium leading-tight text-primary-900"
title={attachment.name} title={attachment.name}
> >
{attachment.name} {attachment.name}
</div> </div>
</div> </div>
<AttachmentPreview {attachment} /> <AttachmentPreview {attachment} />
</li> </li>
{/each} {/each}
</ul> </ul>
</section> </section>
src/lib/components/ZipDropzone.svelte
+3 -4
View File
@@ -62,7 +62,7 @@
<button <button
type="button" type="button"
class="flex min-h-[calc(-180px+100vh)] w-full grow cursor-pointer flex-col justify-center border-0 bg-transparent p-0 text-center text-inherit appearance-none focus:outline-none transition-colors rounded-2xl {isDragging ? 'bg-gray-100 border-2 border-dashed border-primary-500' : ''} {className}" class="flex min-h-[calc(-180px+100vh)] w-full grow cursor-pointer flex-col justify-center border-0 text-primary bg-transparent p-0 text-center appearance-none focus:outline-none transition-colors rounded-2xl {isDragging ? 'bg-gray-100 border-2 border-dashed border-primary-500' : ''} {className}"
aria-label="ZIP-Dateien hinzufügen" aria-label="ZIP-Dateien hinzufügen"
onclick={openFileDialog} onclick={openFileDialog}
ondragover={handleDragOver} ondragover={handleDragOver}
@@ -70,8 +70,7 @@
ondrop={handleDrop} ondrop={handleDrop}
> >
<div class="flex flex-row items-baseline justify-center gap-2"> <div class="flex flex-row items-baseline justify-center gap-2">
<!-- Changed h1 to span for better semantic HTML inside a button --> <span class="text-[20px] font-bold">Dateien hinzufügen</span>
<span class="text-[20px] font-bold text-primary-900">Dateien hinzufügen</span> <span class="text-[20px] font-extrabold">+</span>
<span class="text-[20px] font-extrabold text-primary-900">+</span>
</div> </div>
</button> </button>
src/lib/components/ui/button.svelte
+78
View File
@@ -0,0 +1,78 @@
<script lang="ts" module>
import { ripple } from "$lib/actions/ripple";
import { cn, type WithElementRef } from "$lib/utils.js";
import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
import { type VariantProps, tv } from "tailwind-variants";
export const buttonVariants = tv({
base: "relative overflow-hidden font-bold w-fit hover:not-disabled:cursor-pointer disabled:bg-[#E6E7EA] disabled:text-[#0B1F4366]",
variants: {
variant: {
primary: "bg-primary text-primary-foreground",
secondary: "bg-linear-to-r from-secondary to-[#FF6F6D] text-primary-foreground",
bordered: "text-primary border-[#E6E7EA] border-2 bg-white hover:bg-[#122F621A]",
tertiary: "text-primary hover:bg-[#122F621A]",
success: "text-white bg-[#0FAD80]"
},
size: {
standard: "px-6 h-8 rounded-[16px]",
large: "px-8 h-12 rounded-[24px]"
},
},
defaultVariants: {
variant: "primary",
size: "standard",
},
});
export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
WithElementRef<HTMLAnchorAttributes> & {
variant?: ButtonVariant;
size?: ButtonSize;
};
</script>
<script lang="ts">
let {
class: className,
variant = "primary",
size = "standard",
ref = $bindable(null),
href = undefined,
type = "button",
disabled,
children,
...restProps
}: ButtonProps = $props();
</script>
{#if href}
<a
use:ripple
bind:this={ref}
data-slot="button"
class={cn(buttonVariants({ variant, size }), className)}
href={disabled ? undefined : href}
aria-disabled={disabled}
role={disabled ? "link" : undefined}
tabindex={disabled ? -1 : undefined}
{...restProps}
>
{@render children?.()}
</a>
{:else}
<button
use:ripple
bind:this={ref}
data-slot="button"
class={" " + cn(buttonVariants({ variant, size }), className)}
{type}
{disabled}
{...restProps}
>
{@render children?.()}
</button>
{/if}
src/lib/components/ui/card/card-action.svelte
+23
View File
@@ -0,0 +1,23 @@
<script lang="ts">
import { cn, type WithElementRef } from "$lib/utils.js";
import type { HTMLAttributes } from "svelte/elements";
let {
ref = $bindable(null),
class: className,
children,
...restProps
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script>
<div
bind:this={ref}
data-slot="card-action"
class={cn(
"cn-card-action col-start-2 row-span-2 row-start-1 self-start justify-self-end",
className
)}
{...restProps}
>
{@render children?.()}
</div>
src/lib/components/ui/card/card-content.svelte
+20
View File
@@ -0,0 +1,20 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { cn, type WithElementRef } from "$lib/utils.js";
let {
ref = $bindable(null),
class: className,
children,
...restProps
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script>
<div
bind:this={ref}
data-slot="card-content"
class={cn("px-4 group-data-[size=sm]/card:px-3", className)}
{...restProps}
>
{@render children?.()}
</div>
src/lib/components/ui/card/card-description.svelte
+20
View File
@@ -0,0 +1,20 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { cn, type WithElementRef } from "$lib/utils.js";
let {
ref = $bindable(null),
class: className,
children,
...restProps
}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
</script>
<p
bind:this={ref}
data-slot="card-description"
class={cn("text-muted-foreground text-sm", className)}
{...restProps}
>
{@render children?.()}
</p>
src/lib/components/ui/card/card-footer.svelte
+20
View File
@@ -0,0 +1,20 @@
<script lang="ts">
import { cn, type WithElementRef } from "$lib/utils.js";
import type { HTMLAttributes } from "svelte/elements";
let {
ref = $bindable(null),
class: className,
children,
...restProps
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script>
<div
bind:this={ref}
data-slot="card-footer"
class={cn("bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center", className)}
{...restProps}
>
{@render children?.()}
</div>
src/lib/components/ui/card/card-header.svelte
+23
View File
@@ -0,0 +1,23 @@
<script lang="ts">
import { cn, type WithElementRef } from "$lib/utils.js";
import type { HTMLAttributes } from "svelte/elements";
let {
ref = $bindable(null),
class: className,
children,
...restProps
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script>
<div
bind:this={ref}
data-slot="card-header"
class={cn(
"gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
className
)}
{...restProps}
>
{@render children?.()}
</div>
src/lib/components/ui/card/card-title.svelte
+20
View File
@@ -0,0 +1,20 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { cn, type WithElementRef } from "$lib/utils.js";
let {
ref = $bindable(null),
class: className,
children,
...restProps
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script>
<div
bind:this={ref}
data-slot="card-title"
class={cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className)}
{...restProps}
>
{@render children?.()}
</div>
src/lib/components/ui/card/card.svelte
+22
View File
@@ -0,0 +1,22 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { cn, type WithElementRef } from "$lib/utils.js";
let {
ref = $bindable(null),
class: className,
children,
size = "default",
...restProps
}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { size?: "default" | "sm" } = $props();
</script>
<div
bind:this={ref}
data-slot="card"
data-size={size}
class={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className)}
{...restProps}
>
{@render children?.()}
</div>
src/lib/components/ui/card/index.ts
+25
View File
@@ -0,0 +1,25 @@
import Root from "./card.svelte";
import Content from "./card-content.svelte";
import Description from "./card-description.svelte";
import Footer from "./card-footer.svelte";
import Header from "./card-header.svelte";
import Title from "./card-title.svelte";
import Action from "./card-action.svelte";
export {
Root,
Content,
Description,
Footer,
Header,
Title,
Action,
//
Root as Card,
Content as CardContent,
Description as CardDescription,
Footer as CardFooter,
Header as CardHeader,
Title as CardTitle,
Action as CardAction,
};
src/lib/nom-theme.css
-108
View File
@@ -1,108 +0,0 @@
[data-theme='nominandum'] {
--text-scaling: 1.067;
--base-font-color: var(--color-surface-900);
--base-font-color-dark: var(--color-surface-50);
--base-font-family: Nunito, Helvetica Neue, sans-serif;
--base-font-size: inherit;
--base-line-height: 1.5;
--base-font-weight: 400;
--heading-font-color: var(--color-primary-900);
--heading-font-color-dark: var(--color-primary-900);
--heading-font-family: Nunito, Helvetica Neue, sans-serif;
--heading-font-weight: 400;
--anchor-font-color: var(--color-primary-600);
--anchor-font-color-dark: var(--color-primary-300);
--anchor-text-decoration: none;
--anchor-text-decoration-hover: underline;
--spacing: 0.25rem;
--radius-base: 0.5rem;
--radius-container: 24px;
--default-border-width: 1px;
--default-divide-width: 1px;
--default-ring-width: 2px;
--body-background-color: #EEF4F6;
--body-background-color-dark: #0f172a;
/* Primary: Material Blue */
/* Very Light / Ghostly */
--color-primary-50: oklch(96.8% 0.010 253deg);
--color-primary-100: oklch(92.8% 0.020 253deg);
--color-primary-200: oklch(86.5% 0.040 253deg);
--color-primary-300: oklch(77.5% 0.060 253deg);
--color-primary-400: oklch(68.5% 0.080 253deg);
/* Mid-range / Muted Tones */
--color-primary-500: oklch(59.5% 0.090 253deg);
--color-primary-600: oklch(52.5% 0.095 253deg);
--color-primary-700: oklch(45.5% 0.095 253deg);
/* Dark Range (Matching your base color) */
--color-primary-800: oklch(38.5% 0.090 253deg);
--color-primary-900: oklch(31.5% 0.090 253deg); /* YOUR BASE COLOR */
--color-primary-950: oklch(23.5% 0.070 253deg);
--color-primary-contrast-dark: var(--color-primary-950);
--color-primary-contrast-light: white;
--color-primary-contrast-50: var(--color-primary-contrast-dark);
--color-primary-contrast-100: var(--color-primary-contrast-dark);
--color-primary-contrast-200: var(--color-primary-contrast-dark);
--color-primary-contrast-300: var(--color-primary-contrast-dark);
--color-primary-contrast-400: white;
--color-primary-contrast-500: white;
--color-primary-contrast-600: white;
--color-primary-contrast-700: white;
--color-primary-contrast-800: white;
--color-primary-contrast-900: white;
--color-primary-contrast-950: white;
/* Secondary: dezentes Blau-Grau */
--color-secondary-50: oklch(97% 0.01 250deg);
--color-secondary-100: oklch(93.5% 0.015 250deg);
--color-secondary-200: oklch(88.5% 0.022 250deg);
--color-secondary-300: oklch(80% 0.035 250deg);
--color-secondary-400: oklch(68% 0.045 250deg);
--color-secondary-500: oklch(56% 0.055 250deg);
--color-secondary-600: oklch(48% 0.05 250deg);
--color-secondary-700: oklch(40% 0.045 250deg);
--color-secondary-800: oklch(32% 0.04 250deg);
--color-secondary-900: oklch(24% 0.035 250deg);
--color-secondary-950: oklch(17% 0.03 250deg);
--color-secondary-contrast-dark: var(--color-secondary-950);
--color-secondary-contrast-light: white;
/* Tertiary: Akzent Cyan */
--color-tertiary-50: oklch(97% 0.025 220deg);
--color-tertiary-100: oklch(93% 0.045 220deg);
--color-tertiary-200: oklch(87% 0.07 220deg);
--color-tertiary-300: oklch(78% 0.105 220deg);
--color-tertiary-400: oklch(69% 0.135 220deg);
--color-tertiary-500: oklch(60% 0.15 220deg);
--color-tertiary-600: oklch(52% 0.135 220deg);
--color-tertiary-700: oklch(44% 0.115 220deg);
--color-tertiary-800: oklch(36% 0.09 220deg);
--color-tertiary-900: oklch(29% 0.065 220deg);
--color-tertiary-950: oklch(21% 0.045 220deg);
/* Surface: Material-nahe kühle Grautöne */
--color-surface-50: oklch(98.5% 0.004 255deg);
--color-surface-100: oklch(96.5% 0.006 255deg);
--color-surface-200: oklch(92.5% 0.01 255deg);
--color-surface-300: oklch(86.5% 0.015 255deg);
--color-surface-400: oklch(74% 0.02 255deg);
--color-surface-500: oklch(62% 0.025 255deg);
--color-surface-600: oklch(50% 0.025 255deg);
--color-surface-700: oklch(39% 0.025 255deg);
--color-surface-800: oklch(29% 0.025 255deg);
--color-surface-900: oklch(21% 0.025 255deg);
--color-surface-950: oklch(14% 0.025 255deg);
--color-surface-contrast-dark: var(--color-surface-950);
--color-surface-contrast-light: white;
}
src/lib/utils.ts
+13
View File
@@ -0,0 +1,13 @@
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, "children"> : T;
export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };
src/routes/+page.svelte
+44 -25
View File
@@ -1,11 +1,16 @@
<script lang="ts"> <script lang="ts">
import {onMount} from "svelte"; import {onMount} from 'svelte';
import Card from "$lib/components/Card.svelte"; import Button from '$lib/components/ui/button.svelte';
import ProcessedZipArchiveEditor from "$lib/components/ProcessedZipArchiveEditor.svelte"; import ProcessedZipArchiveEditor from '$lib/components/ProcessedZipArchiveEditor.svelte';
import ZipDropzone from "$lib/components/ZipDropzone.svelte"; import ZipDropzone from '$lib/components/ZipDropzone.svelte';
import {extractZipArchives, mergeProcessedZipArchive, type ProcessedZipArchive} from "$lib/zip-processing"; import {
extractZipArchives,
mergeProcessedZipArchive,
type ProcessedZipArchive
} from '$lib/zip-processing';
import * as Card from "$lib/components/ui/card/index";
const THUMBNAIL_WIDTH_STORAGE_KEY = "thumbnailWidth"; const THUMBNAIL_WIDTH_STORAGE_KEY = 'thumbnailWidth';
let selectedZipFiles: File[] = $state([]); let selectedZipFiles: File[] = $state([]);
let processedZipFiles: ProcessedZipArchive[] = $state([]); let processedZipFiles: ProcessedZipArchive[] = $state([]);
@@ -45,13 +50,13 @@
}; };
const downloadPdfBytes = (bytes: Uint8Array, fileName: string) => { const downloadPdfBytes = (bytes: Uint8Array, fileName: string) => {
const pdfBlob = new Blob([toArrayBuffer(bytes)], {type: "application/pdf"}); const pdfBlob = new Blob([toArrayBuffer(bytes)], {type: 'application/pdf'});
const objectUrl = URL.createObjectURL(pdfBlob); const objectUrl = URL.createObjectURL(pdfBlob);
const downloadLink = document.createElement("a"); const downloadLink = document.createElement('a');
downloadLink.href = objectUrl; downloadLink.href = objectUrl;
downloadLink.download = fileName.toLowerCase().endsWith(".pdf") ? fileName : `${fileName}.pdf`; downloadLink.download = fileName.toLowerCase().endsWith('.pdf') ? fileName : `${fileName}.pdf`;
downloadLink.rel = "noopener"; downloadLink.rel = 'noopener';
downloadLink.click(); downloadLink.click();
window.setTimeout(() => URL.revokeObjectURL(objectUrl), 1000); window.setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
}; };
@@ -86,7 +91,7 @@
const updateProcessedZipFile = (index: number, archive: ProcessedZipArchive) => { const updateProcessedZipFile = (index: number, archive: ProcessedZipArchive) => {
processedZipFiles = processedZipFiles.map((existingArchive, existingIndex) => processedZipFiles = processedZipFiles.map((existingArchive, existingIndex) =>
existingIndex === index ? archive : existingArchive, existingIndex === index ? archive : existingArchive
); );
}; };
@@ -111,39 +116,49 @@
{#snippet content()} {#snippet content()}
{#if selectedZipFiles.length === 0} {#if selectedZipFiles.length === 0}
<ZipDropzone onFilesSelected={handleFilesSelected}/> <Card.Root>
<Card.Content>
<ZipDropzone onFilesSelected={handleFilesSelected}/>
</Card.Content>
</Card.Root>
{:else} {:else}
<details class="fixed bottom-4 right-4 z-20"> <details class="fixed bottom-4 right-4 z-20">
<summary <summary
class="flex h-12 w-12 cursor-pointer list-none items-center justify-center rounded-full border border-primary-200 bg-white text-lg font-semibold text-primary-800 shadow-lg transition hover:border-primary-300 hover:bg-primary-50"> class="flex h-12 w-12 cursor-pointer list-none items-center justify-center rounded-full border border-primary-200 bg-white text-lg font-semibold text-primary-800 shadow-lg transition hover:border-primary-300 hover:bg-primary-50"
>
<span class="sr-only">Settings</span> <span class="sr-only">Settings</span>
<span>⚙️</span> <span>⚙️</span>
</summary> </summary>
<div class="absolute bottom-14 right-0 w-72 rounded-xl border border-primary-100 bg-white p-4 shadow-lg"> <div
class="absolute bottom-14 right-0 w-72 rounded-xl border border-primary-100 bg-white p-4 shadow-lg"
>
<div class="flex flex-col gap-3"> <div class="flex flex-col gap-3">
<div class="flex gap-2"> <div class="flex gap-2">
<button <Button
class="flex-1 rounded-container bg-primary-900 px-3 py-2 text-[13px] font-bold leading-5 text-white shadow-sm transition hover:bg-primary-800 disabled:cursor-not-allowed disabled:bg-primary-300" class="flex-1"
type="button" type="button"
disabled={processedZipFiles.length === 0} disabled={processedZipFiles.length === 0}
onclick={exportAllZipArchivesAsPdf} onclick={exportAllZipArchivesAsPdf}
> >
Alle ZIP-Archive als PDF exportieren Alle ZIP-Archive als PDF exportieren
</button> </Button>
<button <Button
class="flex-1 rounded-container bg-red-600 px-3 py-2 text-[13px] font-bold leading-5 text-white shadow-sm transition hover:bg-red-500 disabled:cursor-not-allowed disabled:bg-red-300" class="flex-1"
type="button" type="button"
disabled={selectedZipFiles.length === 0} disabled={selectedZipFiles.length === 0}
variant="secondary"
onclick={deleteAllZipArchives} onclick={deleteAllZipArchives}
> >
Alle ZIP-Archive löschen Alle ZIP-Archive löschen
</button> </Button>
</div> </div>
<label class="flex flex-col gap-2"> <label class="flex flex-col gap-2">
<div class="flex items-center justify-between gap-3 text-sm font-medium text-primary-900"> <div
class="flex items-center justify-between gap-3 text-sm font-medium text-primary-900"
>
<span>Thumbnail Breite</span> <span>Thumbnail Breite</span>
<span class="tabular-nums text-primary-700">{thumbnailWidth}px</span> <span class="tabular-nums text-primary-700">{thumbnailWidth}px</span>
</div> </div>
@@ -160,11 +175,15 @@
</div> </div>
</div> </div>
</details> </details>
<div class="flex min-h-[calc(-180px+100vh)] w-full grow flex-col justify-center gap-4 px-4 py-6"> <div
class="flex min-h-[calc(-180px+100vh)] w-full grow flex-col justify-center gap-4 px-4 py-6"
>
<div class="mx-auto flex w-full flex-col gap-3"> <div class="mx-auto flex w-full flex-col gap-3">
{#if pendingZipCount > 0} {#if pendingZipCount > 0}
<div class="rounded-container bg-primary-50 px-4 py-3 text-[14px] font-medium text-primary-900"> <div
Noch {pendingZipCount} ZIP-Datei{pendingZipCount === 1 ? "" : "en"} in Bearbeitung. class="rounded-container bg-primary-50 px-4 py-3 text-[14px] font-medium text-primary-900"
>
Noch {pendingZipCount} ZIP-Datei{pendingZipCount === 1 ? '' : 'en'} in Bearbeitung.
</div> </div>
{/if} {/if}
@@ -188,5 +207,5 @@
<div class="flex flex-wrap items-center justify-between gap-3 py-6"> <div class="flex flex-wrap items-center justify-between gap-3 py-6">
<h1 class="h1 text-[20px] font-bold text-primary-900">beA-Edit</h1> <h1 class="h1 text-[20px] font-bold text-primary-900">beA-Edit</h1>
</div> </div>
<Card {content} class="h-full"/> {@render content()}
</section> </section>
src/routes/layout.css
+155 -7
View File
@@ -1,13 +1,161 @@
@import 'tailwindcss'; @import 'tailwindcss';
@import '../lib/nom-theme.css'; /*@import '../globals.css';*/
@import "tw-animate-css";
@import "shadcn-svelte/tailwind.css";
@import "@fontsource-variable/geist";
@custom-variant dark (&:is(.dark *));
@plugin '@tailwindcss/forms'; @plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography'; @plugin '@tailwindcss/typography';
@font-face {
@font-face{ font-family: 'Nunito';
font-family: 'Nunito'; font-style: normal;
font-style: normal; font-weight: 100 900;
font-weight: 100 900; src: url('$lib/assets/Nunito-VariableFont_wght.ttf') format('truetype');
src: url('$lib/assets/Nunito-VariableFont_wght.ttf') format("truetype");
} }
:root {
--background: #EEF4F6;
--foreground: #122F62;
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: #122f62;
--primary-foreground: oklch(0.985 0 0);
--secondary: #EA544B;
--secondary-end: #FF6F6D;
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: #d6dce5;
--accent-foreground: oklch(0.205 0 0);
--destructive: #ff0027;
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.87 0 0);
--chart-2: oklch(0.556 0 0);
--chart-3: oklch(0.439 0 0);
--chart-4: oklch(0.371 0 0);
--chart-5: oklch(0.269 0 0);
--radius: 16px;
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
}
.dark {
--background: #212121;
--foreground: #FFFFFF;
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: #92b2eb;
--primary-foreground: oklch(0.205 0 0);
--secondary: linear-gradient(90deg, #EA544B 0%, #FF6F6D 100%);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: #ff0027;
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.87 0 0);
--chart-2: oklch(0.556 0 0);
--chart-3: oklch(0.439 0 0);
--chart-4: oklch(0.371 0 0);
--chart-5: oklch(0.269 0 0);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
}
@theme inline {
--font-sans: 'Nunito', sans-serif;
--color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar: var(--sidebar);
--color-chart-5: var(--chart-5);
--color-chart-4: var(--chart-4);
--color-chart-3: var(--chart-3);
--color-chart-2: var(--chart-2);
--color-chart-1: var(--chart-1);
--color-ring: var(--ring);
--color-input: var(--input);
--color-border: var(--border);
--color-destructive: var(--destructive);
--color-accent-foreground: var(--accent-foreground);
--color-accent: var(--accent);
--color-muted-foreground: var(--muted-foreground);
--color-muted: var(--muted);
--color-secondary-foreground: var(--secondary-foreground);
--color-secondary: var(--secondary);
--color-primary-foreground: var(--primary-foreground);
--color-primary: var(--primary);
--color-popover-foreground: var(--popover-foreground);
--color-popover: var(--popover);
--color-card-foreground: var(--card-foreground);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-background: var(--background);
--radius-sm: calc(var(--radius) * 0.6);
--radius-md: calc(var(--radius) * 0.8);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) * 1.4);
--radius-2xl: calc(var(--radius) * 1.8);
--radius-3xl: calc(var(--radius) * 2.2);
--radius-4xl: calc(var(--radius) * 2.6);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
html {
@apply font-sans;
}
}
/* ripple */
@keyframes ripple {
from {
transform: scale(0);
opacity: 0.8;
}
to {
transform: scale(4);
opacity: 0;
}
}
.animate-ripple {
animation: ripple 600ms ease-out;
}