fragment-tools 0.2.8 → 0.2.9

package/src/client/app/ui/FieldSection.svelte

@@ -77,7 +77,7 @@
 		width: 1px;
 		height: var(--margin);
 
-		background-color: var(--color-spacing);
+		background-color: var(--fragment-spacing-color);
 	}
 
 	.field__infos {
@@ -87,12 +87,12 @@
 		align-items: center;
 		justify-content: space-between;
 
-		color: var(--color-text);
+		color: var(--fragment-text-color);
 	}
 
 	.field__label {
 		color: inherit;
-		font-size: var(--font-size-input);
+		font-size: var(--fragment-input-font-size);
 		user-select: none;
 
 		opacity: 0.6;
@@ -105,7 +105,7 @@
 	}
 
 	.field__label:focus-visible {
-		outline: 2px var(--color-active) solid;
+		outline: 2px var(--fragment-accent-color) solid;
 		outline-offset: 2px;
 		border-radius: 1px;
 	}
@@ -123,7 +123,7 @@
 
 		padding-left: 5px;
 
-		background-color: #242425;
+		background-color: var(--fragment-background-color);
 	}
 
 	.field__input {
@@ -132,11 +132,11 @@
 		justify-content: center;
 		align-items: flex-start;
 
-		min-height: calc(var(--height-input) + 4px);
+		min-height: calc(var(--fragment-input-height) + 4px);
 	}
 
 	.field__section.secondary .field__input {
 		padding: var(--column-gap);
-		border: 1px solid var(--color-spacing);
+		border: 1px solid var(--fragment-spacing-color);
 	}
 </style>

package/src/client/app/ui/FieldSpace.svelte

@@ -8,7 +8,7 @@
 	.field-space {
 		position: relative;
 
-		border-bottom: 1px solid var(--color-spacing);
+		border-bottom: 1px solid var(--fragment-spacing-color);
 		overflow: hidden;
 	}
 
@@ -22,7 +22,7 @@
 		width: 100%;
 		height: 1px;
 
