chore: rename

frontend/.prettierrc.json

@@ -20,7 +20,7 @@
     "js/workers/(.*)$",
     "js/core/(.*)$",
     "",
-    "js/ui/spectre(.*)$",
+    "js/ui/shoelace(.*)$",
     "",
     "js/ui/components(.*)$",
     "",

frontend/src/css/style.scss

@@ -36,7 +36,7 @@ body {
     --sl-color-primary-300: rgb(203 202 253);
     --sl-color-primary-400: rgb(180 179 253);
     --sl-color-primary-500: rgb(150 149 252);
-    --sl-color-primary-600: #5755d9;
+    --sl-color-primary-600: rgb(87 85 217);
     --sl-color-primary-700: rgb(91 89 228);
     --sl-color-primary-800: rgb(75 74 188);
     --sl-color-primary-900: rgb(54 53 134);
@@ -53,6 +53,8 @@ body {
     --sl-color-danger-800: rgb(155 58 0);
     --sl-color-danger-900: rgb(111 41 0);
     --sl-color-danger-950: rgb(69 26 0);
+
+    --sl-input-focus-ring-color: #e7e7ff;
 }
 
 sl-option {

frontend/src/js/ui/components/box-version.ts

@@ -1,6 +1,6 @@
 import m from 'mithril';
 
-import Button from 'js/ui/spectre/button';
+import Button from 'js/ui/shoelace/button';
 
 import Icon from 'js/ui/components/atomic/icon';
 import Box from 'js/ui/components/box';

frontend/src/js/ui/components/config/checkbox.ts

@@ -1,6 +1,6 @@
 import m from 'mithril';
 
-import Checkbox from 'js/ui/spectre/checkbox';
+import Checkbox from 'js/ui/shoelace/checkbox';
 
 import MiniHeader from 'js/ui/components/atomic/mini-header';
 import Config, { ConfigProps } from 'js/ui/components/config/config';

frontend/src/js/ui/components/config/creator.ts

@@ -2,11 +2,11 @@ import m from 'mithril';
 
 import { ConfigValue } from 'js/types/config';
 
-import Button from 'js/ui/spectre/button';
-import DividerVert from 'js/ui/spectre/divider-vert';
-import IconButton from 'js/ui/spectre/icon-button';
-import Input from 'js/ui/spectre/input';
-import Select from 'js/ui/spectre/select';
+import Button from 'js/ui/shoelace/button';
+import DividerVert from 'js/ui/shoelace/divider-vert';
+import IconButton from 'js/ui/shoelace/icon-button';
+import Input from 'js/ui/shoelace/input';
+import Select from 'js/ui/shoelace/select';
 
 import Icon from 'js/ui/components/atomic/icon';
 import MiniHeader from 'js/ui/components/atomic/mini-header';

frontend/src/js/ui/components/config/data-source.ts

@@ -3,7 +3,7 @@ import m from 'mithril';
 import { buildId } from 'js/types/basic-info';
 import { sources } from 'js/core/store';
 
-import Select from 'js/ui/spectre/select';
+import Select from 'js/ui/shoelace/select';
 
 import Config from 'js/ui/components/config/config';
 

frontend/src/js/ui/components/config/file-path.ts

@@ -1,6 +1,6 @@
 import m from 'mithril';
 
-import Button from 'js/ui/spectre/button';
+import Button from 'js/ui/shoelace/button';
 
 import Config, { ConfigProps } from 'js/ui/components/config/config';
 import { openFileModal } from 'js/ui/components/modals/file-browser';

frontend/src/js/ui/components/config/folder-path.ts

@@ -1,6 +1,6 @@
 import m from 'mithril';
 
-import Button from 'js/ui/spectre/button';
+import Button from 'js/ui/shoelace/button';
 
 import Config, { ConfigProps } from 'js/ui/components/config/config';
 import { openFileModal } from 'js/ui/components/modals/file-browser';

frontend/src/js/ui/components/config/multiple-options.ts

@@ -1,9 +1,9 @@
 import m from 'mithril';
 
-import Checkbox from 'js/ui/spectre/checkbox';
-import Input from 'js/ui/spectre/input';
-import Label from 'js/ui/spectre/label';
-import Select, { OnInputEvent } from 'js/ui/spectre/select';
+import Checkbox from 'js/ui/shoelace/checkbox';
+import Input from 'js/ui/shoelace/input';
+import Label from 'js/ui/shoelace/label';
+import Select, { OnInputEvent } from 'js/ui/shoelace/select';
 
 import MiniHeader from 'js/ui/components/atomic/mini-header';
 import Config, { ConfigProps } from 'js/ui/components/config/config';

frontend/src/js/ui/components/config/number.ts

@@ -1,6 +1,6 @@
 import m from 'mithril';
 
-import Input from 'js/ui/spectre/input';
+import Input from 'js/ui/shoelace/input';
 
 import MiniHeader from 'js/ui/components/atomic/mini-header';
 import Config, { ConfigProps } from 'js/ui/components/config/config';

frontend/src/js/ui/components/config/options.ts

@@ -1,7 +1,7 @@
 import m from 'mithril';
 
-import Input from 'js/ui/spectre/input';
-import Select from 'js/ui/spectre/select';
+import Input from 'js/ui/shoelace/input';
+import Select from 'js/ui/shoelace/select';
 
 import MiniHeader from 'js/ui/components/atomic/mini-header';
 import Config, { ConfigProps } from 'js/ui/components/config/config';

frontend/src/js/ui/components/config/seed.ts

@@ -1,7 +1,7 @@
 import m from 'mithril';
 
-import Button from 'js/ui/spectre/button';
-import Input from 'js/ui/spectre/input';
+import Button from 'js/ui/shoelace/button';
+import Input from 'js/ui/shoelace/input';
 
 import Icon from 'js/ui/components/atomic/icon';
 import Config, { ConfigProps } from 'js/ui/components/config/config';

frontend/src/js/ui/components/config/text.ts

@@ -1,6 +1,6 @@
 import m from 'mithril';
 
-import Input from 'js/ui/spectre/input';
+import Input from 'js/ui/shoelace/input';
 
 import MiniHeader from 'js/ui/components/atomic/mini-header';
 import Config, { ConfigProps } from 'js/ui/components/config/config';

frontend/src/js/ui/components/device.ts

@@ -1,6 +1,6 @@
 import m from 'mithril';
 
-import Button from 'js/ui/spectre/button';
+import Button from 'js/ui/shoelace/button';
 
 import Box from 'js/ui/components/box';
 import Flex from 'js/ui/components/layout/flex';

frontend/src/js/ui/components/editor/generator.ts

@@ -5,7 +5,7 @@ import Generator, { sanitizeConfig } from 'js/types/generator';
 import { createNunjucksCompletionProvider } from 'js/core/monaco/completion-nunjucks';
 import { settings } from 'js/core/store';
 
-import Label from 'js/ui/spectre/label';
+import Label from 'js/ui/shoelace/label';
 
 import ConfigCreator from 'js/ui/components/config/creator';
 import Editor from 'js/ui/components/config/editor';

frontend/src/js/ui/components/editor/template.ts

@@ -10,8 +10,8 @@ import { createNunjucksCompletionProvider } from 'js/core/monaco/completion-nunj
 import { settings } from 'js/core/store';
 import { addEntryMeta, render } from 'js/core/templating';
 
-import Button from 'js/ui/spectre/button';
-import Label from 'js/ui/spectre/label';
+import Button from 'js/ui/shoelace/button';
+import Label from 'js/ui/shoelace/label';
 
 import ConfigCreator from 'js/ui/components/config/creator';
 import Editor from 'js/ui/components/config/editor';

frontend/src/js/ui/components/entry-select.ts

@@ -2,7 +2,7 @@ import m from 'mithril';
 
 import Entry from 'js/types/entry';
 
-import Input from 'js/ui/spectre/input';
+import Input from 'js/ui/shoelace/input';
 
 import Dropdown from 'js/ui/components/overlay/dropdown';
 

frontend/src/js/ui/components/image-upload.ts

@@ -3,8 +3,8 @@ import m from 'mithril';
 import * as API from 'js/core/api';
 import guid from 'js/core/guid';
 
-import Button from 'js/ui/spectre/button';
-import Input from 'js/ui/spectre/input';
+import Button from 'js/ui/shoelace/button';
+import Input from 'js/ui/shoelace/input';
 
 import Icon from 'js/ui/components/atomic/icon';
 import Flex from 'js/ui/components/layout/flex';

frontend/src/js/ui/components/modals/additional-infos.ts

@@ -3,11 +3,11 @@ import m from 'mithril';
 // @ts-ignore
 import { shell } from 'src/js/electron';
 
-import Details from 'js/ui/spectre/details';
-import Divider from 'js/ui/spectre/divider';
-import Input from 'js/ui/spectre/input';
-import Modal from 'js/ui/spectre/modal';
-import TextArea from 'js/ui/spectre/text-area';
+import Details from 'js/ui/shoelace/details';
+import Divider from 'js/ui/shoelace/divider';
+import Input from 'js/ui/shoelace/input';
+import Modal from 'js/ui/shoelace/modal';
+import TextArea from 'js/ui/shoelace/text-area';
 
 import Flex from 'js/ui/components/layout/flex';
 

frontend/src/js/ui/components/modals/create-source.ts

@@ -4,8 +4,8 @@ import { buildId } from 'js/types/basic-info';
 import * as API from 'js/core/api';
 import store from 'js/core/store';
 
-import Button from 'js/ui/spectre/button';
-import Modal from 'js/ui/spectre/modal';
+import Button from 'js/ui/shoelace/button';
+import Modal from 'js/ui/shoelace/modal';
 
 import BasicInfo from 'js/ui/components/editor/basic-info';
 

frontend/src/js/ui/components/modals/file-browser.ts

@@ -2,9 +2,9 @@ import m from 'mithril';
 
 import * as API from 'js/core/api';
 
-import Button from 'js/ui/spectre/button';
-import Input from 'js/ui/spectre/input';
-import Modal from 'js/ui/spectre/modal';
+import Button from 'js/ui/shoelace/button';
+import Input from 'js/ui/shoelace/input';
+import Modal from 'js/ui/shoelace/modal';
 
 import Icon from 'js/ui/components/atomic/icon';
 import Tooltip from 'js/ui/components/atomic/tooltip';

frontend/src/js/ui/components/modals/imexport/import-export.ts

@@ -4,10 +4,10 @@ import { ImportExport } from 'js/types/import-export';
 import * as API from 'js/core/api';
 import store from 'js/core/store';
 
-import Button from 'js/ui/spectre/button';
-import Loader from 'js/ui/spectre/loader';
-import Modal from 'js/ui/spectre/modal';
-import Select from 'js/ui/spectre/select';
+import Button from 'js/ui/shoelace/button';
+import Loader from 'js/ui/shoelace/loader';
+import Modal from 'js/ui/shoelace/modal';
+import Select from 'js/ui/shoelace/select';
 
 import Config from 'js/ui/components/config/config';
 import ConfigTypes from 'js/ui/components/config/types';

frontend/src/js/ui/components/modals/source/create-edit-entry.ts

@@ -1,8 +1,8 @@
 import m from 'mithril';
 
-import Button from 'js/ui/spectre/button';
-import Input from 'js/ui/spectre/input';
-import Modal from 'js/ui/spectre/modal';
+import Button from 'js/ui/shoelace/button';
+import Input from 'js/ui/shoelace/input';
+import Modal from 'js/ui/shoelace/modal';
 
 import HorizontalProperty from 'js/ui/components/horizontal-property';
 import Flex from 'js/ui/components/layout/flex';

frontend/src/js/ui/components/page-empty-state.ts

@@ -1,6 +1,6 @@
 import m from 'mithril';
 
-import IconButton from 'js/ui/spectre/icon-button';
+import IconButton from 'js/ui/shoelace/icon-button';
 
 import Icon from 'js/ui/components/atomic/icon';
 import Flex from 'js/ui/components/layout/flex';

frontend/src/js/ui/components/portal/fullscreen-loader.ts

@@ -1,6 +1,6 @@
 import m from 'mithril';
 
-import Loader from 'js/ui/spectre/loader';
+import Loader from 'js/ui/shoelace/loader';
 
 import Flex from 'js/ui/components/layout/flex';
 

frontend/src/js/ui/components/print-preview-template.ts

@@ -7,7 +7,7 @@ import Template from 'js/types/template';
 import store, { settings } from 'js/core/store';
 import { addEntryMeta, containsAi, render } from 'js/core/templating';
 
-import Button from 'js/ui/spectre/button';
+import Button from 'js/ui/shoelace/button';
 
 import Icon from 'js/ui/components/atomic/icon';
 import Flex from 'js/ui/components/layout/flex';

frontend/src/js/ui/components/print-preview.ts

@@ -9,7 +9,7 @@ import * as API from 'js/core/api';
 import guid from 'js/core/guid';
 import { settings } from 'js/core/store';
 
-import Loader from 'js/ui/spectre/loader';
+import Loader from 'js/ui/shoelace/loader';
 
 const PADDING = 15;
 

frontend/src/js/ui/components/source-select.ts

@@ -3,7 +3,7 @@ import m from 'mithril';
 import { buildId } from 'js/types/basic-info';
 import { sources } from 'js/core/store';
 
-import Input from 'js/ui/spectre/input';
+import Input from 'js/ui/shoelace/input';
 
 import Icon from 'js/ui/components/atomic/icon';
 import Flex from 'js/ui/components/layout/flex';

frontend/src/js/ui/components/view-layout/paginated-content.ts

@@ -1,6 +1,6 @@
 import m from 'mithril';
 
-import IconButton from 'js/ui/spectre/icon-button';
+import IconButton from 'js/ui/shoelace/icon-button';
 
 import Flex from 'js/ui/components/layout/flex';
 
@@ -72,9 +72,9 @@ export default <T>(): m.Component<PaginatedContentProps<T>> => {
 					m(Flex, { justify: 'between' }, [
 						children, //
 						m(Flex, { items: 'center' }, [
-							m(IconButton, { onClick: () => prevPage(attrs), icon: 'arrow-round-back' }), //
+							m(IconButton, { onClick: () => prevPage(attrs), intend: 'link', icon: 'arrow-round-back' }), //
 							m('div.w3.tc', `${state.page + 1} / ${maxPage(attrs) + 1}`),
-							m(IconButton, { onClick: () => nextPage(attrs), icon: 'arrow-round-forward' }),
+							m(IconButton, { onClick: () => nextPage(attrs), intend: 'link', icon: 'arrow-round-forward' }),
 						]),
 					]),
 				),

frontend/src/js/ui/components/view-layout/property-edit.ts

@@ -1,10 +1,10 @@
 import m from 'mithril';
 import { map } from 'lodash-es';
 
-import Checkbox from 'js/ui/spectre/checkbox';
-import IconButton from 'js/ui/spectre/icon-button';
-import Input from 'js/ui/spectre/input';
-import TextArea from 'js/ui/spectre/text-area';
+import Checkbox from 'js/ui/shoelace/checkbox';
+import IconButton from 'js/ui/shoelace/icon-button';
+import Input from 'js/ui/shoelace/input';
+import TextArea from 'js/ui/shoelace/text-area';
 
 import Icon from 'js/ui/components/atomic/icon';
 import HorizontalProperty from 'js/ui/components/horizontal-property';

frontend/src/js/ui/spectre/button.ts → frontend/src/js/ui/shoelace/button.ts

@@ -3,7 +3,7 @@ import m from 'mithril';
 // @ts-ignore
 import { shell } from 'src/js/electron';
 
-import { intendToShoelace, sizeToShoelace } from 'js/ui/spectre/shoelace';
+import { intendToShoelace, sizeToShoelace } from 'js/ui/shoelace/shoelace';
 
 import Flex from 'js/ui/components/layout/flex';
 

frontend/src/js/ui/spectre/icon-button.ts → frontend/src/js/ui/shoelace/icon-button.ts

@@ -1,6 +1,6 @@
 import m from 'mithril';
 
-import Button, { type ButtonProps } from 'js/ui/spectre/button';
+import Button, { type ButtonProps } from 'js/ui/shoelace/button';
 
 import Icon from 'js/ui/components/atomic/icon';
 

frontend/src/js/ui/spectre/label.ts → frontend/src/js/ui/shoelace/label.ts

@@ -1,6 +1,6 @@
 import m from 'mithril';
 
-import { intendToShoelace } from 'js/ui/spectre/shoelace';
+import { intendToShoelace } from 'js/ui/shoelace/shoelace';
 
 export type LabelProps = {
 	className?: string;

frontend/src/js/ui/spectre/modal.ts → frontend/src/js/ui/shoelace/modal.ts

@@ -1,6 +1,6 @@
 import m from 'mithril';
 
-import Loader from 'js/ui/spectre/loader';
+import Loader from 'js/ui/shoelace/loader';
 
 import Icon from 'js/ui/components/atomic/icon';
 import Flex from 'js/ui/components/layout/flex';

frontend/src/js/ui/views/data-source/all.ts

@@ -5,9 +5,9 @@ import { buildId } from 'js/types/basic-info';
 import * as API from 'js/core/api';
 import store, { sources } from 'js/core/store';
 
-import DividerVert from 'js/ui/spectre/divider-vert';
-import IconButton from 'js/ui/spectre/icon-button';
-import Input from 'js/ui/spectre/input';
+import DividerVert from 'js/ui/shoelace/divider-vert';
+import IconButton from 'js/ui/shoelace/icon-button';
+import Input from 'js/ui/shoelace/input';
 
 import Icon from 'js/ui/components/atomic/icon';
 import Title from 'js/ui/components/atomic/title';

frontend/src/js/ui/views/data-source/single.ts

@@ -6,11 +6,11 @@ import Entry from 'js/types/entry';
 import * as API from 'js/core/api';
 import store from 'js/core/store';
 
-import Button from 'js/ui/spectre/button';
-import DividerVert from 'js/ui/spectre/divider-vert';
-import IconButton from 'js/ui/spectre/icon-button';
-import Input from 'js/ui/spectre/input';
-import Loader from 'js/ui/spectre/loader';
+import Button from 'js/ui/shoelace/button';
+import DividerVert from 'js/ui/shoelace/divider-vert';
+import IconButton from 'js/ui/shoelace/icon-button';
+import Input from 'js/ui/shoelace/input';
+import Loader from 'js/ui/shoelace/loader';
 
 import Icon from 'js/ui/components/atomic/icon';
 import Tooltip from 'js/ui/components/atomic/tooltip';