@lavalogic/scoria 0.38.8 → 0.38.10

package/dist/Components/InfoAlert.svelte

@@ -0,0 +1,65 @@
+<svelte:options runes />
+
+<script lang="ts">
+	import { Size } from '../Types/Internal/Size.js';
+	import Icon from './Icon.svelte';
+	import type { InfoAlertProps } from './InfoAlertProps.js';
+
+	const { children, iconName = 'circle-information' }: InfoAlertProps = $props();
+</script>
+
+<!--
+	Small, inline informational banner. Mirrors the structure of the
+	`.error-banner` block already used inside the Table Configuration
+	modal - leading icon + body text on a tinted background - but on a
+	neutral blue palette so it reads as "helper text" rather than "error".
+
+	The body is a snippet so callers can inline links or emphasis without
+	the component prescribing a content shape.
+-->
+<div
+	class="info-alert"
+	role="status"
+>
+	<div class="icon">
+		<Icon
+			name={iconName}
+			size={Size.Small}
+		/>
+	</div>
+	<div class="body">
+		{@render children()}
+	</div>
+</div>
+
+<style>.info-alert {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.625rem 0.875rem;
+  border: solid 1px #cbd4da;
+  border-radius: 4px;
+  background-color: #f4f7f9;
+  color: #3a4952;
+  font-size: 1.125rem;
+  line-height: 1.4;
+}
+
+/* Nudge the icon down a hair so it sits visually centred against
+   the first line of body text rather than aligned to the very top
+   of the first character ascent. */
+.icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding-top: 0.0625rem;
+  color: #647d8e;
+  --colour: #647d8e;
+}
+
+.body {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: #647d8e;
+}</style>

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

@@ -0,0 +1,4 @@
+import type { InfoAlertProps } from './InfoAlertProps.js';
+declare const InfoAlert: import("svelte").Component<InfoAlertProps, {}, "">;
+type InfoAlert = ReturnType<typeof InfoAlert>;
+export default InfoAlert;

package/dist/Components/InfoAlertProps.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+import type { icons } from './Icons.js';
+/**
+ * Props for `InfoAlert` - the small, inline informational banner used
+ * for non-blocking helper text and empty-state messages (e.g. "you
+ * have not saved any layouts yet…", "no filters match the search…").
+ *
+ * Visually it mirrors the existing `.error-banner` pattern used inside
+ * scoria's modals - an icon plus a single line / paragraph of body
+ * text on a tinted background - but with neutral / informational
+ * colours rather than error-red. It is deliberately a thin shell: any
+ * inline links or `<strong>` accents go inside the default snippet.
+ */
+export interface InfoAlertProps {
+    /** Body of the alert, rendered to the right of the leading icon. */
+    children: Snippet;
+    /**
+     * Optional icon name override. Defaults to `circle-information`,
+     * the standard neutral-info glyph; pass another name from the
+     * frozen `icons` registry to fit a more specific empty-state visual
+     * (e.g. `circle-exclamation` for a gentle warning).
+     */
+    iconName?: keyof typeof icons;
+}

package/dist/Components/InfoAlertProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Table/Body/Rows/ColumnListRow.svelte

@@ -17,7 +17,6 @@
 
 	const { columnDef }: ColumnListRowProps<T> = $props();
 
