smorks-svelte-ui 0.0.1-alpha.1

package/README.md

@@ -0,0 +1,58 @@
+# create-svelte
+
+Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```bash
+npm run package
+```
+
+To create a production version of your showcase app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```bash
+npm publish
+```

package/dist/components/ButtonSpinner.svelte

@@ -0,0 +1,88 @@
+<script>import IconBase from "./icons/IconBase.svelte";
+import Spinner from "./Spinner.svelte";
+export let label = void 0;
+export let color = void 0;
+export let onClick = void 0;
+export let icon = void 0;
+let working = false;
+export async function buttonClick() {
+  if (working) {
+    return;
+  }
+  working = true;
+  if (onClick) {
+    await onClick();
+  }
+  working = false;
+}
+</script>
+
+<div class="container">
+	<button class="button{color ? ' ' + color : ''}" on:click={buttonClick}>
+		<div class="outer">
+			{#if working}
+				<div class="spinner">
+					<Spinner />
+				</div>
+			{/if}
+			<div class="content" class:hidden={working}>
+				{#if icon}
+					<div class="icon">
+						<IconBase name={label} {icon} />
+					</div>
+				{/if}
+				{#if label}
+					<div class="label">{label}</div>
+				{/if}
+				<div class="inner">
+					<slot />
+				</div>
+			</div>
+		</div>
+	</button>
+</div>
+
+<style>
+	.container {
+		display: inline-block;
+	}
+	.button {
+		cursor: pointer;
+	}
+	.outer {
+		position: relative;
+	}
+	.content {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.icon {
+		padding-right: 4px;
+	}
+	.button .spinner {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		overflow: hidden;
+	}
+	.button .spinner .inner {
+		width: 1.2em;
+		height: 1.2em;
+	}
+	.button .label {
+		min-height: 1.2em;
+	}
+	.inner {
+		display: flex;
+		align-items: center;
+	}
+	.hidden {
+		visibility: hidden;
+	}
+</style>

package/dist/components/ButtonSpinner.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        label?: string | undefined;
+        color?: string | undefined;
+        onClick?: (() => Promise<void>) | undefined;
+        icon?: string | undefined;
+        buttonClick?: (() => Promise<void>) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ButtonSpinnerProps = typeof __propDef.props;
+export type ButtonSpinnerEvents = typeof __propDef.events;
+export type ButtonSpinnerSlots = typeof __propDef.slots;
+export default class ButtonSpinner extends SvelteComponent<ButtonSpinnerProps, ButtonSpinnerEvents, ButtonSpinnerSlots> {
+    get buttonClick(): () => Promise<void>;
+}
+export {};

package/dist/components/Form.svelte

@@ -0,0 +1,15 @@
+<script>import { createEventDispatcher } from "svelte";
+let dispatch = createEventDispatcher();
+function handleKeyUp(e) {
+  if (e.key === "Enter") {
+    dispatch("keyup-enter");
+  } else if (e.key === "Escape") {
+    dispatch("keyup-esc");
+  }
+}
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<div role="group" on:keyup={handleKeyUp}>
+	<slot />
+</div>

package/dist/components/Form.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        'keyup-enter': CustomEvent<any>;
+        'keyup-esc': CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type FormProps = typeof __propDef.props;
+export type FormEvents = typeof __propDef.events;
+export type FormSlots = typeof __propDef.slots;
+export default class Form extends SvelteComponent<FormProps, FormEvents, FormSlots> {
+}
+export {};

package/dist/components/Spinner.svelte

@@ -0,0 +1,52 @@
+<div class="container">
+	<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" role="presentation">
+		<ellipse cx="50" cy="50" rx="45" ry="45" />
+	</svg>
+</div>
+
+<style>
+	.container {
+		width: 100%;
+		height: 100%;
+	}
+	.container svg {
+		animation: 2s linear infinite spinner-svg;
+		width: 100%;
+		height: 100%;
+	}
+	.container ellipse {
+		animation: 1.4s ease-in-out infinite both spinner-circle;
+		display: block;
+		fill: transparent;
+		stroke: currentColor;
+		stroke-linecap: round;
+		stroke-dasharray: 283;
+		stroke-dashoffset: 280;
+		stroke-width: 10px;
+		transform-origin: 50% 50%;
+	}
+	@keyframes spinner-svg {
+		0% {
+			transform: rotateZ(0deg);
+		}
+		100% {
+			transform: rotateZ(360deg);
+		}
+	}
+	@keyframes spinner-circle {
+		0%,
+		25% {
+			stroke-dashoffset: 280;
+			transform: rotate(0);
+		}
+		50%,
+		75% {
+			stroke-dashoffset: 75;
+			transform: rotate(45deg);
+		}
+		100% {
+			stroke-dashoffset: 280;
+			transform: rotate(360deg);
+		}
+	}
+</style>

package/dist/components/Spinner.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  SpinnerProps */
+/** @typedef {typeof __propDef.events}  SpinnerEvents */
+/** @typedef {typeof __propDef.slots}  SpinnerSlots */
+export default class Spinner extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SpinnerProps = typeof __propDef.props;
+export type SpinnerEvents = typeof __propDef.events;
+export type SpinnerSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/TextField.svelte

@@ -0,0 +1,103 @@
+<script>import { onMount, createEventDispatcher } from "svelte";
+export let label;
+export let readonly = false;
+export let type = "text";
+export let value = void 0;
+export let num = void 0;
+export let focus = false;
+export let items = void 0;
+const dispatch = createEventDispatcher();
+let inputEl;
+let selectEl;
+onMount(() => {
+  if (focus) {
+    inputEl.focus();
+  }
+});
+function numericKeyDown(e) {
+  let valid = false;
+  if (e.key.length == 1) {
+    const keyCode = e.key.charCodeAt(0);
+    valid = keyCode >= 48 && keyCode <= 57;
+  } else {
+    valid = e.key === "Backspace" || e.key === "Tab";
+  }
+  if (!valid) {
+    e.preventDefault();
+  }
+  return true;
+}
+function dropdownChange() {
+  dispatch("dropdown-change", { value: selectEl.value });
+}
+</script>
+
+<div class="field-container" class:readonly>
+	<div class="field">
+		<div class="label">{label}</div>
+		{#if type === 'password'}
+			<input class="input" type="password" bind:value bind:this={inputEl} />
+		{:else if type === 'numeric'}
+			<input
+				class="input number"
+				type="number"
+				bind:value={num}
+				bind:this={inputEl}
+				on:keydown={numericKeyDown}
+			/>
+		{:else if type === 'dropdown'}
+			<select class="input select" bind:value bind:this={selectEl} on:change={dropdownChange}>
+				{#if items}
+					{#each items as item}
+						<option>{item}</option>
+					{/each}
+				{/if}
+			</select>
+		{:else}
+			<input class="input" type="text" bind:value bind:this={inputEl} />
+		{/if}
+	</div>
+</div>
+
+<style>
+	.field-container {
+		text-align: left;
+		background-color: var(--field-bg);
+		border-radius: 4px;
+		margin: 2px 0;
+		border: 1px solid transparent;
+	}
+	.field-container:focus-within {
+		border-color: var(--highlight);
+		box-shadow: 0 0 5px var(--highlight);
+	}
+	.field-container.readonly:focus-within {
+		border-color: transparent;
+		box-shadow: none;
+	}
+	.field {
+		padding: 2px;
+		width: 100%;
+		min-width: 16rem;
+	}
+	.field .label {
+		font-size: 0.7em;
+		font-weight: bold;
+		color: var(--field-label);
+	}
+	.field .input {
+		color: var(--fg);
+		background-color: transparent;
+		border: 0;
+		width: 100%;
+	}
+	.field .input.number {
+		appearance: textfield;
+	}
+	.field .input.select {
+		background-color: var(--field-bg);
+	}
+	.field .input:focus {
+		outline: none !important;
+	}
+</style>

package/dist/components/TextField.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        label: string;
+        readonly?: boolean | undefined;
+        type?: "text" | "password" | "numeric" | "dropdown" | undefined;
+        value?: string | undefined;
+        num?: number | undefined;
+        focus?: boolean | undefined;
+        items?: string[] | undefined;
+    };
+    events: {
+        'dropdown-change': CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TextFieldProps = typeof __propDef.props;
+export type TextFieldEvents = typeof __propDef.events;
+export type TextFieldSlots = typeof __propDef.slots;
+export default class TextField extends SvelteComponent<TextFieldProps, TextFieldEvents, TextFieldSlots> {
+}
+export {};

package/dist/components/ToastList.svelte

@@ -0,0 +1,19 @@
+<script>import ToastSingle from "./ToastSingle.svelte";
+import { toastList } from "../store/toast-list";
+import { slide } from "svelte/transition";
+function onToastHide(t) {
+  toastList.remove(t.id);
+}
+</script>
+
+{#each $toastList.toasts as toast (toast.id)}
+	<div class="toast" transition:slide={{ axis: 'y' }}>
+		<ToastSingle {toast} on:toast-hide={() => onToastHide(toast)} />
+	</div>
+{/each}
+
+<style>
+	.toast {
+		padding-bottom: 4px;
+	}
+</style>

package/dist/components/ToastList.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToastListProps = typeof __propDef.props;
+export type ToastListEvents = typeof __propDef.events;
+export type ToastListSlots = typeof __propDef.slots;
+export default class ToastList extends SvelteComponent<ToastListProps, ToastListEvents, ToastListSlots> {
+}
+export {};

package/dist/components/ToastSingle.svelte

@@ -0,0 +1,46 @@
+<script>import { createEventDispatcher, onMount } from "svelte";
+import { fade } from "svelte/transition";
+export let toast;
+export let timeout = 2e3;
+let show = true;
+let dispatch = createEventDispatcher();
+let id = void 0;
+onMount(() => {
+  id = setTimeout(() => {
+    id = void 0;
+    show = false;
+  }, timeout);
+});
+function fadeOutEnd() {
+  dispatch("toast-hide");
+}
+</script>
+
+{#if show}
+	<div
+		class="toast"
+		class:normal={toast.type == 'normal'}
+		class:error={toast.type == 'error'}
+		class:success={toast.type == 'success'}
+		transition:fade={{ duration: 500 }}
+		on:outroend={fadeOutEnd}
+	>
+		{toast.text}
+	</div>
+{/if}
+
+<style>
+	.toast {
+		padding: 4px;
+		border-radius: 4px;
+	}
+	.normal {
+		background-color: lightgray;
+	}
+	.error {
+		background-color: lightpink;
+	}
+	.success {
+		background-color: lightgreen;
+	}
+</style>

package/dist/components/ToastSingle.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { Toast } from '../store/toast-list';
+declare const __propDef: {
+    props: {
+        toast: Toast;
+        timeout?: number | undefined;
+    };
+    events: {
+        'toast-hide': CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToastSingleProps = typeof __propDef.props;
+export type ToastSingleEvents = typeof __propDef.events;
+export type ToastSingleSlots = typeof __propDef.slots;
+export default class ToastSingle extends SvelteComponent<ToastSingleProps, ToastSingleEvents, ToastSingleSlots> {
+}
+export {};

package/dist/components/UiStyle.svelte

@@ -0,0 +1,238 @@
+<slot />
+
+<style global>@media screen and (prefers-color-scheme: light) {
+  :root {
+    --bg: white;
+    --fg: black;
+    --fgf: #666;
+    --highlight: #d79921;
+    --link: #458588;
+    --hdr: #ccc;
+    --hdr-link: #3383a6;
+    --field-bg: #ddd;
+    --field-label: #3c3836;
+    --red1: #9d0006;
+    --red2: #cc241d;
+    --red3: #fb4934;
+    --red4: #fa897d;
+    --blue1: #073c78;
+    --blue2: #456888;
+    --blue3: #8393a5;
+    --blue4: #aac0d6;
+    --green1: #2c790e;
+    --green2: #4c981a;
+    --green3: #6ebb26;
+    --green4: #92dc51;
+    --overlay: #0007;
+    --popup-bg: #666;
+    --popup-hdr-bg: #777;
+  }
+  :root.dark-mode {
+    --bg: black;
+    --fg: white;
+    --fgf: #666;
+    --highlight: #d79921;
+    --link: #57a7ab;
+    --hdr: #333;
+    --hdr-link: #1b4557;
+    --field-bg: #222;
+    --field-label: #8f8681;
+    --red4: #9d0006;
+    --red3: #cc241d;
+    --red2: #fb4934;
+    --red1: #fa897d;
+    --blue4: #073c78;
+    --blue3: #456888;
+    --blue2: #8393a5;
+    --blue1: #aac0d6;
+    --green4: #2c790e;
+    --green3: #4c981a;
+    --green2: #6ebb26;
+    --green1: #92dc51;
+    --overlay: #0007;
+    --popup-bg: #555;
+    --popup-hdr-bg: #666;
+  }
+}
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --bg: black;
+    --fg: white;
+    --fgf: #666;
+    --highlight: #d79921;
+    --link: #57a7ab;
+    --hdr: #333;
+    --hdr-link: #1b4557;
+    --field-bg: #222;
+    --field-label: #8f8681;
+    --red4: #9d0006;
+    --red3: #cc241d;
+    --red2: #fb4934;
+    --red1: #fa897d;
+    --blue4: #073c78;
+    --blue3: #456888;
+    --blue2: #8393a5;
+    --blue1: #aac0d6;
+    --green4: #2c790e;
+    --green3: #4c981a;
+    --green2: #6ebb26;
+    --green1: #92dc51;
+    --overlay: #0007;
+    --popup-bg: #555;
+    --popup-hdr-bg: #666;
+  }
+  :root.light-mode {
+    --bg: white;
+    --fg: black;
+    --fgf: #666;
+    --highlight: #d79921;
+    --link: #458588;
+    --hdr: #ccc;
+    --hdr-link: #3383a6;
+    --field-bg: #ddd;
+    --field-label: #3c3836;
+    --red1: #9d0006;
+    --red2: #cc241d;
+    --red3: #fb4934;
+    --red4: #fa897d;
+    --blue1: #073c78;
+    --blue2: #456888;
+    --blue3: #8393a5;
+    --blue4: #aac0d6;
+    --green1: #2c790e;
+    --green2: #4c981a;
+    --green3: #6ebb26;
+    --green4: #92dc51;
+    --overlay: #0007;
+    --popup-bg: #666;
+    --popup-hdr-bg: #777;
+  }
+}
+body {
+  font-family: sans-serif;
+  margin: 0;
+  background-color: var(--bg);
+  color: var(--fg);
+}
+a {
+  color: var(--link);
+  transition: filter 0.25s;
+}
+a:visited {
+  color: var(--link);
+}
+a:hover {
+  filter: brightness(1.3);
+}
+.small {
+  font-size: 0.75rem;
+  color: var(--fgf);
+}
+.flex-v {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+}
+.button {
+  color: var(--bg);
+  cursor: pointer;
+  padding: 6px;
+  margin-right: 6px;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  background-color: var(--blue3);
+  min-width: 60px;
+  transition: filter 0.25s, transform 0.1s;
+}
+.button:hover {
+  filter: brightness(0.8);
+  border-color: var(--highlight);
+  box-shadow: 0 0 5px var(--highlight);
+}
+.button:active {
+  transform: scale(0.95);
+}
+.button.red {
+  background-color: var(--red3);
+}
+.button.green {
+  background-color: var(--green3);
+}
+.button.blue {
+  background-color: var(--blue3);
+}
+.buttons-flex-h {
+  display: flex;
+}
+/* popup classes */
+.popup.container {
+  display: flex;
+  background-color: var(--overlay);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2000;
+  justify-content: center;
+  align-items: center;
+  color: var(--bg);
+}
+.popup.main {
+  background-color: var(--popup-bg);
+  padding-bottom: 6px;
+  max-width: 85%;
+}
+.popup.main .header {
+  background-color: var(--popup-hdr-bg);
+  padding: 8px;
+  font-weight: bold;
+}
+.popup.main .item {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.popup.main .body {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.table {
+  text-align: left;
+  border: 1px solid var(--fg);
+  border-spacing: 0;
+  border-collapse: collapse;
+  margin: 10px auto;
+}
+.table th,
+.table td {
+  border: 1px solid var(--fg);
+  padding: 2px 4px;
+}
+.table th {
+  background-color: var(--blue3);
+  color: var(--bg);
+}
+.table td.center {
+  text-align: center;
+}
+.table td.name,
+.table th.name {
+  width: 10rem;
+}
+.table td.actions,
+.table th.actions {
+  width: 36px;
+}
+.table td.actions > div {
+  display: flex;
+  justify-content: center;
+}
+@media only screen and (max-width: 768px) {
+  .flex-v {
+    width: 100%;
+    padding: 0 8px;
+  }
+  .flex-v.nopad {
+    padding: 0;
+  }
+}</style>

package/dist/components/UiStyle.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  UiStyleProps */
+/** @typedef {typeof __propDef.events}  UiStyleEvents */
+/** @typedef {typeof __propDef.slots}  UiStyleSlots */
+export default class UiStyle extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type UiStyleProps = typeof __propDef.props;
+export type UiStyleEvents = typeof __propDef.events;
+export type UiStyleSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/components/icons/IconBase.svelte

@@ -0,0 +1,20 @@
+<script>export let name;
+export let width = 18;
+export let height = 18;
+export let fill = "currentColor";
+export let icon;
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	{width}
+	{height}
+	viewBox="0 0 24 24"
+	aria-labelledby={name}
+	role="presentation"
+>
+	<title id={name} lang="en">{name}</title>
+	<g {fill}>
+		{@html icon}
+	</g>
+</svg>

package/dist/components/icons/IconBase.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        name: string | undefined;
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+        icon: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IconBaseProps = typeof __propDef.props;
+export type IconBaseEvents = typeof __propDef.events;
+export type IconBaseSlots = typeof __propDef.slots;
+export default class IconBase extends SvelteComponent<IconBaseProps, IconBaseEvents, IconBaseSlots> {
+}
+export {};

package/dist/components/style/main.scss

@@ -0,0 +1,253 @@
+@media screen and (prefers-color-scheme: light) {
+	:root {
+		--bg: white;
+		--fg: black;
+		--fgf: #666;
+		--highlight: #d79921;
+		--link: #458588;
+		--hdr: #ccc;
+		--hdr-link: #3383a6;
+		--field-bg: #ddd;
+		--field-label: #3c3836;
+		--red1: #9d0006;
+		--red2: #cc241d;
+		--red3: #fb4934;
+		--red4: #fa897d;
+		--blue1: #073c78;
+		--blue2: #456888;
+		--blue3: #8393a5;
+		--blue4: #aac0d6;
+		--green1: #2c790e;
+		--green2: #4c981a;
+		--green3: #6ebb26;
+		--green4: #92dc51;
+		--overlay: #0007;
+		--popup-bg: #666;
+		--popup-hdr-bg: #777;
+	}
+
+	:root.dark-mode {
+		--bg: black;
+		--fg: white;
+		--fgf: #666;
+		--highlight: #d79921;
+		--link: #57a7ab;
+		--hdr: #333;
+		--hdr-link: #1b4557;
+		--field-bg: #222;
+		--field-label: #8f8681;
+		--red4: #9d0006;
+		--red3: #cc241d;
+		--red2: #fb4934;
+		--red1: #fa897d;
+		--blue4: #073c78;
+		--blue3: #456888;
+		--blue2: #8393a5;
+		--blue1: #aac0d6;
+		--green4: #2c790e;
+		--green3: #4c981a;
+		--green2: #6ebb26;
+		--green1: #92dc51;
+		--overlay: #0007;
+		--popup-bg: #555;
+		--popup-hdr-bg: #666;
+	}
+}
+
+@media screen and (prefers-color-scheme: dark) {
+	:root {
+		--bg: black;
+		--fg: white;
+		--fgf: #666;
+		--highlight: #d79921;
+		--link: #57a7ab;
+		--hdr: #333;
+		--hdr-link: #1b4557;
+		--field-bg: #222;
+		--field-label: #8f8681;
+		--red4: #9d0006;
+		--red3: #cc241d;
+		--red2: #fb4934;
+		--red1: #fa897d;
+		--blue4: #073c78;
+		--blue3: #456888;
+		--blue2: #8393a5;
+		--blue1: #aac0d6;
+		--green4: #2c790e;
+		--green3: #4c981a;
+		--green2: #6ebb26;
+		--green1: #92dc51;
+		--overlay: #0007;
+		--popup-bg: #555;
+		--popup-hdr-bg: #666;
+	}
+	:root.light-mode {
+		--bg: white;
+		--fg: black;
+		--fgf: #666;
+		--highlight: #d79921;
+		--link: #458588;
+		--hdr: #ccc;
+		--hdr-link: #3383a6;
+		--field-bg: #ddd;
+		--field-label: #3c3836;
+		--red1: #9d0006;
+		--red2: #cc241d;
+		--red3: #fb4934;
+		--red4: #fa897d;
+		--blue1: #073c78;
+		--blue2: #456888;
+		--blue3: #8393a5;
+		--blue4: #aac0d6;
+		--green1: #2c790e;
+		--green2: #4c981a;
+		--green3: #6ebb26;
+		--green4: #92dc51;
+		--overlay: #0007;
+		--popup-bg: #666;
+		--popup-hdr-bg: #777;
+	}
+}
+
+body {
+	font-family: sans-serif;
+	margin: 0;
+	background-color: var(--bg);
+	color: var(--fg);
+}
+
+a {
+	color: var(--link);
+	transition: filter 0.25s;
+}
+
+a:visited {
+	color: var(--link);
+}
+
+a:hover {
+	filter: brightness(1.3);
+}
+
+.small {
+	font-size: 0.75rem;
+	color: var(--fgf);
+}
+
+.flex-v {
+	display: inline-flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.button {
+	color: var(--bg);
+	cursor: pointer;
+	padding: 6px;
+	margin-right: 6px;
+	border: 1px solid transparent;
+	border-radius: 3px;
+	background-color: var(--blue3);
+	min-width: 60px;
+	transition: filter 0.25s, transform 0.1s;
+}
+
+.button:hover {
+	filter: brightness(0.8);
+	border-color: var(--highlight);
+	box-shadow: 0 0 5px var(--highlight);
+}
+
+.button:active {
+	transform: scale(0.95);
+}
+
+.button.red {
+	background-color: var(--red3);
+}
+
+.button.green {
+	background-color: var(--green3);
+}
+
+.button.blue {
+	background-color: var(--blue3);
+}
+
+.buttons-flex-h {
+	display: flex;
+}
+
+/* popup classes */
+.popup.container {
+	display: flex;
+	background-color: var(--overlay);
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 2000;
+	justify-content: center;
+	align-items: center;
+	color: var(--bg);
+}
+.popup.main {
+	background-color: var(--popup-bg);
+	padding-bottom: 6px;
+	max-width: 85%;
+}
+.popup.main .header {
+	background-color: var(--popup-hdr-bg);
+	padding: 8px;
+	font-weight: bold;
+}
+.popup.main .item {
+	padding-left: 12px;
+	padding-right: 12px;
+}
+.popup.main .body {
+	padding-top: 12px;
+	padding-bottom: 12px;
+}
+.table {
+	text-align: left;
+	border: 1px solid var(--fg);
+	border-spacing: 0;
+	border-collapse: collapse;
+	margin: 10px auto;
+}
+.table th,
+.table td {
+	border: 1px solid var(--fg);
+	padding: 2px 4px;
+}
+.table th {
+	background-color: var(--blue3);
+	color: var(--bg);
+}
+.table td.center {
+	text-align: center;
+}
+.table td.name,
+.table th.name {
+	width: 10rem;
+}
+.table td.actions,
+.table th.actions {
+	width: 36px;
+}
+.table td.actions > div {
+	display: flex;
+	justify-content: center;
+}
+
+@media only screen and (max-width: 768px) {
+	.flex-v {
+		width: 100%;
+		padding: 0 8px;
+	}
+	.flex-v.nopad {
+		padding: 0;
+	}
+}

package/dist/index.js

@@ -0,0 +1 @@
+// Reexport your entry components here

package/dist/store/index.d.ts

@@ -0,0 +1 @@
+export { toastList } from './toast-list.js';

package/dist/store/index.js

@@ -0,0 +1 @@
+export { toastList } from './toast-list.js';

package/dist/store/toast-list.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="svelte" />
+export interface ToastBase {
+    text: string;
+    type: 'normal' | 'error' | 'success';
+}
+export interface Toast extends ToastBase {
+    id: number;
+}
+export interface ToastListStore {
+    toasts: Toast[];
+}
+export declare const toastList: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<ToastListStore>, invalidate?: import("svelte/store").Invalidator<ToastListStore> | undefined) => import("svelte/store").Unsubscriber;
+    addText: (text: string) => void;
+    addError: (text: string) => void;
+    addSuccess: (text: string) => void;
+    remove: (id: number) => void;
+};

package/dist/store/toast-list.js

@@ -0,0 +1,19 @@
+import { writable } from 'svelte/store';
+let lastId = 0;
+function createStore() {
+    const defaultState = { toasts: [] };
+    const { subscribe, update } = writable(defaultState);
+    const add = (toast) => update((u) => ({ toasts: [...u.toasts, { ...toast, id: lastId++ }] }));
+    return {
+        subscribe,
+        addText: (text) => add({ text, type: 'normal' }),
+        addError: (text) => add({ text, type: 'error' }),
+        addSuccess: (text) => add({ text, type: 'success' }),
+        remove: (id) => update((u) => {
+            const idx = u.toasts.findIndex((t) => t.id === id);
+            u.toasts.splice(idx, 1);
+            return { toasts: u.toasts };
+        }),
+    };
+}
+export const toastList = createStore();

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "smorks-svelte-ui",
+  "version": "0.0.1-alpha.1",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "dependencies": {
+    "normalize.css": "^8.0.1"
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^2.1.0",
+    "@sveltejs/kit": "^1.22.5",
+    "@sveltejs/package": "^2.2.1",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "@types/sass-loader": "^8.0.5",
+    "eslint": "^8.46.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-svelte": "^2.32.4",
+    "prettier": "^2.8.8",
+    "prettier-plugin-svelte": "^2.10.1",
+    "publint": "^0.1.16",
+    "sass": "^1.65.1",
+    "svelte": "^4.1.2",
+    "svelte-check": "^3.4.6",
+    "tslib": "^2.6.1",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.9"
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --plugin-search-dir . --check . && eslint .",
+    "format": "prettier --plugin-search-dir . --write ."
+  }
+}