@marianmeres/stuic 3.131.0 → 3.133.0

package/dist/components/Input/FieldAssets.svelte.d.ts

@@ -61,6 +61,13 @@ export interface Props extends InputWrapClassProps, Record<string, any> {
     withOnProgress?: boolean;
     classControls?: string;
     isLoading?: boolean;
+    /**
+     * Opt-in: when true, each asset tile in the grid gets "Move earlier" / "Move later"
+     * controls (shown on hover/focus) so the user can manually reorder the assets. The
+     * chosen order is serialized to `value`. Buttons only, no drag (the field's drag is
+     * reserved for file drops); full keyboard + aria-live announcements. Default `false`.
+     */
+    ordered?: boolean;
     classWrap?: string;
 }
 declare const FieldAssets: import("svelte").Component<Props, {

package/dist/components/Input/FieldOptions.svelte

@@ -86,7 +86,7 @@
 		/**
 		 * Opt-in: when true (and multi-select), exposes a dedicated "Arrange" screen in the
 		 * modal that lets the user manually reorder the current selection (buttons only, no
-		 * drag), plus "Sort A–Z" / "Reverse" shortcuts. The chosen order is what gets
+		 * drag), plus "Sort A–Z" / "Reverse" / "Shuffle" shortcuts. The chosen order is what gets
 		 * serialized to `value` on submit. No-op for single-select. Default `false`.
 		 */
 		ordered?: boolean;
@@ -130,6 +130,7 @@
 			arrange_help: "Reorder the selected items. Use the buttons to move them.",
 			sort_az: "Sort A–Z",
 			reverse: "Reverse",
+			shuffle: "Shuffle",
 			move_up: "Move up",
 			move_down: "Move down",
 			move_to_top: "Move to top",
@@ -140,6 +141,7 @@
 			removed_item: "Removed {{value}}",
 			sorted_az: "Sorted A to Z",
 			reversed: "Order reversed",
+			shuffled: "Order shuffled",
 		};
 		let out = m[k] ?? fallback ?? k;
 
@@ -528,6 +530,17 @@
 		liveAnnouncement = t("reversed") as string;
 	}
 