-
 	/**
 	 * Position of this column inside the sorted column list. Drives the
 	 * disabled state of the "move up" / "move down" buttons and supplies
@@ -507,6 +506,14 @@ li.single-column:not(.anchor):last-of-type {
   display: flex;
   flex-shrink: 0;
 }
+.visibility-wrapper :global(div.inner-checkbox-container) {
+  border-width: 1px;
+  border-color: #cbd4da;
+}
+.visibility-wrapper :global(.outer-checkbox-container:hover div.inner-checkbox-container:not(.disabled)) {
+  border-width: 1px;
+  border-color: #adbbc5;
+}
 
 .pin-selector {
   --input-height: 2.25rem;
@@ -519,6 +526,12 @@ li.single-column:not(.anchor):last-of-type {
 .pin-selector.disabled {
   opacity: 0.5;
 }
+.pin-selector :global(.radios > label) {
+  padding: 0;
+}
+.pin-selector :global(.radios > label:first-child) {
+  border-left: none;
+}
 
 .column-label {
   width: 100%;

package/dist/Components/Table/Misc/ShareViewModal.svelte

@@ -7,6 +7,7 @@
 	import Button from '../../Button.svelte';
 	import DesktopModal from '../../DesktopModal.svelte';
 	import Icon from '../../Icon.svelte';
+	import InfoAlert from '../../InfoAlert.svelte';
 	import MultiSelect from '../../MultiSelect.svelte';
 	import { cssLength } from '../../../Helpers/Helpers.svelte.js';
 	import { ColourSet } from '../../../scss/colours.js';
@@ -226,7 +227,7 @@
 
 		<div class="picker">
 			{#if loadingUsers && allUsers === null}
-				<p class="muted">Loading users…</p>
+				<InfoAlert>Loading users…</InfoAlert>
 			{:else if allUsers !== null}
 				<MultiSelect
 					label="Users"
@@ -244,11 +245,11 @@
 		</div>
 
 		{#if selected.length === 0}
-			<p class="muted">
+			<InfoAlert>
 				No users selected. Use the picker above to share this {view.kind === 'filter'
 					? 'filter'
 					: 'layout'} with one or more users.
-			</p>
+			</InfoAlert>
 		{:else}
 			<ul class="user-card-list">
 				{#each selected as user (user.id)}
@@ -315,11 +316,6 @@
   flex-flow: column nowrap;
 }
 
-.muted {
-  color: #647d8e;
-  margin: 0;
-}
-
 .user-card-list {
   list-style: none;
   margin: 0;

package/dist/Components/Table/Misc/TableConfigurationModal.svelte

@@ -8,6 +8,7 @@
 	import DesktopModal from '../../DesktopModal.svelte';
 	import HorizontalTabGroup from '../../HorizontalTabGroup.svelte';
 	import Icon from '../../Icon.svelte';
+	import InfoAlert from '../../InfoAlert.svelte';
 	import TextInput from '../../TextInput.svelte';
 	import VerticalTabGroup from '../../VerticalTabGroup.svelte';
 	import { cssLength } from '../../../Helpers/Helpers.svelte.js';
@@ -336,12 +337,12 @@
 
 		{#if args.tab === 'mine'}
 			{#if loadingViews}
-				<p class="muted">Loading saved {sectionNounPlural.toLowerCase()}…</p>
+				<InfoAlert>Loading saved {sectionNounPlural.toLowerCase()}…</InfoAlert>
 			{:else if myViews.length === 0}
-				<p class="muted">
+				<InfoAlert>
 					You have not saved any {sectionNounPlural.toLowerCase()} yet. Use the "Save a new {sectionNoun}"
 					tab to create one.
-				</p>
+				</InfoAlert>
 			{:else}
 				<ul class="card-list">
 					{#each myViews as view (view.id)}
@@ -421,9 +422,9 @@
 
 			{#if publicViews !== null}
 				{#if publicViews.length === 0}
-					<p class="muted">
+					<InfoAlert>
 						There are no further {sectionNounPlural.toLowerCase()} available to subscribe to.
-					</p>
+					</InfoAlert>
 				{:else}
 					<ul class="card-list">
 						{#each publicViews as view (view.id)}
@@ -449,9 +450,9 @@
 			{/if}
 
 			{#if sharedViews.length === 0}
-				<p class="muted">
+				<InfoAlert>
 					No {sectionNounPlural.toLowerCase()} are currently shared with you.
-				</p>
+				</InfoAlert>
 			{:else}
 				<ul class="card-list">
 					{#each sharedViews as view (view.id)}
@@ -484,29 +485,37 @@
 			{/if}
 		{:else}
 			<div class="save-tab">
-				<p class="muted">
+				<InfoAlert>
 					Save the table's current {sectionNoun.toLowerCase()} as a reusable named
 					{sectionNoun.toLowerCase()}.
-				</p>
-				<TextInput
-					placeholder={`${sectionNoun} name`}
-					bind:value={newViewName}
-					onkeydown={(e: KeyboardEvent) => {
-						if (e.key === 'Enter') {
-							e.preventDefault();
-							saveNewView();
-						}
-					}}
-				/>
-				<!-- Wrap the button in a row so the flex column's default
-					`align-items: stretch` does not blow it up to the input's
-					width. The row itself can stretch; the button inside sits
-					at its natural content width like every other Button. -->
-				<div class="save-tab-actions">
-					<Button
-						disabled={!newViewName.trim()}
-						onclick={saveNewView}>Save Current</Button
-					>
+				</InfoAlert>
+				<!-- The InfoAlert above spans the full tab body so the
+					empty-state visuals are consistent across all three tabs.
+					The name input + Save button below stay grouped in a
+					narrower form column (`.save-tab-form`) so they keep
+					comfortable form proportions instead of stretching across
+					the whole 50vw modal. -->
+				<div class="save-tab-form">
+					<TextInput
+						placeholder={`${sectionNoun} name`}
+						bind:value={newViewName}
+						onkeydown={(e: KeyboardEvent) => {
+							if (e.key === 'Enter') {
+								e.preventDefault();
+								saveNewView();
+							}
+						}}
+					/>
+					<!-- Wrap the button in a row so the flex column's default
+						`align-items: stretch` does not blow it up to the input's
+						width. The row itself can stretch; the button inside sits
+						at its natural content width like every other Button. -->
+					<div class="save-tab-actions">
+						<Button
+							disabled={!newViewName.trim()}
+							onclick={saveNewView}>Save Current</Button
+						>
+					</div>
 				</div>
 			</div>
 		{/if}
@@ -625,10 +634,6 @@
   background-color: #ffffff;
 }
 
-.muted {
-  color: #647d8e;
-}
-
 .card-list {
   list-style: none;
   margin: 0;
@@ -694,10 +699,24 @@
   margin-bottom: 0.5rem;
 }
 
+/* Outer Save-tab container. Spans the full tab body so the InfoAlert
+   matches the empty-state alert width in My-Layouts / Shared-Layouts.
+   The narrower form column (input + Save button) lives one level
+   deeper in `.save-tab-form`. */
 .save-tab {
   display: flex;
   flex-flow: column nowrap;
   gap: 0.75rem;
+}
+
+/* Form column for the layout-name input and Save Current button.
+   `max-width` keeps the input at a comfortable form width rather
+   than stretching across the full modal; the button below sits on
+   the same column so the two read as a single form unit. */
+.save-tab-form {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.75rem;
   max-width: 24rem;
 }
 

