Ku6epXBOCTuK/easy-png-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: add prettier, eslint, fix some components

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-08-27 20:34:16 +05:00
parent 0acfa3aeb9
commit bc5a5d13c4
14 changed files with 1204 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/kit/AppShell.svelte
+1 -1
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import BlueprintGrid from './BlueprintGrid.svelte';
import BlueprintGrid from "./BlueprintGrid.svelte";
let { children } = $props();
</script>
web/src/lib/components/kit/BlueprintGrid.svelte
+10 -2
View File
@@ -6,8 +6,16 @@
inset: 0;
pointer-events: none;
background-image:
linear-gradient(to right, color-mix(in srgb, var(--line) 45%, transparent) 1px, transparent 1px),
linear-gradient(to bottom, color-mix(in srgb, var(--line) 45%, transparent) 1px, transparent 1px);
linear-gradient(
to right,
color-mix(in srgb, var(--line) 45%, transparent) 1px,
transparent 1px
),
linear-gradient(
to bottom,
color-mix(in srgb, var(--line) 45%, transparent) 1px,
transparent 1px
);
background-size: 32px 32px;
opacity: 0.55;
}
web/src/lib/components/kit/CheckerCanvas.svelte
+32 -28
View File
@@ -1,40 +1,44 @@
<script lang="ts">
import type { Snippet } from "svelte";
interface Props {
children?: import('svelte').Snippet;
size?: 'sm' | 'large';
children?: Snippet;
size?: "sm" | "large";
}
let { children, size = 'large' }: Props = $props();
let { children, size = "large" }: Props = $props();
</script>
<div class="checker-canvas checker-canvas--{size}">
{#if children}
{@render children()}
{/if}
{#if children}
{@render children()}
{/if}
</div>
<style>
.checker-canvas {
position: relative;
display: grid;
place-items: center;
overflow: hidden;
background-color: #0b0f14;
background-image: linear-gradient(45deg, #1a2129 25%, transparent 25%),
linear-gradient(-45deg, #1a2129 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #1a2129 75%),
linear-gradient(-45deg, transparent 75%, #1a2129 75%);
background-size: 20px 20px;
background-position:
0 0,
0 10px,
10px -10px,
-10px 0;
}
.checker-canvas {
position: relative;
display: grid;
place-items: center;
overflow: hidden;
background-color: #0b0f14;
background-image:
linear-gradient(45deg, #1a2129 25%, transparent 25%),
linear-gradient(-45deg, #1a2129 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #1a2129 75%),
linear-gradient(-45deg, transparent 75%, #1a2129 75%);
background-size: 20px 20px;
background-position:
0 0,
0 10px,
10px -10px,
-10px 0;
}
.checker-canvas--sm {
min-height: 180px;
}
.checker-canvas--sm {
min-height: 180px;
}
.checker-canvas--large {
min-height: 360px;
}
.checker-canvas--large {
min-height: 360px;
}
</style>
web/src/lib/components/kit/MonoLabel.svelte
+4 -2
View File
@@ -1,13 +1,15 @@
<script lang="ts">
import type { Snippet } from "svelte";
interface Props {
accent?: boolean;
children?: import('svelte').Snippet;
children?: Snippet;
}
let { accent = false, children }: Props = $props();
</script>
<span class="mono-label" class:accent={accent}>
<span class="mono-label" class:accent>
{#if children}
{@render children()}
{/if}
web/src/lib/components/kit/StatusLine.svelte
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import StatusDot from './StatusDot.svelte';
import MonoLabel from './MonoLabel.svelte';
import StatusDot from "./StatusDot.svelte";
import MonoLabel from "./MonoLabel.svelte";
interface Props {
label: string;
web/src/lib/styles/design2.css
+9 -9
View File
@@ -1,17 +1,17 @@
@import '@fontsource/ibm-plex-sans/400.css';
@import '@fontsource/ibm-plex-sans/500.css';
@import '@fontsource/ibm-plex-sans/600.css';
@import '@fontsource/ibm-plex-sans/700.css';
@import '@fontsource/ibm-plex-mono/400.css';
@import '@fontsource/ibm-plex-mono/500.css';
@import "@fontsource/ibm-plex-sans/400.css";
@import "@fontsource/ibm-plex-sans/500.css";
@import "@fontsource/ibm-plex-sans/600.css";
@import "@fontsource/ibm-plex-sans/700.css";
@import "@fontsource/ibm-plex-mono/400.css";
@import "@fontsource/ibm-plex-mono/500.css";
/* Новый дизайн: токены (§2 плана redesign).
Файл грузится только layout'ом новой ветки (preview/+layout), поэтому
глобально не конфликтует со старым app.css. */
:root {
--font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
--font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
--background: #eef1f4;
--panel: #f8fafb;
@@ -28,7 +28,7 @@
--radius: 4px;
}
[data-theme='dark'] {
[data-theme="dark"] {
--background: #11171d;
--panel: #182129;
--foreground: #e8eef2;