-		background-color: var(--color-spacing);
+		background-color: var(--fragment-spacing-color);
 	}
 
 	.field-space:before {

package/src/client/app/ui/FieldTrigger.svelte

@@ -217,9 +217,9 @@
 			label="delete"
 			showLabel={false}
 			onclick={handleClickDelete}
-			--color-text="white"
-			--background-color="var(--color-red)"
-			--box-shadow-color-active="var(--color-lightred)"
+			--text-color="white"
+			--background-color="var(--fragment-color-red)"
+			--box-shadow-color-active="var(--fragment-color-lightred)"
 		>
 			<IconCross />
 		</ButtonInput>
@@ -228,7 +228,7 @@
 
 <style>
 	.field-trigger {
-		--width-delete: var(--height-input);
+		--width-delete: var(--fragment-input-height);
 		--width-input: 90px;
 		--width-activity: 16px;
 		--width-cols: 1fr;
@@ -264,11 +264,11 @@
 	}
 
 	.activity.valid.enabled {
-		--background-color: var(--color-green);
+		--background-color: var(--fragment-color-green);
 	}
 
 	.activity.valid.disabled {
-		--background-color: var(--color-red);
+		--background-color: var(--fragment-color-red);
 	}
 
 	.field-trigger.mouse {

package/src/client/app/ui/FloatingParams.svelte

@@ -55,7 +55,7 @@
 
 		height: auto;
 
-		border-radius: calc(var(--border-radius-input) * 2);
+		border-radius: calc(var(--fragment-input-border-radius) * 2);
 		overflow: hidden;
 	}
 

package/src/client/app/ui/LayoutComponent.svelte

@@ -106,7 +106,7 @@
 >
 	{#if isRoot && layout.previewing}
 		<Preview />
-	{:else if childComponents.length > 0}
+	{:else if childComponents.length > 0 && layout.persistent}
 		{#each childComponents as child (child.id)}
 			{#if child.type === 'column' || child.type === 'row'}
 				<LayoutComponent
@@ -142,7 +142,7 @@
 {#if !isRoot}
 	<Resizer
 		direction={isColumn ? 'vertical' : 'horizontal'}
-		{current}
+		bind:current
 		disabled={!resizable}
 	/>
 {/if}
@@ -166,11 +166,11 @@
 	}
 
 	.column:not(:last-child) {
-		border-right: 0.5px solid var(--color-lightblack);
+		border-right: 0.5px solid var(--fragment-color-lightblack);
 	}
 
 	.column:not(:first-child) {
-		border-left: 0.5px solid var(--color-lightblack);
+		border-left: 0.5px solid var(--fragment-color-lightblack);
 	}
 
 	.row {
@@ -181,14 +181,14 @@
 		width: 100%;
 		height: 100%;
 
-		background-color: var(--color-background);
+		background-color: var(--fragment-background-color);
 	}
 
 	.row:not(:first-child) {
-		border-top: 0.5px solid var(--color-lightblack);
+		border-top: 0.5px solid var(--fragment-color-lightblack);
 	}
 
 	.row:not(:last-child) {
-		border-bottom: 0.5px solid var(--color-lightblack);
+		border-bottom: 0.5px solid var(--fragment-color-lightblack);
 	}
 </style>

package/src/client/app/ui/LayoutResizer.svelte

@@ -196,7 +196,7 @@
 
 	.resizer.dragging .resizer-hover.visible:before {
 		opacity: 1;
-		background-color: #177bd0;
+		background-color: var(--fragment-accent-color);
 	}
 
 	.resizer--horizontal {

package/src/client/app/ui/LayoutToolbar.svelte

@@ -64,9 +64,9 @@
 						label="Delete"
 						showLabel={false}
 						onclick={onDelete}
-						--color-text="white"
-						--background-color="var(--color-red)"
-						--box-shadow-color-active="var(--color-lightred)"
+						--fragment-text-color="white"
+						--background-color="var(--fragment-color-red)"
+						--box-shadow-color-active="var(--fragment-color-lightred)"
 					>
 						<IconCross />
 					</ButtonInput>
@@ -156,7 +156,7 @@
 		width: 1px;
 		height: var(--size);
 
-		background-color: var(--color-border-input);
+		background-color: var(--fragment-input-border-color);
 	}
 
 	.content.vertical .separator:after {
@@ -174,8 +174,8 @@
 		display: flex;
 		align-items: center;
 		padding: 6px;
-		border-radius: var(--border-radius-input);
-		background-color: var(--color-background);
+		border-radius: var(--fragment-input-border-radius);
+		background-color: var(--fragment-background-color);
 		border: 1px solid #555;
 		/* background: rgba(0, 0, 0, 0.8); */
 

package/src/client/app/ui/Module.svelte

@@ -79,7 +79,7 @@
 		flex-shrink: 0;
 		align-items: center;
 
-		background-color: var(--color-lightblack);
+		background-color: var(--fragment-color-lightblack);
 	}
 
 	.slot {
@@ -114,7 +114,7 @@
 	.module__container {
 		position: relative;
 
-		background-color: var(--color-background);
+		background-color: var(--fragment-background-color);
 	}
 
 	.module.scrollable .module__container {
@@ -135,7 +135,9 @@
 	}
 
 	.module__container::-webkit-scrollbar-thumb {
-		background-color: var(--color-active); /* color of the scroll thumb */
+		background-color: var(
+			--fragment-accent-color
+		); /* color of the scroll thumb */
 		border-radius: 20px; /*       roundness of the scroll thumb*/
 	}
 
@@ -144,6 +146,6 @@
 	}
 
 	.footer {
-		height: var(--height-input);
+		height: var(--fragment-input-height);
 	}
 </style>

package/src/client/app/ui/ModuleRenderer.svelte

@@ -74,14 +74,14 @@
 		text-transform: capitalize;
 		user-select: none;
 
-		background-color: var(--color-lightblack);
+		background-color: var(--fragment-color-lightblack);
 	}
 
 	.module-renderer-error {
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
-		color: var(--color-red);
+		color: var(--fragment-color-red);
 		font-size: 11px;
 		text-align: center;
 		background: #2a0000;
@@ -89,7 +89,7 @@
 	}
 
 	.message {
-		color: var(--color-text);
+		color: var(--fragment-text-color);
 	}
 
 	.module-name {

package/src/client/app/ui/OutputRenderer.svelte

@@ -134,7 +134,10 @@ void main() {
 		height: 100%;
 		justify-content: center;
 
-		background-color: var(--background-color, var(--color-lightblack));
+		background-color: var(
+			--background-color,
+			var(--fragment-color-lightblack)
+		);
 	}
 
 	.output-renderer :global(canvas) {

package/src/client/app/ui/SketchRenderer.svelte

@@ -155,7 +155,10 @@
 		justify-content: center;
 		align-items: center;
 
-		background-color: var(--background-color, var(--color-lightblack));
+		background-color: var(
+			--background-color,
+			var(--fragment-color-lightblack)
+		);
 
 		container-type: size;
 	}

package/src/client/app/ui/fields/ButtonInput.svelte

@@ -34,39 +34,39 @@
 	.button {
 		display: flex;
 		width: 100%;
-		min-width: var(--height-input);
-		height: var(--height-input);
+		min-width: var(--fragment-input-height);
+		height: var(--fragment-input-height);
 		justify-content: center;
 		align-items: center;
 		padding: 0 4px;
 
-		color: var(--color-text-input);
-		font-size: var(--font-size-input);
+		color: var(--text-color, var(--fragment-input-text-color));
+		font-size: var(--fragment-input-font-size);
 
-		border-radius: var(--border-radius-input);
+		border-radius: var(--fragment-input-border-radius);
 		background-color: var(
 			--background-color,
-			var(--color-background-input)
+			var(--fragment-input-background-color)
 		);
 		box-shadow: inset 0 0 0 1px
-			var(--box-shadow-color, var(--color-border-input));
+			var(--box-shadow-color, var(--fragment-input-border-color));
 		outline: 0;
 	}
 
 	.button:disabled {
-		color: var(--color-text-input-disabled);
+		color: var(--fragment-input-disabled-text-color);
 	}
 
 	:global(body:not(.fragment-dragging)) .button:not(:disabled):hover {
-		color: var(--color-text);
+		color: var(--text-color, var(--fragment-text-color));
 
 		box-shadow: inset 0 0 0 1px
-			var(--box-shadow-color-active, var(--color-active));
+			var(--box-shadow-color-active, var(--fragment-accent-color));
 	}
 
 	:global(body:not(.fragment-dragging)) .button:not(:disabled):active,
 	:global(body:not(.fragment-dragging)) .button:not(:disabled):focus-visible {
 		box-shadow: 0 0 0 2px
-			var(--box-shadow-color-active, var(--color-active));
+			var(--box-shadow-color-active, var(--fragment-accent-color));
 	}
 </style>

package/src/client/app/ui/fields/CheckboxInput.svelte

@@ -1,5 +1,11 @@
 <script>
-	let { value = $bindable(), context, key = '', disabled = false, onchange } = $props();
+	let {
+		value = $bindable(),
+		context,
+		key = '',
+		disabled = false,
+		onchange,
+	} = $props();
 
 	const handleChange = (event) => {
 		onchange(value);
@@ -21,28 +27,28 @@
 	.checkbox {
 		position: relative;
 
-		width: var(--height-input);
-		height: var(--height-input);
+		width: var(--fragment-input-height);
+		height: var(--fragment-input-height);
 		margin-right: calc(var(--padding));
-		box-shadow: inset 0 0 0 1px var(--color-border-input);
+		box-shadow: inset 0 0 0 1px var(--fragment-input-border-color);
 
-		border-radius: var(--border-radius-input);
-		background-color: var(--color-background-input);
+		border-radius: var(--fragment-input-border-radius);
+		background-color: var(--fragment-input-background-color);
 	}
 
 	.checkbox:hover {
-		box-shadow: inset 0 0 0 1px var(--color-active);
+		box-shadow: inset 0 0 0 1px var(--fragment-accent-color);
 	}
 
 	.checkbox:focus-within {
-		box-shadow: 0 0 0 2px var(--color-active);
+		box-shadow: 0 0 0 2px var(--fragment-accent-color);
 	}
 
 	.input {
 		width: 100%;
 		height: 100%;
 		border: none;
-		border-radius: var(--border-radius-input);
+		border-radius: var(--fragment-input-border-radius);
 		background-color: transparent;
 		outline: 0;
 	}
@@ -54,8 +60,8 @@
 		bottom: 3px;
 		right: 3px;
 
-		border-radius: calc(var(--border-radius-input) * 0.5);
-		background-color: var(--color-active);
+		border-radius: calc(var(--fragment-input-border-radius) * 0.5);
+		background-color: var(--fragment-accent-color);
 
 		opacity: 0;
 		pointer-events: none;
@@ -66,6 +72,6 @@
 	}
 
 	.input:checked:disabled + .checked {
-		background-color: var(--color-active-disabled);
+		background-color: var(--fragment-color-disabled);
 	}
 </style>

package/src/client/app/ui/fields/ColorInput.svelte

@@ -188,16 +188,16 @@
 		right: 1px;
 		bottom: 1px;
 
-		border-radius: calc(var(--border-radius-input) * 0.5);
+		border-radius: calc(var(--fragment-input-border-radius) * 0.5);
 	}
 
 	.mirror {
 		position: relative;
 
-		height: var(--height-input);
+		height: var(--fragment-input-height);
 
-		border-radius: var(--border-radius-input);
-		box-shadow: inset 0 0 0 1px var(--color-border-input);
+		border-radius: var(--fragment-input-border-radius);
+		box-shadow: inset 0 0 0 1px var(--fragment-input-border-color);
 	}
 
 	.mirror:after {
@@ -212,7 +212,7 @@
 		bottom: var(--gap);
 
 		background-color: var(--currentColor);
-		border-radius: calc(var(--border-radius-input) * 0.5);
+		border-radius: calc(var(--fragment-input-border-radius) * 0.5);
 		opacity: var(--opacity, 1);
 		pointer-events: none;
 	}
@@ -220,11 +220,13 @@
 	:global(body:not(.fragment-dragging))
 		.color-input:not(.disabled)
 		.mirror:hover {
-		box-shadow: inset 0 0 0 1px var(--box-shadow-color, var(--color-active));
+		box-shadow: inset 0 0 0 1px
+			var(--box-shadow-color, var(--fragment-accent-color));
 	}
 
 	.mirror:focus-within {
-		box-shadow: 0 0 0 2px var(--box-shadow-color, var(--color-active));
+		box-shadow: 0 0 0 2px
+			var(--box-shadow-color, var(--fragment-accent-color));
 	}
 
 	.input {

package/src/client/app/ui/fields/ImageInput.svelte

@@ -103,14 +103,14 @@
 	}
 
 	.preview {
-		width: calc(var(--height-input) * 1);
-		height: calc(var(--height-input) * 1);
+		width: calc(var(--fragment-input-height) * 1);
+		height: calc(var(--fragment-input-height) * 1);
 		display: grid;
 		place-items: center;
 
-		border-radius: var(--border-radius-input);
-		background-color: var(--color-background-input);
-		box-shadow: inset 0 0 0 1px var(--color-border-input);
+		border-radius: var(--fragment-input-border-radius);
+		background-color: var(--fragment-input-background-color);
+		box-shadow: inset 0 0 0 1px var(--fragment-input-border-color);
 
 		cursor: copy;
 		overflow: hidden;
@@ -124,14 +124,16 @@
 	}
 
 	.preview:hover {
-		color: var(--color-text);
+		color: var(--fragment-text-color);
 
-		box-shadow: inset 0 0 0 1px var(--box-shadow-color, var(--color-active));
+		box-shadow: inset 0 0 0 1px
+			var(--box-shadow-color, var(--fragment-accent-color));
 	}
 
 	.preview:active,
 	.img-container.dragover .preview {
-		box-shadow: 0 0 0 2px var(--box-shadow-color, var(--color-active));
+		box-shadow: 0 0 0 2px
+			var(--box-shadow-color, var(--fragment-accent-color));
 	}
 
 	.img-container.dragover {

package/src/client/app/ui/fields/Input.svelte

@@ -45,22 +45,22 @@
 		position: relative;
 
 		display: flex;
-		height: var(--height-input);
+		height: var(--fragment-input-height);
 		margin: 2px 0;
 
-		border-radius: var(--border-radius-input);
-		background-color: var(--color-background-input);
-		box-shadow: inset 0 0 0 1px var(--color-border-input);
+		border-radius: var(--fragment-input-border-radius);
+		background-color: var(--fragment-input-background-color);
+		box-shadow: inset 0 0 0 1px var(--fragment-input-border-color);
 	}
 
 	:global(body:not(.fragment-dragging))
 		.input-container:not(.disabled):hover {
-		box-shadow: inset 0 0 0 1px var(--color-active);
+		box-shadow: inset 0 0 0 1px var(--fragment-accent-color);
 	}
 
 	:global(body:not(.fragment-dragging))
 		.input-container:not(.disabled):focus-within {
-		box-shadow: 0 0 0 2px var(--color-active);
+		box-shadow: 0 0 0 2px var(--fragment-accent-color);
 	}
 
 	.label {
@@ -73,8 +73,8 @@
 		align-items: center;
 		padding: var(--padding);
 
-		color: var(--color-text);
-		font-size: var(--font-size-input);
+		color: var(--fragment-text-color);
+		font-size: var(--fragment-input-font-size);
 		font-weight: 600;
 		pointer-events: none;
 		opacity: 0.35;
@@ -89,8 +89,8 @@
 		height: 100%;
 		padding: 0 var(--padding);
 
-		color: var(--color-text-input);
-		font-size: var(--font-size-input);
+		color: var(--fragment-input-text-color);
+		font-size: var(--fragment-input-font-size);
 		text-align: right;
 
 		background: transparent;
@@ -98,14 +98,14 @@
 	}
 
 	.input:disabled {
-		color: var(--color-text-input-disabled);
+		color: var(--fragment-input-disabled-text-color);
 	}
 
 	.input:focus {
-		color: var(--color-text);
+		color: var(--fragment-text-color);
 	}
 
 	/* .input:focus {
-    border: var(--borderWidth) solid var(--color-active);
+    border: var(--borderWidth) solid var(--fragment-accent-color);
 } */
 </style>

package/src/client/app/ui/fields/IntervalInput.svelte

@@ -78,9 +78,6 @@
 					: Math.max(dragValue, value[1]),
 			];
 
-			value[0] = newValues[0];
-			value[1] = newValues[1];
-
 			onchange(newValues);
 		}
 	}
