dsh-ambient-gallery 0.1.0 → 0.1.1

package/README.md

@@ -8,9 +8,10 @@
 
 ## 它做了什么
 
-- **阵列排布**：默认 4×3 = 12 个窗口，行列数、间距、圆角、模糊都可调。
+- **点缀式阵列，不是表格**：默认 4×3 = 12 个窗口，但列宽、行高、每块尺寸、落位、倾角都是确定性地抖动过的 —— 大小不一、疏密错落，像客厅电视墙上的装饰画，而不是等分网格。每块另有上限（26% × 34%），无论行多行少都不会长成一大块板子。
+- **只占面板中段**：整面墙横向默认落在面板宽度的 **20%–80%** 之间（可在设置里各自调），左右两侧是阅读留白；纵向从 7% 到 93%，左右边缘还有渐变淡出。
 - **每格动态轮播**：一个窗口里可以放最多 20 张图，按设定间隔交叉淡入（1.6s 过渡）。每个窗口的首帧延迟带确定性相位偏移，所以整面墙是「涟漪式」亮起，而不是整齐地闪。
-- **满 20 张之后**：再选图不会失败 —— 新图进、最旧的自动轮换出去（滚动窗口语义，两端都按 `/\.slice(-20)/` 执行）。
+- **满 20 张之后**：再选图不会失败 —— 新图进、最旧的自动轮换出去（滚动窗口语义，两端都按 `.slice(-20)` 执行）。
 - **默认就有内容**：没有放图时，每个窗口用 canvas 现场生成 3 张不同母题（光池／条纹／弧线）的渐变图，同一格每次刷新都一致（种子来自窗口编号）。
 - **点选本地图片**：进入「布置」模式后，点击任一窗口即可多选本地图片，或直接把文件拖进窗口。
 - **隐蔽视频窗**：其中一个窗口可以是视频（默认第 12 个窗口，可改位置或关闭）。它常态下与其他窗口一样低浓度、静音循环；只有在布置模式下才会显示出播放控件。
@@ -27,7 +28,7 @@ dsh plugin --profile web add dsh-ambient-gallery
 ## 用
 
 1. 右下角有一个很淡的圆钮（悬停才明显），点它进入**布置模式**。
-2. 布置模式下：点任意窗口选图（可多选）、拖文件进窗口、调列数／行数／浓度／间隔／模糊。
+2. 布置模式下：点任意窗口选图（可多选）、拖文件进窗口、调列数／行数／左边界／右边界／浓度／间隔／模糊。
 3. 点「完成」退出布置模式，图墙回到背景里。
 
 设置 → **氛围图墙** 里有同一组控件（还带说明），可以整体隐藏图墙、恢复默认、清空全部。

package/lib/client.js

