feat: add new simple components
This commit is contained in:
@@ -0,0 +1,72 @@
|
||||
<script lang="ts">
|
||||
import FileChip from "$lib/components/kit/FileChip.svelte";
|
||||
|
||||
interface FileInfo {
|
||||
name: string;
|
||||
size?: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
eyebrowA: string;
|
||||
eyebrowB?: string;
|
||||
title: string;
|
||||
lede?: string;
|
||||
file?: FileInfo;
|
||||
}
|
||||
|
||||
let { eyebrowA, eyebrowB, title, lede, file }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="ws-header">
|
||||
<div class="title-row">
|
||||
<div>
|
||||
<div class="eyebrow">
|
||||
{eyebrowA}{#if eyebrowB}<span>/</span>{eyebrowB}{/if}
|
||||
</div>
|
||||
<h1>{title}</h1>
|
||||
{#if lede}<p class="lede">{lede}</p>{/if}
|
||||
</div>
|
||||
{#if file}
|
||||
<FileChip name={file.name} size={file.size} />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.eyebrow {
|
||||
font: 10px var(--font-mono);
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--muted);
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.eyebrow span {
|
||||
margin: 0 7px;
|
||||
color: var(--blue);
|
||||
}
|
||||
.title-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
gap: 30px;
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
h1 {
|
||||
margin: 0 0 16px;
|
||||
font-size: clamp(36px, 4vw, 64px);
|
||||
font-weight: 650;
|
||||
letter-spacing: -0.06em;
|
||||
color: var(--foreground);
|
||||
}
|
||||
.lede {
|
||||
margin: 0;
|
||||
max-width: 550px;
|
||||
color: var(--muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.title-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,65 @@
|
||||
<script lang="ts">
|
||||
import type { ParamDef } from "$lib/registry";
|
||||
import ColorField from "$lib/components/kit/ColorField.svelte";
|
||||
import SliderField from "$lib/components/kit/SliderField.svelte";
|
||||
import SelectField from "$lib/components/kit/SelectField.svelte";
|
||||
import ToggleRow from "$lib/components/kit/ToggleRow.svelte";
|
||||
import TextField from "$lib/components/kit/TextField.svelte";
|
||||
import NumberField from "$lib/components/kit/NumberField.svelte";
|
||||
|
||||
type ParamValue = string | number | boolean;
|
||||
|
||||
interface Props {
|
||||
param: ParamDef;
|
||||
value: ParamValue;
|
||||
onInput: (value: ParamValue) => void;
|
||||
}
|
||||
|
||||
let { param, value, onInput }: Props = $props();
|
||||
</script>
|
||||
|
||||
{#if param.type === "color"}
|
||||
<ColorField
|
||||
label={param.label}
|
||||
value={value as string}
|
||||
oninput={(v) => onInput(v)}
|
||||
/>
|
||||
{:else if param.type === "slider"}
|
||||
<SliderField
|
||||
label={param.label}
|
||||
value={value as number}
|
||||
min={param.min}
|
||||
max={param.max}
|
||||
step={param.step}
|
||||
oninput={(v) => onInput(v)}
|
||||
/>
|
||||
{:else if param.type === "select"}
|
||||
<SelectField
|
||||
label={param.label}
|
||||
value={value as string}
|
||||
options={param.options}
|
||||
onchange={(v) => onInput(v)}
|
||||
/>
|
||||
{:else if param.type === "checkbox"}
|
||||
<ToggleRow
|
||||
label={param.label}
|
||||
checked={value as boolean}
|
||||
onchange={(v) => onInput(v)}
|
||||
/>
|
||||
{:else if param.type === "text"}
|
||||
<TextField
|
||||
label={param.label}
|
||||
value={value as string}
|
||||
placeholder={param.placeholder}
|
||||
oninput={(v) => onInput(v)}
|
||||
/>
|
||||
{:else if param.type === "number"}
|
||||
<NumberField
|
||||
label={param.label}
|
||||
value={value as number}
|
||||
min={param.min}
|
||||
max={param.max}
|
||||
step={param.step}
|
||||
oninput={(v) => onInput(v)}
|
||||
/>
|
||||
{/if}
|
||||
@@ -0,0 +1,108 @@
|
||||
<script lang="ts">
|
||||
import type { PixelImage } from "$lib/core/types";
|
||||
import Panel from "$lib/components/kit/Panel.svelte";
|
||||
import PanelHeading from "$lib/components/kit/PanelHeading.svelte";
|
||||
import PreviewStack from "$lib/components/kit/PreviewStack.svelte";
|
||||
import PreviewTile from "$lib/components/kit/PreviewTile.svelte";
|
||||
import CheckerCanvas from "$lib/components/kit/CheckerCanvas.svelte";
|
||||
import DownloadButton from "$lib/components/kit/DownloadButton.svelte";
|
||||
import Dropzone from "$lib/components/kit/Dropzone.svelte";
|
||||
import Button from "$lib/components/kit/Button.svelte";
|
||||
import StatusLine from "$lib/components/kit/StatusLine.svelte";
|
||||
import MetaList from "$lib/components/kit/MetaList.svelte";
|
||||
import EmptyState from "$lib/components/kit/EmptyState.svelte";
|
||||
|
||||
interface PreviewItem {
|
||||
toolId: string;
|
||||
title: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
interface MetaItem {
|
||||
caption: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
needsSource: boolean;
|
||||
sourceImg: PixelImage | null;
|
||||
sourceUrl: string;
|
||||
stepOutputs: PreviewItem[];
|
||||
resultUrl: string;
|
||||
resultMeta: MetaItem[];
|
||||
processing: boolean;
|
||||
chainError: string;
|
||||
onFile: (file: File) => void;
|
||||
onClearSource: () => void;
|
||||
onDownload: () => void;
|
||||
}
|
||||
|
||||
let {
|
||||
needsSource,
|
||||
sourceImg,
|
||||
sourceUrl,
|
||||
stepOutputs,
|
||||
resultUrl,
|
||||
resultMeta,
|
||||
processing,
|
||||
chainError,
|
||||
onFile,
|
||||
onClearSource,
|
||||
onDownload,
|
||||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
<Panel>
|
||||
<PanelHeading title="Pipeline output" eyebrow="RESULT">
|
||||
{#snippet actions()}
|
||||
{#if resultUrl}
|
||||
<DownloadButton label="Download result" onclick={onDownload} />
|
||||
{/if}
|
||||
{/snippet}
|
||||
</PanelHeading>
|
||||
<div class="preview-body">
|
||||
{#if chainError}
|
||||
<EmptyState title="Pipeline failed" description={chainError} />
|
||||
{/if}
|
||||
{#if needsSource && !sourceImg}
|
||||
<Dropzone onfile={onFile} />
|
||||
{:else if needsSource && sourceImg}
|
||||
<Button variant="ghost" onclick={onClearSource}>Change image</Button>
|
||||
{/if}
|
||||
<PreviewStack>
|
||||
{#if needsSource && sourceImg}
|
||||
<PreviewTile label="SOURCE">
|
||||
<CheckerCanvas size="sm">
|
||||
<img class="tile-img" src={sourceUrl} alt="source" />
|
||||
</CheckerCanvas>
|
||||
</PreviewTile>
|
||||
{/if}
|
||||
{#each stepOutputs as out, i (out.toolId + i)}
|
||||
<PreviewTile label={`STEP ${String(i + 1).padStart(2, "0")}`}>
|
||||
<CheckerCanvas size="sm">
|
||||
<img class="tile-img" src={out.url} alt={out.title} />
|
||||
</CheckerCanvas>
|
||||
</PreviewTile>
|
||||
{/each}
|
||||
</PreviewStack>
|
||||
{#if processing}
|
||||
<StatusLine label="processing pipeline" />
|
||||
{/if}
|
||||
<MetaList items={resultMeta} />
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
<style>
|
||||
.preview-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
.tile-img {
|
||||
max-width: 100%;
|
||||
max-height: 220px;
|
||||
display: block;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,108 @@
|
||||
<script lang="ts">
|
||||
import { getTool } from "$lib/registry";
|
||||
import Panel from "$lib/components/kit/Panel.svelte";
|
||||
import PanelHeading from "$lib/components/kit/PanelHeading.svelte";
|
||||
import SettingsFooter from "$lib/components/kit/SettingsFooter.svelte";
|
||||
import StepCard from "$lib/components/kit/StepCard.svelte";
|
||||
import Badge from "$lib/components/kit/Badge.svelte";
|
||||
import SelectField from "$lib/components/kit/SelectField.svelte";
|
||||
import Button from "$lib/components/kit/Button.svelte";
|
||||
import EmptyState from "$lib/components/kit/EmptyState.svelte";
|
||||
import ParamControl from "./ParamControl.svelte";
|
||||
|
||||
type ParamValue = string | number | boolean;
|
||||
|
||||
interface ChainStep {
|
||||
toolId: string;
|
||||
params: Record<string, ParamValue>;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
steps: ChainStep[];
|
||||
chainOptions: { value: string; label: string }[];
|
||||
addId: string;
|
||||
onAddStep: () => void;
|
||||
onSetAddId: (value: string) => void;
|
||||
onRemoveStep: (index: number) => void;
|
||||
onSetParam: (index: number, id: string, value: ParamValue) => void;
|
||||
}
|
||||
|
||||
let {
|
||||
steps,
|
||||
chainOptions,
|
||||
addId,
|
||||
onAddStep,
|
||||
onSetAddId,
|
||||
onRemoveStep,
|
||||
onSetParam,
|
||||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
<Panel>
|
||||
<PanelHeading title="Pipeline" eyebrow="STEPS">
|
||||
{#snippet actions()}
|
||||
<Badge tone="accent">AUTO</Badge>
|
||||
{/snippet}
|
||||
</PanelHeading>
|
||||
<div class="pipeline-body">
|
||||
{#if steps.length === 0}
|
||||
<EmptyState title="Pipeline empty" description="Add a tool step below." />
|
||||
{/if}
|
||||
{#each steps as step, i (step.toolId + i)}
|
||||
{@const st = getTool(step.toolId)}
|
||||
<StepCard
|
||||
index={i + 1}
|
||||
title={st?.title ?? step.toolId}
|
||||
type={st?.category}
|
||||
onremove={() => onRemoveStep(i)}
|
||||
>
|
||||
{#if st}
|
||||
<div class="step-controls">
|
||||
{#each st.params as p (p.id)}
|
||||
<ParamControl
|
||||
param={p}
|
||||
value={step.params[p.id]}
|
||||
onInput={(v) => onSetParam(i, p.id, v)}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</StepCard>
|
||||
{/each}
|
||||
</div>
|
||||
<SettingsFooter>
|
||||
<div class="add-step">
|
||||
<SelectField
|
||||
label="Add step"
|
||||
value={addId}
|
||||
options={chainOptions}
|
||||
onchange={(v) => onSetAddId(v)}
|
||||
/>
|
||||
<Button variant="ghost" onclick={onAddStep}>Add step</Button>
|
||||
</div>
|
||||
</SettingsFooter>
|
||||
</Panel>
|
||||
|
||||
<style>
|
||||
.pipeline-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
.step-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.add-step {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 0.75rem;
|
||||
width: 100%;
|
||||
}
|
||||
.add-step :global(.select-field),
|
||||
.add-step :global(select) {
|
||||
min-width: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user