@lavalogic/scoria 0.0.1

package/dist/Components/Checkbox.svelte

@@ -0,0 +1,168 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import type { ChangeEventHandler } from 'svelte/elements';
+	import Icon from './Icon.svelte';
+	import type { IconProps } from './Icon.svelte';
+	import { Size } from '../Types/Internal/Size.js';
+	import { generateShortUUID } from '../Helpers/Helpers.svelte.js';
+
+	export interface CheckboxProps {
+		value: boolean;
+		id?: string;
+		icon?: IconProps;
+		size?: Size;
+		label?: string;
+		disabled?: boolean;
+		onchange?: ChangeEventHandler<HTMLInputElement>;
+	}
+
+	const sizes: Record<Size, string> = {
+		[Size.Tiny]: '1rem',
+		[Size.Small]: '1rem',
+		[Size.MediumSmall]: '1rem',
+		[Size.Medium]: '1.75rem',
+		[Size.MediumLarge]: '1.75rem',
+		[Size.Large]: '1.75rem',
+		[Size.XLarge]: '1.75rem',
+		[Size.DoubleXLarge]: '2.75rem',
+		[Size.TripleXLarge]: '2.75rem',
+		[Size.FillWidth]: '2.75rem',
+		[Size.FillHeight]: '2.75rem'
+	};
+</script>
+
+<script lang="ts">
+	let {
+		value = false,
+		id = generateShortUUID(),
+		icon,
+		size,
+		label,
+		disabled,
+		onchange
+	}: CheckboxProps = $props();
+
+	let ref: HTMLInputElement | undefined = $state();
+</script>
+
+{#if icon}
+	<!-- style="--inner-checkbox-container-width: {(size != undefined ? widths[size] : undefined) ??
+			'2.75rem'};" -->
+	<div
+		class="outer-checkbox-container"
+		class:fill-width={size === Size.FillWidth}
+		class:fill-height={size === Size.FillHeight}
+	>
+		<div class="inner-checkbox-container with-icon" class:disabled>
+			<input
+				{id}
+				name={id}
+				class="with-icon"
+				{onchange}
+				type="checkbox"
+				{disabled}
+				checked={value}
+				bind:this={ref}
+			/>
+			<label class="icon-label" for={id} class:disabled>
+				<Icon {...icon} size={icon.size ?? size ?? Size.DoubleXLarge} />
+			</label>
+		</div>
+		{#if label}
+			<label class="text-label" for={id}>{label}</label>
+		{/if}
+	</div>
+{:else}
+	<div class="checkbox-container">
+		<input {id} {onchange} type="checkbox" checked={value} {disabled} bind:this={ref} />
+		{#if label}
+			<label class="text-label" for={id}>{label}</label>
+		{/if}
+	</div>
+{/if}
+
+<style>.outer-checkbox-container {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: stretch;
+  justify-content: stretch;
+  aspect-ratio: 1/1;
+}
+.outer-checkbox-container.fill-width {
+  width: 100%;
+}
+.outer-checkbox-container.fill-height {
+  height: 100%;
+}
+.outer-checkbox-container:hover div.inner-checkbox-container:not(.disabled) {
+  border: solid 2px #676774;
+}
+.outer-checkbox-container .icon-label {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.checkbox-container {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+.checkbox-container input {
+  width: 3rem;
+  height: 3rem;
+}
+
+label.text-label {
+  padding-left: 1rem;
+}
+
+input {
+  cursor: pointer;
+  accent-color: var(--colour, #259fc7);
+}
+
+input.with-icon {
+  cursor: pointer;
+  border: 0;
+  clip-path: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+div.inner-checkbox-container {
+  width: 100%;
+  height: 100%;
+  background-color: #ffffff;
+  color: #ffffff;
+  fill: #ffffff;
+  border: solid 2px #8f8f9d;
+  border-radius: 4px;
+}
+div.inner-checkbox-container label:not(.disabled):hover {
+  color: #8096a5;
+  fill: #8096a5;
+}
+div.inner-checkbox-container input:checked:not([disabled=true]) + label {
+  background-color: #259fc7;
+  color: #ffffff;
+  fill: #ffffff;
+}
+div.inner-checkbox-container input:checked:not([disabled=true]) + label:hover {
+  color: #1f81a0;
+  fill: #1f81a0;
+}
+
+label {
+  display: block;
+  cursor: pointer;
+  position: relative;
+}</style>

package/dist/Components/Checkbox.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { ChangeEventHandler } from 'svelte/elements';
+import type { IconProps } from './Icon.svelte';
+import { Size } from '../Types/Internal/Size.js';
+export interface CheckboxProps {
+    value: boolean;
+    id?: string;
+    icon?: IconProps;
+    size?: Size;
+    label?: string;
+    disabled?: boolean;
+    onchange?: ChangeEventHandler<HTMLInputElement>;
+}
+declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/Components/CollapsibleCard.svelte

@@ -0,0 +1,136 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+
+	export interface CollapsibleCard {
+		title?: string;
+		subtitle?: string | Promise<string>;
+		children: Snippet;
+		maxHeight?: number;
+		grow?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	import Action from './Action.svelte';
+	import { Size } from '../Types/Internal/Size.js';
+	import { Colour } from '../scss/colours.js';
+
+	let { title, subtitle, maxHeight: maxHeight, children, grow }: CollapsibleCard = $props();
+
+	let isCollapsed = $state(false);
+
+	let cardRef: HTMLDivElement | undefined = $state();
+
+	let cardMaxHeight = $derived(
+		cardRef && maxHeight != undefined && maxHeight > 0 && `${maxHeight}px`
+	);
+</script>
+
+<div
+	class="collapsible-card"
+	bind:this={cardRef}
+	style={cardMaxHeight ? `--card-max-height: ${cardMaxHeight};` : ''}
+	class:is-collapsed={isCollapsed}
+	class:grow
+>
+	<div class="heading">
+		<div class="left">
+			<h3>{title}</h3>
+			{#if subtitle}
+				{#await subtitle}
+					<span>loading…</span>
+				{:then subtitle}
+					<span>{subtitle}</span>
+				{/await}
+			{/if}
+		</div>
+		<div class="right">
+			<Action
+				label={isCollapsed ? 'Expand' : 'Collapse'}
+				onclick={() => {
+					isCollapsed = !isCollapsed;
+				}}
+				size={Size.TripleXLarge}
+				icon={{
+					name: isCollapsed ? 'circle-plus' : 'circle-minus',
+					colour: Colour['$ui-blue-5'],
+					size: Size.Medium
+				}}
+			/>
+		</div>
+	</div>
+
+	<div class="content" class:is-collapsed={isCollapsed}>
+		{@render children()}
+	</div>
+</div>
+
+<style>.collapsible-card {
+  background-color: white;
+  border-radius: 4px;
+  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1333333333);
+  padding: 1.5rem;
+}
+.collapsible-card.grow {
+  flex-grow: 1;
+}
+.collapsible-card .heading {
+  display: flex;
+  flex-flow: row nowrap;
+  transition: margin ease-out 0.15s 0s;
+  box-sizing: border-box;
+  padding: 0 0.5rem 0.5rem 0.5rem;
+}
+.collapsible-card .heading .left {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+}
+.collapsible-card .heading .left h3 {
+  margin: 0;
+  margin-top: 0.25rem;
+  color: #46525b;
+  font-weight: 500;
+  font-size: 1.125rem;
+}
+.collapsible-card .heading .left span {
+  margin-top: auto;
+  margin-bottom: 0.25rem;
+  color: #647d8e;
+  font-size: 0.875rem;
+}
+.collapsible-card .heading .right {
+  margin-left: auto;
+}
+.collapsible-card:not(.is-collapsed) .heading {
+  margin-bottom: 1rem;
+  border-bottom: solid 1px #e8e8e8;
+}
+
+div.content {
+  display: flex;
+  flex-flow: column nowrap;
+  transition: max-height ease-out 0.15s 0s, opacity ease-out 0.15s 0.1s;
+  max-height: var(--card-max-height, 100%);
+  height: var(--card-max-height);
+  opacity: 1;
+  width: 100%;
+}
+div.content.is-collapsed {
+  animation: accordion ease-out 0.15s 0s forwards;
+  max-height: 0px;
+}
+@keyframes accordion {
+  0% {
+    opacity: 1;
+    max-height: var(--card-max-height, 90vh);
+    overflow: auto;
+  }
+  100% {
+    opacity: 0;
+    max-height: 0px;
+    overflow: hidden;
+  }
+}</style>

package/dist/Components/CollapsibleCard.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+export interface CollapsibleCard {
+    title?: string;
+    subtitle?: string | Promise<string>;
+    children: Snippet;
+    maxHeight?: number;
+    grow?: boolean;
+}
+declare const CollapsibleCard: any;
+type CollapsibleCard = ReturnType<typeof CollapsibleCard>;
+export default CollapsibleCard;

package/dist/Components/Contexts/ContextMenu.svelte

@@ -0,0 +1,73 @@
+<svelte:options runes />
+
+<script lang="ts">
+	import { ContextMenuContext } from '../../Contexts/ContextMenuContext.svelte.js';
+	import { tick, getContext } from 'svelte';
+	import { fade } from 'svelte/transition';
+	import ContextMenuOption from './ContextMenuOption.svelte';
+
+	const contextMenuContext = getContext<ContextMenuContext>(ContextMenuContext.identifier);
+
+	let _x: number = $state(0);
+	let _y: number = $state(0);
+
+	$effect(() => {
+		if (contextMenuContext.showMenu) {
+			recalculateCoordinates();
+		}
+	});
+
+	function recalculateCoordinates() {
+		_x = contextMenuContext.x;
+		_y = contextMenuContext.y;
+
+		tick().then(() => {
+			const rect = menuEl?.getBoundingClientRect();
+			if (!rect) {
+				return;
+			}
+			_x = Math.min(window.innerWidth - rect.width, _x);
+			if (_y > window.innerHeight - rect.height) {
+				_y -= rect.height;
+			}
+		});
+	}
+
+	let menuEl: HTMLDivElement | undefined = $state();
+	function onPageClick(e: MouseEvent) {
+		if (!menuEl) {
+			return;
+		}
+		if (e.target === menuEl || menuEl.contains(e.target as Node)) return;
+		contextMenuContext.closeMenu();
+	}
+</script>
+
+<svelte:body onclick={onPageClick} />
+
+{#if contextMenuContext.showMenu}
+	<div transition:fade={{ duration: 50 }} bind:this={menuEl} style="top: {_y}px; left: {_x}px;">
+		{#each contextMenuContext.items as item (item)}
+			<ContextMenuOption
+				disabled={item.disabled}
+				onclick={() => {
+					item.callback();
+					contextMenuContext.closeMenu();
+				}}
+				text={item.text}
+			/>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	div {
+		position: fixed;
+		display: grid;
+		border: 1px solid #0003;
+		box-shadow: 2px 2px 5px 0px #0002;
+		background: white;
+		z-index: 9999;
+		line-height: initial;
+	}
+</style>

package/dist/Components/Contexts/ContextMenu.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ContextMenu: import("svelte").Component<Record<string, never>, {}, "">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;

package/dist/Components/Contexts/ContextMenuDivider.svelte

@@ -0,0 +1,11 @@
+<svelte:options runes />
+
+<hr />
+
+<style>
+	hr {
+		border-top: 1px solid #0003;
+		width: 100%;
+		margin: 2px 0;
+	}
+</style>

package/dist/Components/Contexts/ContextMenuDivider.svelte.d.ts

@@ -0,0 +1,6 @@
+export default ContextMenuDivider;
+type ContextMenuDivider = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, never>>): void;
+};
+declare const ContextMenuDivider: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/Components/Contexts/ContextMenuOption.svelte

@@ -0,0 +1,65 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import { dev } from '$app/environment';
+	import type { Snippet } from 'svelte';
+
+	export interface ContextMenuOptionProps {
+		text?: string;
+		disabled?: boolean | undefined;
+		onclick?: (e: MouseEvent) => void;
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	let {
+		text = $bindable(''),
+		disabled = false,
+		onclick,
+		children
+	}: ContextMenuOptionProps = $props();
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="context-menu-item"
+	class:disabled
+	onclick={(e) => {
+		e.stopImmediatePropagation();
+		e.stopPropagation();
+		e.preventDefault();
+		onclick?.(e);
+	}}
+>
+	{#if text}
+		{text}
+	{:else if children}
+		{@render children()}
+	{:else if dev}
+		debug: no value passed
+	{/if}
+</div>
+
+<style>div {
+  padding: 4px 15px;
+  cursor: default;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  grid-gap: 5px;
+  user-select: none;
+}
+
+div:hover {
+  background: rgba(0, 0, 0, 0.1333333333);
+}
+
+div.disabled {
+  color: rgba(0, 0, 0, 0.4);
+}
+
+div.disabled:hover {
+  background: #ffffff;
+}</style>

package/dist/Components/Contexts/ContextMenuOption.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+export interface ContextMenuOptionProps {
+    text?: string;
+    disabled?: boolean | undefined;
+    onclick?: (e: MouseEvent) => void;
+    children?: Snippet;
+}
+declare const ContextMenuOption: import("svelte").Component<ContextMenuOptionProps, {}, "text">;
+type ContextMenuOption = ReturnType<typeof ContextMenuOption>;
+export default ContextMenuOption;

package/dist/Components/Contexts/Toast.svelte

@@ -0,0 +1,89 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import { ColourSet } from '../../scss/colours.js';
+	import type { IdentifiableToastMessage } from '../../Types/Internal/IdentifiableToastMessage.js';
+	import { Size } from '../../Types/Internal/Size.js';
+	import { Validity } from '../../Types/Internal/Validity.js';
+	import { slide } from 'svelte/transition';
+	import Action from '../Action.svelte';
+	import Icon from '../Icon.svelte';
+
+	export interface ToastProps {
+		toast: IdentifiableToastMessage;
+		copy: () => void;
+	}
+</script>
+
+<script lang="ts">
+	let { toast, copy }: ToastProps = $props();
+</script>
+
+<article
+	class:info={toast.result == Validity.Info}
+	class:success={toast.result == Validity.Valid}
+	class:warning={toast.result == Validity.Warning}
+	class:error={toast.result == Validity.Invalid}
+	transition:slide={{ axis: 'x', duration: 500 }}
+>
+	<div>
+		<div class="noshrink">
+			{#if toast.copyable != false && navigator.clipboard}
+				<Action
+					onclick={copy}
+					icon={{ name: 'copy' }}
+					size={Size.MediumLarge}
+					colourSet={ColourSet.Auxiliary}
+				/>
+			{:else}
+				<Icon name="info" size={Size.MediumLarge} />
+			{/if}
+		</div>
+		<span>{toast.message}</span>
+		{#if toast.closeable}
+			<div class="noshrink">
+				<Action
+					size={Size.MediumLarge}
+					icon={{ name: 'cross' }}
+					onclick={() => {
+						toast.close?.();
+					}}
+					colourSet={ColourSet.Auxiliary}
+				/>
+			</div>
+		{/if}
+	</div>
+</article>
+
+<style>article {
+  font-weight: 700;
+  font-size: 1.12rem;
+  padding: 0.75rem;
+  border-radius: 4px;
+}
+article.info, article.success {
+  color: #ffffff;
+  --colour: #ffffff;
+  background-color: #259fc7;
+}
+article.warning {
+  color: #ffffff;
+  --colour: #ffffff;
+  background-color: #e7b500;
+}
+article.error {
+  color: #ffffff;
+  --colour: #ffffff;
+  background-color: #aa1414;
+}
+article > div {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 0.75rem;
+  align-items: center;
+}
+article span {
+  text-wrap: nowrap;
+  word-break: keep-all;
+  overflow: hidden;
+}</style>

package/dist/Components/Contexts/Toast.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { IdentifiableToastMessage } from '../../Types/Internal/IdentifiableToastMessage.js';
+export interface ToastProps {
+    toast: IdentifiableToastMessage;
+    copy: () => void;
+}
+declare const Toast: import("svelte").Component<ToastProps, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/Components/Contexts/ToastContainer.svelte

@@ -0,0 +1,54 @@
+<svelte:options runes />
+
+<script lang="ts">
+	import { ToastContext } from '../../Contexts/ToastContext.svelte.js';
+	import { Validity } from '../../Types/Internal/Validity.js';
+	import { getContext } from 'svelte';
+	import Toast from './Toast.svelte';
+
+	const toastContext = getContext<ToastContext>(ToastContext.identifier);
+
+	function copyDataToClipboard(text: string) {
+		if (!navigator.clipboard) {
+			toastContext.toast({
+				result: Validity.Invalid,
+				message: 'Cannot Copy in an Insecure Connection',
+				copyable: false
+			});
+			return;
+		}
+
+		// copy plain value
+
+		navigator.clipboard.writeText(text);
+		toastContext.toast({
+			result: Validity.Info,
+			message: 'Message copied to clipboard',
+			copyable: false
+		});
+	}
+</script>
+
+<section>
+	{#each toastContext.toasts as toast (toast)}
+		<Toast
+			{toast}
+			copy={() => {
+				copyDataToClipboard(toast.getVerbose?.() ?? toast.message);
+			}}
+		/>
+	{/each}
+</section>
+
+<style>section {
+  user-select: none;
+  gap: 0.5rem;
+  bottom: 8rem;
+  right: 2rem;
+  display: flex;
+  position: fixed;
+  flex-flow: column-reverse nowrap;
+  justify-content: flex-end;
+  align-items: flex-end;
+  z-index: 9999;
+}</style>

package/dist/Components/Contexts/ToastContainer.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ToastContainer: import("svelte").Component<Record<string, never>, {}, "">;
+type ToastContainer = ReturnType<typeof ToastContainer>;
+export default ToastContainer;