@@ -183,21 +180,21 @@
 		);
 		--tx-max-1: calc(100cqw - var(--padding-h) * 1 - var(--width));
 
-		height: var(--height-input);
-		border-radius: var(--border-radius-input);
-		box-shadow: inset 0 0 0 1px var(--color-border-input);
+		height: var(--fragment-input-height);
+		border-radius: var(--fragment-input-border-radius);
+		box-shadow: inset 0 0 0 1px var(--fragment-input-border-color);
 
-		background: var(--color-background-input);
+		background: var(--fragment-input-background-color);
 		cursor: ew-resize;
 		container-type: size;
 	}
 
 	:global(body:not(.fragment-dragging)) .range:hover {
-		box-shadow: inset 0 0 0 1px var(--color-active);
+		box-shadow: inset 0 0 0 1px var(--fragment-accent-color);
 	}
 
 	.range.dragging {
-		box-shadow: 0 0 0 2px var(--color-active);
+		box-shadow: 0 0 0 2px var(--fragment-accent-color);
 	}
 
 	.handler {
@@ -215,9 +212,9 @@
 
 		background: grey;
 		transform-origin: 0 50%;
-		border-radius: calc(var(--border-radius-input) * 0.5);
+		border-radius: calc(var(--fragment-input-border-radius) * 0.5);
 
-		background-color: var(--color-active);
+		background-color: var(--fragment-accent-color);
 
 		transform: translate3d(var(--tx), 0px, 0px);
 	}
@@ -233,7 +230,7 @@
 	}
 
 	.interval-input.disabled .handler {
-		background-color: var(--color-active-disabled);
+		background-color: var(--fragment-color-disabled);
 	}
 
 	.filler {
@@ -252,14 +249,14 @@
 				var(--size)
 		);
 		bottom: 3px;
-		background-color: var(--color-active);
+		background-color: var(--fragment-accent-color);
 		opacity: 0.5;
 
 		transform-origin: 0px 50%;
 	}
 
 	.interval-input.disabled .filler {
-		background-color: var(--color-active-disabled);
+		background-color: var(--fragment-color-disabled);
 	}
 
 	.numbers {