package/dist/index.d.ts

@@ -54,6 +54,8 @@ export type { HorizontalTabGroupProps } from './Components/HorizontalTabGroupPro
 export { default as Icon } from './Components/Icon.svelte';
 export { type IconProps } from './Components/IconProps.js';
 export { icons } from './Components/Icons.js';
+export { default as InfoAlert } from './Components/InfoAlert.svelte';
+export type { InfoAlertProps } from './Components/InfoAlertProps.js';
 export type { InputProps } from './Components/InputProps.js';
 export { default as LoadingAnimation } from './Components/LoadingAnimation.svelte';
 export type { LoadingAnimationProps } from './Components/LoadingAnimationProps.js';

package/dist/index.js

@@ -35,6 +35,7 @@ export { default as HorizontalTabGroup } from './Components/HorizontalTabGroup.s
 export { default as Icon } from './Components/Icon.svelte';
 export {} from './Components/IconProps.js';
 export { icons } from './Components/Icons.js';
+export { default as InfoAlert } from './Components/InfoAlert.svelte';
 export { default as LoadingAnimation } from './Components/LoadingAnimation.svelte';
 export { default as LoadingModal } from './Components/LoadingModal.svelte';
 export { default as LoadingOverlay } from './Components/LoadingOverlay.svelte';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.38.8",
+  "version": "0.38.10",
   "publishConfig": {
     "access": "restricted"
   },