@@ -84,6 +84,8 @@ window.__ModuleLoader__.load({
 			"ctl.visible": "显示图墙",
 			"ctl.columns": "列数",
 			"ctl.rows": "行数",
+			"ctl.bandLeft": "左边界",
+			"ctl.bandRight": "右边界",
 			"ctl.opacity": "浓度",
 			"ctl.blend": "混合",
 			"ctl.blur": "模糊",
@@ -97,7 +99,7 @@ window.__ModuleLoader__.load({
 			"ctl.removeFrame": "移除此图",
 			"settings.title": "氛围图墙",
 			"settings.desc":
-				"在主面板背后铺一层会呼吸的图片墙。每个窗口最多 20 张图，按设定的节奏交替淡入；其中一个窗口可以播放本地视频，默认安静地循环，不打扰阅读。",
+				"在主面板中段铺一层会呼吸的图片点缀：横向只占 20%–80%，不铺满，每块大小、位置、倾角都不相同。每个窗口最多 20 张图，按设定的节奏交替淡入；其中一个窗口可以播放本地视频，默认安静地循环，不打扰阅读。",
 			"settings.openEdit": "进入布置模式",
 			"settings.aboutHint":
 				"图墙以极低浓度混合在界面之上、输入框之下视觉层，不会拦截任何点击或按键；只有进入布置模式后，图墙才会临时接管鼠标。",
@@ -126,6 +128,8 @@ window.__ModuleLoader__.load({
 			"ctl.visible": "Show the wall",
 			"ctl.columns": "Columns",
 			"ctl.rows": "Rows",
+			"ctl.bandLeft": "Band starts",
+			"ctl.bandRight": "Band ends",
 			"ctl.opacity": "Density",
 			"ctl.blend": "Blend",
 			"ctl.blur": "Blur",
@@ -139,7 +143,7 @@ window.__ModuleLoader__.load({
 			"ctl.removeFrame": "Remove this picture",
 			"settings.title": "Ambient gallery",
 			"settings.desc":
-				"A breathing wall of pictures behind the main panel. Each window holds up to 20 images that cross-fade on a schedule; one window can play a local video, looping quietly so reading stays easy.",
+				"A breathing spread of pictures across the middle of the panel — only the 20%–80% band, never full-bleed, with every tile a different size, offset and tilt. Each window holds up to 20 images that cross-fade on a schedule; one window can play a local video, looping quietly so reading stays easy.",
 			"settings.openEdit": "Enter arrange mode",
 			"settings.aboutHint":
 				"The wall blends in at very low density above the interface but below your attention, and it never intercepts a click or a keystroke. Only arrange mode briefly lends it the mouse.",
@@ -159,6 +163,8 @@ window.__ModuleLoader__.load({
 			intervalMs: 9000,
 			visible: true,
 			videoCell: 11,
+			bandLeft: 20,
+			bandRight: 80,
 		};
 
 		const BLEND_OPTIONS = ["soft-light", "luminosity", "screen", "overlay", "normal"];
@@ -172,11 +178,14 @@ window.__ModuleLoader__.load({
 		function stylesheet() {
 			return [
 				".agg-root{position:absolute;inset:0;pointer-events:none;user-select:none;overflow:hidden}",
-				".agg-wall{position:absolute;inset:0;display:grid;padding:10px;box-sizing:border-box;",
-				"-webkit-mask-image:radial-gradient(120% 100% at 50% 45%,#000 55%,transparent 100%);",
-				"mask-image:radial-gradient(120% 100% at 50% 45%,#000 55%,transparent 100%);",
+				// The band is deliberately narrower than the column: the wall is
+				// decor on the middle of the panel, never a full-bleed backdrop.
+				".agg-wall{position:absolute;top:7%;bottom:7%;",
+				"-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);",
+				"mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);",
 				"transition:opacity .45s ease}",
-				".agg-cell{position:relative;overflow:hidden;background:transparent;min-width:0;min-height:0;",
+				".agg-cell{position:absolute;overflow:hidden;background:transparent;box-sizing:border-box;",
+				"transform:rotate(var(--agg-tilt,0deg));",
 				"filter:blur(var(--agg-blur,0px));transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease}",
 				".agg-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;",
 				"opacity:0;transition:opacity 1.6s ease;will-change:opacity}",
@@ -184,8 +193,8 @@ window.__ModuleLoader__.load({
 				".agg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:transparent}",
 				".agg-ring{position:absolute;inset:0;border-radius:inherit;pointer-events:none;",
 				"box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dsw-alias-border-l2) 60%,transparent);opacity:0;transition:opacity .2s ease}",
-				".agg-edit .agg-cell{pointer-events:auto;cursor:pointer;transform:scale(.985)}",
-				".agg-edit .agg-cell:hover{transform:scale(1);box-shadow:0 10px 34px rgba(0,0,0,.28)}",
+				".agg-edit .agg-cell{pointer-events:auto;cursor:pointer;transform:rotate(var(--agg-tilt,0deg)) scale(.97)}",
+				".agg-edit .agg-cell:hover{transform:rotate(var(--agg-tilt,0deg)) scale(1.02);box-shadow:0 10px 34px rgba(0,0,0,.28);z-index:2}",
 				".agg-edit .agg-cell:hover .agg-ring{opacity:1}",
 				".agg-edit .agg-wall{opacity:1!important;mix-blend-mode:normal!important}",
 				".agg-edit .agg-layer,.agg-edit .agg-video{opacity:.55!important}",
@@ -743,8 +752,62 @@ window.__ModuleLoader__.load({
 			);
 		}
 
+		/**
+		 * Decoration layout, not a table: column widths and row heights are
+		 * drawn from a narrow random band, then each tile is inset again
+		 * inside its own cell and tilted a degree or two. Nothing lines up
+		 * with anything else, yet the tiles can never overlap, and every
+		 * tile stays small enough to read as an ornament on a TV wall.
+		 */
+		function placements(columns, rows, gap) {
+			const count = columns * rows;
+			const random = mulberry32(hashOf(`layout:${columns}x${rows}`));
+			const spread = (n, low, high) => {
+				const raw = [];
+				for (let index = 0; index < n; index += 1) raw.push(low + random() * (high - low));
+				const sum = raw.reduce((total, value) => total + value, 0);
+				return raw.map((value) => (value / sum) * 100);
+			};
+			const columnWidths = spread(columns, 0.78, 1.28);
+			const rowHeights = spread(rows, 0.76, 1.3);
+			const columnEdges = [0];
+			columnWidths.forEach((width) => columnEdges.push(columnEdges[columnEdges.length - 1] + width));
+			const rowEdges = [0];
+			rowHeights.forEach((height) => rowEdges.push(rowEdges[rowEdges.length - 1] + height));
+
+			const pad = Math.max(0.6, Math.min(4.5, gap * 0.13));
+			// A single window on a 1×1 wall would otherwise become a slab, so
+			// the tile itself is capped independently of how few there are.
+			const MAX_WIDTH = 26;
+			const MAX_HEIGHT = 34;
+			const places = [];
+			for (let index = 0; index < count; index += 1) {
+				const column = index % columns;
+				const row = Math.floor(index / columns);
+				const cellWidth = columnWidths[column];
+				const cellHeight = rowHeights[row];
+				// Two shakes: one for the size of the tile, one for where it
+				// sits inside the cell. Both stay inside the cell, so tiles
+				// never touch and the band keeps its outer margin.
+				const scaleX = 0.62 + random() * 0.33;
+				const scaleY = 0.6 + random() * 0.35;
+				const width = Math.min(MAX_WIDTH, Math.max(3, cellWidth - pad * 2) * scaleX);
+				const height = Math.min(MAX_HEIGHT, Math.max(3, cellHeight - pad * 2) * scaleY);
+				const slackX = Math.max(0, cellWidth - pad * 2 - width);
+				const slackY = Math.max(0, cellHeight - pad * 2 - height);
+				places.push({
+					left: columnEdges[column] + pad + slackX * random(),
+					top: rowEdges[row] + pad + slackY * random(),
+					width,
+					height,
+					tilt: (random() - 0.5) * 4.2,
+				});
+			}
+			return places;
+		}
+
 		function Cell(props) {
-			const { cellKey, index, isVideoCell, gated, picking } = props;
+			const { cellKey, index, isVideoCell, gated, picking, place } = props;
 			const store = useStore();
 			const current = config();
 			const visible = useDocumentVisible();
@@ -800,6 +863,11 @@ window.__ModuleLoader__.load({
 				opacity: edit ? 1 : current.opacity,
 				mixBlendMode: edit ? "normal" : current.blend,
 				"--agg-blur": `${current.blur}px`,
+				"--agg-tilt": `${place.tilt}deg`,
+				left: `${place.left}%`,
+				top: `${place.top}%`,
+				width: `${place.width}%`,
+				height: `${place.height}%`,
 			};
 
 			const children = [];
@@ -917,11 +985,16 @@ window.__ModuleLoader__.load({
 
 			const columns = Math.max(1, Math.round(current.columns));
 			const rows = Math.max(1, Math.round(current.rows));
+			// The band keeps the ornament off the reading gutters: 20% to 80%
+			// of the panel's width by default, and always at least a sliver.
+			const bandLeft = Math.min(Math.max(0, Number(current.bandLeft ?? 20)), 60);
+			const bandRight = Math.min(Math.max(bandLeft + 10, Number(current.bandRight ?? 80)), 100);
 			const total = columns * rows;
 			const videoIndex = current.videoCell !== null && current.videoCell !== undefined ? current.videoCell : -1;
 			const showWall = current.visible !== false && !reduced;
 
 			const cells = [];
+			const places = placements(columns, rows, current.gap);
 			for (let index = 0; index < total; index += 1) {
 				cells.push(
 					h(Cell, {
@@ -931,6 +1004,7 @@ window.__ModuleLoader__.load({
 						isVideoCell: index === videoIndex,
 						gated: !visible,
 						picking,
+						place: places[index],
 					}),
 				);
 			}
@@ -951,9 +1025,8 @@ window.__ModuleLoader__.load({
 							{
 								className: "agg-wall",
 								style: {
-									gridTemplateColumns: `repeat(${columns},minmax(0,1fr))`,
-									gridTemplateRows: `repeat(${rows},minmax(0,1fr))`,
-									gap: `${current.gap}px`,
+									left: `${bandLeft}%`,
+									right: `${100 - bandRight}%`,
 									opacity: 1,
 									visibility: current.visible === false && !store.edit ? "hidden" : "visible",
 								},
@@ -1012,6 +1085,24 @@ window.__ModuleLoader__.load({
 					step: 1,
 					onChange: (value) => updateConfig({ rows: value }),
 				}),
+				Field({
+					label: translate("ctl.bandLeft"),
+					value: Math.round(current.bandLeft ?? 20),
+					min: 0,
+					max: 60,
+					step: 1,
+					format: (value) => `${value}%`,
+					onChange: (value) => updateConfig({ bandLeft: Math.min(value, Math.round(current.bandRight ?? 80) - 10) }),
+				}),
+				Field({
+					label: translate("ctl.bandRight"),
+					value: Math.round(current.bandRight ?? 80),
+					min: 40,
+					max: 100,
+					step: 1,
+					format: (value) => `${value}%`,
+					onChange: (value) => updateConfig({ bandRight: Math.max(value, Math.round(current.bandLeft ?? 20) + 10) }),
+				}),
 				Field({
 					label: translate("ctl.opacity"),
 					value: Math.round(current.opacity * 100),
@@ -1144,6 +1235,24 @@ window.__ModuleLoader__.load({
 					),
 					row(translate("ctl.columns"), Math.round(current.columns), 1, 8, 1, (value) => updateConfig({ columns: value })),
 					row(translate("ctl.rows"), Math.round(current.rows), 1, 6, 1, (value) => updateConfig({ rows: value })),
+					row(
+						translate("ctl.bandLeft"),
+						Math.round(current.bandLeft ?? 20),
+						0,
+						60,
+						1,
+						(value) => updateConfig({ bandLeft: Math.min(value, Math.round(current.bandRight ?? 80) - 10) }),
+						(value) => `${value}%`,
+					),
+					row(
+						translate("ctl.bandRight"),
+						Math.round(current.bandRight ?? 80),
+						40,
+						100,
+						1,
+						(value) => updateConfig({ bandRight: Math.max(value, Math.round(current.bandLeft ?? 20) + 10) }),
+						(value) => `${value}%`,
+					),
 					row(
 						translate("ctl.opacity"),
 						Math.round(current.opacity * 100),

package/lib/index.js

@@ -77,6 +77,8 @@ const DEFAULT_CONFIG = {
   intervalMs: 9000,
   visible: true,
   videoCell: 11,
+  bandLeft: 20,
+  bandRight: 80,
 };
 
 const BLENDS = new Set(["soft-light", "luminosity", "screen", "overlay", "normal"]);
@@ -170,6 +172,10 @@ function clampNumber(value, min, max, fallback) {
 
 function sanitizeConfig(raw) {
   const source = raw !== null && typeof raw === "object" ? raw : {};
+  // The horizontal band is stored as a pair so it can never invert: the
+  // client clamps edges independently while the user drags a slider.
+  const bandLeft = clampInt(source.bandLeft, 0, 60, DEFAULT_CONFIG.bandLeft);
+  const bandRight = clampInt(source.bandRight, 40, 100, DEFAULT_CONFIG.bandRight);
   return {
     columns: clampInt(source.columns, 1, 8, DEFAULT_CONFIG.columns),
     rows: clampInt(source.rows, 1, 6, DEFAULT_CONFIG.rows),
@@ -181,6 +187,8 @@ function sanitizeConfig(raw) {
     intervalMs: clampInt(source.intervalMs, 1500, 120000, DEFAULT_CONFIG.intervalMs),
     visible: source.visible === false ? false : true,
     videoCell: clampInt(source.videoCell, -1, 47, DEFAULT_CONFIG.videoCell),
+    bandLeft: Math.min(bandLeft, bandRight - 10),
+    bandRight: Math.max(bandRight, bandLeft + 10),
   };
 }
 

package/locale/en.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "Ambient Gallery (dsh-ambient-gallery)",
-    "description": "A breathing wall of pictures behind the main panel: up to twenty rotating images per window, generated art by default, your own local pictures on a click, and one discreet window that plays a local video."
+    "description": "Scattered picture tiles behind the main panel — uneven by design, kept to the middle 20-80% of the width, up to twenty rotating images per tile, generated art by default, your own local pictures on a click, and one discreet tile that plays a local video."
   }
 }

package/locale/zh.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "氛围图墙 (dsh-ambient-gallery)",
-    "description": "主面板背后的一层会呼吸的图片墙：每个窗口最多 20 张图轮播，默认是程序生成的简易图，点一下即可换成自己的本地图片，其中一个窗口还能安静地播放本地视频。"
+    "description": "主面板背后散落的一层图片点缀：大小不一、错落排布，只占面板宽度的 20%–80%；每个窗口最多 20 张图轮播，默认是程序生成的简易图，点一下即可换成自己的本地图片，其中一个窗口还能安静地播放本地视频。"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-ambient-gallery",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "description": "Ambient Gallery: a breathing wall of pictures behind the main panel, with up to twenty rotating images per window and one discreet window that plays a local video.",
   "license": "MIT",