+	// random reorder (Fisher–Yates); same snapshot/clear/re-add dance as reverse()
+	function shuffle() {
+		const arr = [...selected.items];
+		for (let i = arr.length - 1; i > 0; i--) {
+			const j = Math.floor(Math.random() * (i + 1));
+			[arr[i], arr[j]] = [arr[j], arr[i]];
+		}
+		_selectedColl.clear(false).addMany(arr);
+		liveAnnouncement = t("shuffled") as string;
+	}
+
 	function enterArrange() {
 		if (!selected.items.length) return;
 		arrangeMode = true;
@@ -908,6 +921,15 @@
 									>
 										{@html t("reverse")}
 									</button>
+									<button
+										type="button"
+										onclick={shuffle}
+										disabled={selected.items.length < 2}
+										class="control flex items-center p-1 m-1 text-sm underline rounded stuic-field-options-control"
+										tabindex={6}
+									>
+										{@html t("shuffle")}
+									</button>
 									<span
 										class="flex-1 block justify-end text-right text-xs p-1 pr-2 stuic-field-options-muted"
 									>

package/dist/components/Input/FieldOptions.svelte.d.ts

@@ -58,7 +58,7 @@ export interface Props extends InputWrapClassProps, Record<string, any> {
     /**
      * Opt-in: when true (and multi-select), exposes a dedicated "Arrange" screen in the
      * modal that lets the user manually reorder the current selection (buttons only, no
-     * drag), plus "Sort A–Z" / "Reverse" shortcuts. The chosen order is what gets
+     * drag), plus "Sort A–Z" / "Reverse" / "Shuffle" shortcuts. The chosen order is what gets
      * serialized to `value` on submit. No-op for single-select. Default `false`.
      */
     ordered?: boolean;

package/dist/components/Input/README.md

@@ -472,6 +472,33 @@ on submit (and round-trips on reopen). Single-select fields ignore the prop.
 
 ---
 
+## FieldAssets
+
+Asset/image upload field with an inline thumbnail grid and a built-in lightbox preview
+(`AssetsPreview`). Files are added via the picker button or by dragging them onto the
+field; each shows as a thumbnail with its filename (and an upload progress indicator while
+processing).
+
+### Ordering the assets (`ordered`)
+
+By default assets keep their upload order. Opt in with `ordered` to let users reorder them
+manually: each thumbnail gains **Move earlier** / **Move later** controls (revealed on
+hover/focus) that shift the asset one position in the sequence. Buttons only, no drag — the
+field's drag gesture is reserved for file drops — with full keyboard support and aria-live
+announcements. The chosen order is serialized to `value`.
+
+```svelte
+<FieldAssets
+	label="Gallery (ordered)"
+	name="gallery"
+	bind:value
+	{processAssets}
+	ordered
+/>
+```
+
+---
+
 ## Honeypot & TimeTrap (anti-bot primitives)
 
 Two small, **client-side, server-less** primitives for cheap spam mitigation. They produce **signals** — they do not block anything. Read the signal, then enforce on your server (the only place enforcement is trustworthy). Both are reusable on any form; [`ContactUsForm`](../ContactUsForm/README.md) composes them by default.

package/dist/index.css

@@ -71,6 +71,7 @@ In practice:
 @import "./components/LoginOrRegisterForm/index.css";
 @import "./components/Checkout/index.css";
 @import "./components/CommandMenu/index.css";
+@import "./components/CommentInput/index.css";
 @import "./components/ContactUsForm/index.css";
 @import "./components/CronInput/index.css";
 @import "./components/DataTable/index.css";

package/dist/index.d.ts

@@ -38,6 +38,7 @@ export * from "./components/Checkout/index.js";
 export * from "./components/Collapsible/index.js";
 export * from "./components/ColorScheme/index.js";
 export * from "./components/CommandMenu/index.js";
+export * from "./components/CommentInput/index.js";
 export * from "./components/ContactUsForm/index.js";
 export * from "./components/CronInput/index.js";
 export * from "./components/DataTable/index.js";

package/dist/index.js

@@ -39,6 +39,7 @@ export * from "./components/Checkout/index.js";
 export * from "./components/Collapsible/index.js";
 export * from "./components/ColorScheme/index.js";
 export * from "./components/CommandMenu/index.js";
+export * from "./components/CommentInput/index.js";
 export * from "./components/ContactUsForm/index.js";
 export * from "./components/CronInput/index.js";
 export * from "./components/DataTable/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.131.0",
+	"version": "3.133.0",
 	"packageManager": "pnpm@11.5.0",
 	"scripts": {
 		"dev": "vite dev",
@@ -72,6 +72,8 @@
 		"@milkdown/prose": "^7.0.0",
 		"@milkdown/transformer": "^7.0.0",
 		"@milkdown/utils": "^7.0.0",
+		"dompurify": "^3.0.0",
+		"marked": "^18.0.0",
 		"svelte": "^5.0.0"
 	},
 	"peerDependenciesMeta": {
@@ -119,15 +121,21 @@
 		},
 		"@milkdown/utils": {
 			"optional": true
+		},
+		"dompurify": {
+			"optional": true
+		},
+		"marked": {
+			"optional": true
 		}
 	},
 	"devDependencies": {
 		"@codemirror/commands": "^6.10.4",
 		"@codemirror/lang-markdown": "^6.5.0",
-		"@codemirror/language": "^6.12.3",
+		"@codemirror/language": "^6.12.4",
 		"@codemirror/language-data": "^6.5.2",
 		"@codemirror/state": "^6.7.0",
-		"@codemirror/view": "^6.43.2",
+		"@codemirror/view": "^6.43.4",
 		"@eslint/js": "^9.39.4",
 		"@marianmeres/random-human-readable": "^1.10.2",
 		"@milkdown/core": "^7.21.2",
@@ -149,11 +157,13 @@
 		"@tailwindcss/vite": "^4.3.1",
 		"@types/node": "^25.9.4",
 		"@vitest/browser-playwright": "^4.1.9",
+		"dompurify": "^3.4.11",
 		"dotenv": "^16.6.1",
 		"eslint": "^9.39.4",
 		"globals": "^16.5.0",
+		"marked": "^18.0.5",
 		"playwright": "^1.61.1",
-		"prettier": "^3.8.4",
+		"prettier": "^3.9.0",
 		"prettier-plugin-svelte": "^3.5.2",
 		"publint": "^0.3.21",
 		"svelte": "^5.56.4",
@@ -170,7 +180,7 @@
 		"@marianmeres/clog": "^3.21.0",
 		"@marianmeres/countries": "^1.0.1",
 		"@marianmeres/cron": "^2.0.1",
-		"@marianmeres/design-tokens": "^1.9.0",
+		"@marianmeres/design-tokens": "^1.12.0",
 		"@marianmeres/icons-fns": "^5.0.0",
 		"@marianmeres/item-collection": "^1.4.2",
 		"@marianmeres/paging-store": "^2.1.1",