dsh-plugin-term-dictionary 1.0.0 → 1.1.0

package/lib/client.js

@@ -369,6 +369,16 @@ window.__ModuleLoader__.load({
 				explainLang_en: "英文",
 				explainDepthName: "详细程度",
 				explainDepthHint: "解释写多详细",
+				entryColumnsName: "词条排列",
+				entryColumnsHint: "一列排下去很长；「自动」按面板宽度铺成多列，窄了就回到一列。",
+				entryColumns_auto: "自动",
+				entryColumns_1: "1 列",
+				entryColumns_2: "2 列",
+				entryColumns_3: "3 列",
+				entryRowsName: "词条行高",
+				entryRowsHint: "多列排版时，同一行的卡片要不要一样高。统一高度不会在矮卡片下面留出空条；各按各自更紧凑。",
+				entryRows_uniform: "统一高度",
+				entryRows_compact: "各按各自",
 				explainDepth_brief: "一句话",
 				explainDepth_normal: "标准",
 				explainDepth_detailed: "详细",
@@ -401,6 +411,20 @@ window.__ModuleLoader__.load({
 				transferImportHint: "选择一个 JSON 文件。已存在的词条会原样保留；你删除过的词条默认不复活；导入完成后会报告各自的条数。",
 				transferIncludeDeleted: "导入我删除过的词条",
 				transferIncludeDeletedHint: "勾选后，文件里那些你删除过的词条会被导入，并从「已删除」里撤回。不勾选则它们留在删除列表里。",
+				transferConfirmTitle: "「{name}」里有什么",
+				transferWillImport: "将导入 {count} 条",
+				transferWillSkipExisting: "已有 {count} 条（跳过）",
+				transferWillSkipDeleted: "你删过 {count} 条（默认跳过）",
+				transferConfirm: "确认导入",
+				transferShown: "已切到「全部」并清空搜索，好让刚导入的词条就在眼前。",
+				transferFolderTitle: "导入文件夹",
+				transferFolderHint: "选一个文件夹，把里面的 .json 全部读一遍（导出的词典、下载的包文件都认）。不是 JSON 的文件直接忽略；读不了的会点名列出。",
+				transferFolderAsGroup: "按文件夹建立分组（文件夹名就是组名）",
+				transferFolderLabel: "文件夹里的 {count} 个文件",
+				transferFolderFound: "文件夹里 {files} 个 .json，用上 {used} 个",
+				transferFolderSkipped: "跳过 {count} 个：",
+				transferFolderAllSkipped: "这个文件夹里 {count} 个 .json 都读不了",
+				transferNoJson: "这个文件夹里没有 .json 文件",
 				transferReport: "导入 {imported} 条；跳过：已存在 {existing} 条、你删除过 {deleted} 条、重复或无效 {duplicates} 条。",
 				transferFailed: "操作失败：{message}",
 				settingsBack: "返回词条列表",
@@ -492,6 +516,7 @@ window.__ModuleLoader__.load({
 				packSourcesTitle: "源",
 				packSourcesHint: "源就是别人托管的一个静态 index.json。只接受 https（http、file、带账号密码的 URL 都会被拒）。",
 				packNoSources: "还没有添加源",
+				packBuiltInSource: "内置",
 				packRemoveSource: "移除",
 				packAddSourceLabel: "添加源",
 				packAddSourcePlaceholder: "https://cdn.jsdelivr.net/gh/…/index.json",
@@ -554,6 +579,12 @@ window.__ModuleLoader__.load({
 				usageLabel: "用法示例",
 				notesLabel: "备注",
 				domainLabel: "领域",
+				groupLabel: "分组",
+				groupOpen: "进入这个分组",
+				groupGo: "回到「{name}」",
+				groupCount: "{count} 条",
+				groupEmpty: "这一层只有分组，还没有词条。",
+				groupPlaceholder: "留空 = 顶层；用 / 分层，例如 backend/net",
 				termPlaceholder: "例如 event sourcing",
 				glossPlaceholder: "用一两句话说明它的含义",
 				usagePlaceholder: "可选：一句例子或典型用法",
@@ -639,6 +670,16 @@ window.__ModuleLoader__.load({
 				explainLang_en: "English",
 				explainDepthName: "Explanation depth",
 				explainDepthHint: "How much the explanation says",
+				entryColumnsName: "Entry layout",
+				entryColumnsHint: "One column makes a very long strip; 自动 fills the panel width with as many columns as fit, and falls back to one when it is narrow.",
+				entryColumns_auto: "Auto",
+				entryColumns_1: "1 column",
+				entryColumns_2: "2 columns",
+				entryColumns_3: "3 columns",
+				entryRowsName: "Row height",
+				entryRowsHint: "In a multi-column layout, whether the cards in one row share a height. Uniform leaves no empty strip under the short ones; compact keeps each card tight.",
+				entryRows_uniform: "Uniform",
+				entryRows_compact: "Compact",
 				explainDepth_brief: "One line",
 				explainDepth_normal: "Normal",
 				explainDepth_detailed: "Detailed",
@@ -686,6 +727,7 @@ window.__ModuleLoader__.load({
 				packSourcesTitle: "Sources",
 				packSourcesHint: "A source is somebody's static index.json. Only https is accepted (http, file and URLs carrying credentials are refused).",
 				packNoSources: "No sources yet",
+				packBuiltInSource: "built in",
 				packRemoveSource: "Remove",
 				packAddSourceLabel: "Add a source",
 				packAddSourcePlaceholder: "https://cdn.jsdelivr.net/gh/…/index.json",
@@ -741,6 +783,20 @@ window.__ModuleLoader__.load({
 				transferImportHint: "Choose a JSON file. Entries you already have are left as they are, and entries you deleted stay deleted unless you say otherwise below; the counts are reported when it finishes.",
 				transferIncludeDeleted: "Import entries I deleted",
 				transferIncludeDeletedHint: "When ticked, entries in the file that you had deleted are imported and retracted from the deleted list. Unticked, they stay there.",
+				transferConfirmTitle: "What “{name}” holds",
+				transferWillImport: "{count} entries will be imported",
+				transferWillSkipExisting: "{count} already here (skipped)",
+				transferWillSkipDeleted: "{count} you deleted (skipped by default)",
+				transferConfirm: "Import them",
+				transferShown: "Moved to All and cleared the search, so what was imported is in front of you.",
+				transferFolderTitle: "Import a folder",
+				transferFolderHint: "Pick a folder and every .json inside it is read: exported dictionaries and downloaded pack files both. Files that are not JSON are ignored, and any that cannot be read are named.",
+				transferFolderAsGroup: "Build groups from the folders (the folder name is the group)",
+				transferFolderLabel: "{count} files in the folder",
+				transferFolderFound: "{files} .json files in the folder, {used} of them usable",
+				transferFolderSkipped: "{count} skipped:",
+				transferFolderAllSkipped: "none of the {count} .json files in that folder could be read",
+				transferNoJson: "that folder holds no .json files",
 				transferReport: "Imported {imported}; skipped {existing} already here, {deleted} you deleted, {duplicates} duplicate or unusable.",
 				transferFailed: "That did not work: {message}",
 				settingsBack: "Back to the entries",
@@ -825,6 +881,12 @@ window.__ModuleLoader__.load({
 				usageLabel: "Usage",
 				notesLabel: "Notes",
 				domainLabel: "Domain",
+				groupLabel: "Group",
+				groupOpen: "Open this group",
+				groupGo: "Go back to {name}",
+				groupCount: "{count} entries",
+				groupEmpty: "This level holds only groups so far.",
+				groupPlaceholder: "empty = top level; use / to nest, e.g. backend/net",
 				termPlaceholder: "e.g. event sourcing",
 				glossPlaceholder: "Say what it means in one or two sentences",
 				usagePlaceholder: "Optional: an example or typical use",
@@ -934,6 +996,15 @@ window.__ModuleLoader__.load({
 			/** Upper bound on a feedback note, which is a remark rather than an explanation. */
 			const MAX_NOTE_CHARS = 200;
 
+			/**
+			 * Upper bound on an entry's group path.
+			 *
+			 * A path rather than a name: a group can hold groups, because that is what a directory does and what a
+			 * folder import produces. One string covers any depth, which is why nothing else had to be added to the
+			 * document to get nesting.
+			 */
+			const MAX_GROUP_CHARS = 120;
+
 			/**
 			 * What a user can say is wrong with an entry.
 			 *
@@ -1023,6 +1094,25 @@ window.__ModuleLoader__.load({
 						notes: clampText(definition.notes, MAX_DEFINITION_CHARS)
 					},
 					domain: clampText(value.domain, 24),
+					/**
+					 * The group (folder) this entry lives in: `""` for the top level, or a `/`-separated path.
+					 *
+					 * A CONTAINER, not a topic: `domain` is a semantic label the reader assigns, while this is where
+					 * the entry was put. It needs its own stamp (§ `groupAt`) because a move is a decision — the first
+					 * attempt let it ride on the content merge, and a merge of one entry from two windows then wiped
+					 * the group order-dependently.
+					 */
+					group: clampText(value.group, MAX_GROUP_CHARS),
+					// When the group was last decided, epoch milliseconds, 0 for "never moved".
+					//
+					// The third use of this pattern, and for the reason the other two exist: a decision the user can
+					// make and unmake cannot be carried by content-merging rules.
+					// When the user restored this term, epoch milliseconds, 0 for never.
+					//
+					// The named evidence a merge weighs against a deletion, so a restoration does not have to win a
+					// contest over a clock — see `restoreEntry`.
+					restoredAt: typeof value.restoredAt === "number" && Number.isFinite(value.restoredAt) && value.restoredAt > 0 ? Math.floor(value.restoredAt) : 0,
+					groupAt: typeof value.groupAt === "number" && Number.isFinite(value.groupAt) && value.groupAt > 0 ? Math.floor(value.groupAt) : 0,
 					source: SOURCES.includes(value.source) ? value.source : "auto",
 					confidence: typeof value.confidence === "number" && value.confidence >= 0 && value.confidence <= 1 ? value.confidence : 0.5,
 					createdAt: typeof value.createdAt === "number" && value.createdAt > 0 ? value.createdAt : now,
@@ -1204,6 +1294,12 @@ window.__ModuleLoader__.load({
 					aliases: [...new Set([...current.aliases, ...incoming.aliases])].slice(0, 8),
 					definition: takeDefinition ? incoming.definition : current.definition,
 					domain: takeDefinition && incoming.domain !== "" ? incoming.domain : current.domain,
+					// Unlike the domain, an empty incoming group is taken when the content changed: moving an entry back
+					// to the top level is a move, and the old rule ("an empty value never overwrites") would make the
+					// top level unreachable for anything that had ever been filed.
+					group: (incoming.groupAt ?? 0) > (current.groupAt ?? 0) ? incoming.group : current.group,
+					groupAt: Math.max(incoming.groupAt ?? 0, current.groupAt ?? 0),
+					restoredAt: Math.max(incoming.restoredAt ?? 0, current.restoredAt ?? 0),
 					// The STRONGEST provenance survives, not the arriving one. Taking the arriving
 					// source let a later automatic copy of an already-curated term downgrade it to
 					// `auto`, which then denied that term its own revival — and let its source be
@@ -1307,6 +1403,7 @@ window.__ModuleLoader__.load({
 				MAX_DEFINITION_CHARS,
 				MAX_CONTEXT_CHARS,
 				MAX_NOTE_CHARS,
+				MAX_GROUP_CHARS,
 				normalizeEntry,
 				normalizeFeedback,
 				entryAsText,
@@ -1610,6 +1707,9 @@ window.__ModuleLoader__.load({
 					//
 					// So the comparison uses the newest time a record the USER asked for carries, and
 					// being strictly newer is what revives. Time alone is not intent; provenance is.
+					// A NAMED restoration first: `restoreEntry` records that the user asked for this term back, which
+					// is not an inference from a clock. The comparison below stays for the paths that revive by editing.
+					if ((record.restoredAt ?? 0) > notice.deletedAt) return { ...record, deletedAt: 0 };
 					if ((options?.craftedAt ?? 0) > notice.deletedAt) return { ...record, deletedAt: 0 };
 					const alreadyDeleted = record.deletedAt ?? 0;
 					return { ...record, deletedAt: Math.max(alreadyDeleted, notice.deletedAt) };
@@ -1892,6 +1992,10 @@ window.__ModuleLoader__.load({
 				const feedbackStamp = mentionsFeedback ? Math.max(stamp, (base.feedbackAt ?? 0) + 1) : base.feedbackAt ?? 0;
 				const untrustedPatch = typeof patch?.untrusted === "boolean" ? patch.untrusted : null;
 				const untrustedStamp = untrustedPatch === null ? base.untrustedAt ?? 0 : Math.max(stamp, (base.untrustedAt ?? 0) + 1);
+				// A move is a decision like a pin or a remark, and it is stamped strictly past the last one so that two
+				// moves inside the same millisecond still have an order.
+				const mentionsGroup = patch !== null && patch !== undefined && Object.prototype.hasOwnProperty.call(patch, "group");
+				const groupStamp = mentionsGroup ? Math.max(stamp, (base.groupAt ?? 0) + 1) : base.groupAt ?? 0;
 				const candidate = normalizeEntry(
 					{
 						...base,
@@ -1900,6 +2004,11 @@ window.__ModuleLoader__.load({
 						deletedAt: 0,
 						aliases: patch?.aliases ?? base.aliases,
 						domain: patch?.domain ?? base.domain,
+						// `patch.group` may legitimately be `""` — that is how an entry is moved back to the top level —
+						// so this reads with `hasOwnProperty` rather than with `??`: a patch that says nothing about the
+						// group must leave it, and its stamp, exactly where they were.
+						group: mentionsGroup ? patch.group : base.group,
+						groupAt: groupStamp,
 						definition: { ...base.definition, ...(patch?.definition ?? {}) },
 						source: "user",
 						confidence: 1,
@@ -1917,6 +2026,60 @@ window.__ModuleLoader__.load({
 				return upsertEntry(state, { ...candidate, source: "user", deletedAt: 0 }, { now: stamp });
 			}
 
+			/**
+			 * Bring a deleted term back, as an explicit act rather than as a side effect of an edit.
+			 *
+			 * This exists because "restore this deleted term" is a decision, and until now it was expressed as "write
+			 * an edit and hope the merge weighs it right": `editEntry` produced a crafted timestamp, and a merge
+			 * revived the record when that timestamp beat the tombstone's. That works — there is a check for it — but
+			 * it means the import path, the editor, a sighting and a second window all revive through one inferred
+			 * comparison, and a term the user had collected and deleted came back as "nothing happened".
+			 *
+			 * So a restoration is its own thing:
+			 *
+			 *  - `restoredAt` is the evidence, weighed against `notice.deletedAt` like `pinnedAt` is weighed against
+			 *    silence. It is what the merge reads, and it exists even when the tombstone's clock ran ahead;
+			 *  - the tombstone is WITHDRAWN from the document this returns — the key leaves `deletedKeys` and the
+			 *    record leaves `backing` — so a reader of this document is not told the term is deleted at all. Being
+			 *    merely outvoted is what let a later merge put the deletion back;
+			 *  - the text is kept: restoring is not the same as rewriting, so the patch is applied on top of whatever
+			 *    the tombstone still remembers.
+			 *
+			 * @param state - the current document.
+			 * @param idOrTerm - the entry id, term or alias.
+			 * @param patch - `definition`, `domain`, `group`, `aliases`, `pinned`.
+			 * @param options - `now` overrides the restoration time.
+			 * @returns `{ state, entry, restored }`; `restored` is false when the term was not deleted.
+			 */
+			function restoreEntry(state, idOrTerm, patch, options) {
+				const found = findEntryIncludingDeleted(state, idOrTerm);
+				if (found === undefined) {
+					// Nothing to restore: the caller wanted a new entry, and `editEntry` is the path for that.
+					const created = editEntry(state, typeof idOrTerm === "string" ? idOrTerm : "", patch, options);
+					return { ...created, restored: false };
+				}
+				if ((found.deletedAt ?? 0) === 0) {
+					// Already live: a restoration must not disturb it, and saying "restored" would be a lie the caller
+					// might act on (the import reports it).
+					return { state, entry: found, restored: false };
+				}
+				// The stamp is strictly past the deletion for the same reason `editEntry`'s is: a clock that ran ahead
+				// must not let the tombstone win a comparison it lost the argument for.
+				const now = options?.now ?? Date.now();
+				const stamp = Math.max(now, (found.deletedAt ?? 0) + 1);
+				const edited = editEntry(state, found.term, { ...patch, definition: { ...found.definition, ...(patch?.definition ?? {}) } }, { now: stamp });
+				const key = found.key;
+				// The withdrawal, in the document itself: the record is rewritten live and the whole thing is re-sealed,
+				// so `deletedKeys` and `backing` are derived fresh and no longer announce the deletion. (An earlier
+				// version also filtered them by hand first, which the re-seal made redundant — a mutation proved it by
+				// not biting, so the dead work is gone.)
+				const records = recordsOf(edited.state).map((entry) =>
+					entry.id === found.id || entry.key === key ? { ...entry, deletedAt: 0, restoredAt: stamp, source: "user", updatedAt: stamp, lastSeenAt: stamp } : entry
+				);
+				const next = sealRecords(records, { now: stamp });
+				return { state: next, entry: next.entries.find((entry) => entry.key === key) ?? edited.entry, restored: true };
+			}
+
 			/**
 			 * Record one sighting of a term without replacing its meaning: the counters move
 			 * and a missing definition is filled from the glossary, but a curated definition
@@ -2226,16 +2389,51 @@ window.__ModuleLoader__.load({
 			}
 
 			/**
-			 * The panel's visible list: filter by query, then order pinned first, then most
-			 * recently seen.
+			 * The groups immediately inside one path, with how many entries each holds.
+			 *
+			 * Only the immediate children: the list shows one level at a time, and a count covers everything under
+			 * that child, however deep. A group exists as long as something is in it — there is no separate list of
+			 * empty groups to keep in step with the entries, which is the trade this makes deliberately.
+			 *
+			 * @param entries - every live entry.
+			 * @param prefix - the path to look inside, `""` for the top level.
+			 * @returns `[{ group, name, count }]`, alphabetical.
+			 */
+			function groupsIn(entries, prefix) {
+				const base = prefix === undefined || prefix === null ? "" : String(prefix);
+				const counts = new Map();
+				for (const entry of Array.isArray(entries) ? entries : []) {
+					if ((entry?.deletedAt ?? 0) !== 0) continue;
+					const group = typeof entry?.group === "string" ? entry.group : "";
+					if (group === "" || group === base) continue;
+					let inside = null;
+					if (base === "") inside = group;
+					else if (group.startsWith(`${base}/`)) inside = group.slice(base.length + 1);
+					if (inside === null || inside === "") continue;
+					const name = inside.split("/")[0];
+					counts.set(name, (counts.get(name) ?? 0) + 1);
+				}
+				return [...counts.entries()]
+					.map(([name, count]) => ({ group: base === "" ? name : `${base}/${name}`, name, count }))
+					.sort((left, right) => left.name.localeCompare(right.name));
+			}
+
+			/**
+			 * The panel's visible list: one level of the group tree, filtered by query, then ordered by when each
+			 * term was last seen.
 			 * @param state - the document.
 			 * @param query - search text.
 			 * @param filter - `all`, `unexplained`, `pinned` or `flagged`.
+			 * @param group - the group path to look inside, `""` for the top level.
 			 * @returns the ordered entries.
 			 */
-			function listEntries(state, query, filter) {
+			function listEntries(state, query, filter, group) {
+				const base = group === undefined || group === null ? "" : String(group);
 				const matched = state.entries.filter((entry) => {
 					if (entry.deletedAt !== 0) return false;
+					// The list shows the level you are standing in, not everything below it: a group is a directory,
+					// and what is inside it is what you see after entering it.
+					if ((typeof entry.group === "string" ? entry.group : "") !== base) return false;
 					if (!matchesQuery(entry, query)) return false;
 					if (filter === "unexplained") return isUnexplained(entry);
 					if (filter === "pinned") return entry.pinned;
@@ -2245,13 +2443,14 @@ window.__ModuleLoader__.load({
 					if (filter === "flagged") return isFlagged(entry);
 					return true;
 				});
-				return matched.sort(
-					(left, right) =>
-						Number(right.pinned) - Number(left.pinned) ||
-						Number(isUnexplained(left)) - Number(isUnexplained(right)) ||
-						right.lastSeenAt - left.lastSeenAt ||
-						left.term.localeCompare(right.term)
-				);
+				// Newest term first, and NOTHING ELSE.
+				//
+				// It used to sort pinned first and unexplained first, and it then sorted by when each term was last
+				// SEEN — every one of which moves a row under the reader's hand: pin a term and it jumped to the top,
+				// answer a prompt and it jumped, and the transcript merely mentioning a term again shuffled the list.
+				// Creation time is the one thing no action changes, so the list is still while the reader reads it.
+				// The pin is shown on the row itself and 「已钉选」 gathers the pinned ones, so ordering has no job left.
+				return matched.sort((left, right) => (right.createdAt ?? 0) - (left.createdAt ?? 0) || left.term.localeCompare(right.term));
 			}
 
 			/**
@@ -2393,6 +2592,7 @@ window.__ModuleLoader__.load({
 				tombstonesOf,
 				upsertEntry,
 				editEntry,
+				restoreEntry,
 				recordSighting,
 				removeEntry,
 				reviveEntry,
@@ -2402,6 +2602,7 @@ window.__ModuleLoader__.load({
 				mergeState,
 				summarize,
 				listEntries,
+				groupsIn,
 				listDeleted,
 				createFileStore,
 				createBrowserStore
@@ -4295,6 +4496,21 @@ window.__ModuleLoader__.load({
 						return result.entry;
 					},
 
+					/**
+					 * Bring a deleted term back, as an explicit act.
+					 *
+					 * See `restoreEntry` in the core: a restoration is a decision with its own evidence and it
+					 * withdraws the tombstone, rather than an edit that has to win a comparison on the way to the host.
+					 * @param idOrTerm - the entry id, term or alias.
+					 * @param patch - the text to restore it with, if any.
+					 * @returns a promise resolving to `{ entry, restored }`.
+					 */
+					async restoreEntry(idOrTerm, patch) {
+						const result = dictionary.restoreEntry(state, idOrTerm, patch, { now: now() });
+						if (result.restored) await commit(result.state);
+						return { entry: result.entry, restored: result.restored };
+					},
+
 					/**
 					 * Record that a term appeared in a message, without overwriting a definition
 					 * the user wrote.
@@ -4421,17 +4637,29 @@ window.__ModuleLoader__.load({
 						return this.saveEntry(found.term, patch);
 					},
 
+					/**
+					 * The groups directly inside one path, each with how many entries it holds.
+					 * @param prefix - the path to look inside, `""` for the top level.
+					 * @returns `[{ group, name, count }]`.
+					 */
+					groups(prefix) {
+						return dictionary.groupsIn(state.entries, prefix);
+					},
+
 					/**
 					 * The visible list for the panel.
 					 * @param query - search text.
 					 * @param filter - `all`, `unexplained`, `pinned`, `deleted` or `flagged`.
+					 * @param group - the group path to look inside, `""` for the top level.
 					 * @returns the ordered entries. For `deleted`, the tombstones.
 					 */
-					list(query, filter) {
+					list(query, filter, group) {
+						const at = group === undefined || group === null ? "" : String(group);
 						// The deleted view is a different LIST rather than a different filter: tombstones live in
-						// `backing`, not in `entries`, so no predicate over the live list could ever show one.
-						if (filter === "deleted") return dictionary.listDeleted(state, query);
-						return listEntries(state, query, filter);
+						// `backing`, not in `entries`, so no predicate over the live list could ever show one. The group
+						// still applies — standing in a folder and asking what was deleted there means that folder.
+						if (filter === "deleted") return dictionary.listDeleted(state, query).filter((entry) => (typeof entry.group === "string" ? entry.group : "") === at);
+						return listEntries(state, query, filter, at);
 					},
 
 					/**
@@ -4491,12 +4719,34 @@ window.__ModuleLoader__.load({
 			/** The most sources the list will hold. A UI bound, not a security one. */
 			const MAX_SOURCES = 12;
 
+			/**
+			 * The source a fresh install starts with: this plugin's own repository, as a static file.
+			 *
+			 * Why ship one at all: without it the packs page opens on an empty list, and a first-time reader has
+			 * to be TOLD a URL before they can see what a term pack even is. The alternative — fetching from a
+			 * server we run — is the thing this design refuses to have, so the default is an ordinary source like
+			 * any other: visible in the list, removable in one press, and fetched only when the reader asks (the
+			 * page refreshes it on first open, which is a request to the source THEY have configured).
+			 *
+			 * `@main` rather than a tag because a default should follow the packs the repository actually has:
+			 * pinned to a tag, a new pack would need a plugin release before anyone could see it.
+			 */
+			const DEFAULT_PACK_SOURCE = "https://cdn.jsdelivr.net/gh/lakerian/dsh-plugin-term-dictionary@main/packs/index.json";
+
 			/**
 			 * The URL rule, imported rather than restated: the settings store, the page and the host's transport
 			 * must agree on what a usable source is, and two copies of that rule is how one of them drifts.
 			 */
 			const { refuseUrl } = require("./pack.js");
 
+			const ENTRY_COLUMNS = ["auto", "1", "2", "3"];
+
+			/** The two row-height readings: equal cards, or each card as tall as its own text. */
+			const ENTRY_ROWS = ["uniform", "compact"];
+
+			/** The narrowest a column may be when the layout is choosing. Below this a gloss wraps every other word. */
+			const MIN_COLUMN_PX = 260;
+
 			/**
 			 * The three switches and their defaults.
 			 *
@@ -4548,6 +4798,23 @@ window.__ModuleLoader__.load({
 				 * the pointer had gone. Anyone who wants a grace period may have one; nobody gets it by accident.
 				 */
 				hoverOutMs: 0,
+				/**
+				 * How many columns the entry list is laid out in.
+				 *
+				 * `auto` fits as many as the panel is wide enough for, and is the default: a dictionary row is
+				 * short, a single column of them is a very long strip to read, and a narrow panel simply gets one
+				 * column back. The fixed values exist for a reader who wants the layout to stop moving under them.
+				 */
+				entryColumns: "auto",
+				/**
+				 * How tall a row of the entry list is.
+				 *
+				 * `uniform` gives every card in a grid row the height of the tallest, so the cards line up and no
+				 * empty strip is left under the short ones. `compact` lets each keep its own height, which reads
+				 * tighter in a single column and leaves exactly those strips in a grid. Both are defensible, which
+				 * is why it is a preference rather than a constant.
+				 */
+				entryRows: "uniform",
 				/**
 				 * The term-pack sources the user added: https URLs of static `index.json` files.
 				 *
@@ -4556,8 +4823,13 @@ window.__ModuleLoader__.load({
 				 * is not configuration. Validated by the same rule the host applies before it fetches anything
 				 * ({@link module:core/pack.refuseUrl}), so the page and the transport cannot disagree about what a
 				 * usable source is.
+				 *
+				 * The default is not empty: see {@link DEFAULT_PACK_SOURCE}. An ABSENT key means "never touched, use
+				 * the default"; an empty array means "the reader removed them all", which is honoured (§
+				 * `normalizeSettings`) — the two are different statements and a store that conflated them would
+				 * resurrect the default every time somebody cleared the list.
 				 */
-				packSources: []
+				packSources: [DEFAULT_PACK_SOURCE]
 			};
 
 			/** The accepted minimum term lengths, for the panel's cycling control. */
@@ -4663,7 +4935,13 @@ window.__ModuleLoader__.load({
 					collectCjk: readFlag(value.collectCjk, DEFAULT_SETTINGS.collectCjk),
 					hoverInMs: readDelay(value.hoverInMs, DEFAULT_SETTINGS.hoverInMs),
 					hoverOutMs: readDelay(value.hoverOutMs, DEFAULT_SETTINGS.hoverOutMs),
-					packSources: readSources(value.packSources)
+					entryColumns: readChoice(value.entryColumns, ENTRY_COLUMNS, DEFAULT_SETTINGS.entryColumns),
+					entryRows: readChoice(value.entryRows, ENTRY_ROWS, DEFAULT_SETTINGS.entryRows),
+					// Absent means "never touched" and gets the shipped default; an empty array means the reader
+					// removed every source, and is kept as it is. A fresh array either way: a snapshot is compared by
+					// identity, so handing back the shared default array would make one page's edit appear in
+					// another page's defaults.
+					packSources: value.packSources === undefined ? [...DEFAULT_SETTINGS.packSources] : readSources(value.packSources)
 				};
 			}
 
@@ -4771,6 +5049,10 @@ window.__ModuleLoader__.load({
 				DEFAULT_SETTINGS,
 				normalizeSettings,
 				MAX_SOURCES,
+				DEFAULT_PACK_SOURCE,
+				ENTRY_COLUMNS,
+				ENTRY_ROWS,
+				MIN_COLUMN_PX,
 				EXPLAIN_LANGS,
 				EXPLAIN_DEPTHS,
 				COLLECT_LENGTHS,
@@ -4854,6 +5136,9 @@ window.__ModuleLoader__.load({
 					}
 				};
 				if (typeof entry?.domain === "string" && entry.domain !== "") record.domain = entry.domain;
+				// A group travels through an export, so a backup restores the structure it was filed under; it does NOT
+				// travel in a pack, where the reader organizes entries their own way (see `pack.js`'s allowlist).
+				if (typeof entry?.group === "string" && entry.group !== "") record.group = entry.group;
 				if (Array.isArray(entry?.aliases) && entry.aliases.length > 0) record.aliases = [...entry.aliases];
 				if (entry?.pinned === true) record.pinned = true;
 				if (typeof entry?.source === "string" && entry.source !== "") record.source = entry.source;
@@ -4935,6 +5220,9 @@ window.__ModuleLoader__.load({
 						usage: typeof definition.usage === "string" ? definition.usage : ""
 					},
 					domain: typeof raw.domain === "string" ? raw.domain.trim() : "",
+					// A group is read back from a file like any other label the user assigned — that is what makes an
+					// export a backup of the STRUCTURE and not only of the words.
+					group: typeof raw.group === "string" ? raw.group.trim() : "",
 					aliases: Array.isArray(raw.aliases) ? raw.aliases.filter((alias) => typeof alias === "string" && alias.trim() !== "") : [],
 					pinned: raw.pinned === true
 				};
@@ -4975,6 +5263,64 @@ window.__ModuleLoader__.load({
 				return { ok: true, entries, skipped };
 			}
 
+			/**
+			 * The folder path a file sits in, as a group path.
+			 *
+			 * The picked folder's own name IS the first group: choosing a folder called `packs` is how you say "file
+			 * these under `packs`", and dropping the name would put everything at the top level — which is precisely
+			 * the structure the user just picked a folder to express.
+			 *
+			 * @param path - a `relative/path/file.json`, as `webkitRelativePath` reports it.
+			 * @returns the group path.
+			 */
+			function folderPathOf(path) {
+				const parts = String(path)
+					.split("/")
+					.filter((part) => part !== "");
+				// Everything but the file name.
+				return parts.slice(0, -1).join("/");
+			}
+
+			/**
+			 * Read a whole directory into one import.
+			 *
+			 * A folder is a mixed bag: several exported dictionaries, somebody's downloaded pack files, an
+			 * `index.json` that lists packs rather than holding entries, and often a README or a screenshot. So this
+			 * reports what it could NOT use instead of refusing the folder — the alternative is a user with twenty
+			 * files and one bad one, told "no" with no idea which file it was. Files that are not JSON are not
+			 * reported at all: they are not mistakes.
+			 *
+			 * @param files - `[{ path, text }]`, the directory's files as the browser hands them over.
+			 * @param options - `useFolderAsGroup` files each entry under the folder it came from, which is the shape
+			 *   people actually keep: one folder per topic, and the reason the option exists at all.
+			 * @returns `{ entries, files, used, skipped }`, where `skipped` is `[{ name, error }]`.
+			 */
+			function collectFolderImport(files, options) {
+				const list = Array.isArray(files) ? files : [];
+				const entries = [];
+				const skipped = [];
+				const useFolder = options?.useFolderAsGroup === true;
+				let used = 0;
+				let jsonFiles = 0;
+				for (const file of list) {
+					const path = typeof file?.path === "string" ? file.path : "";
+					if (!/\.json$/i.test(path)) continue;
+					jsonFiles++;
+					const parsed = parseImport(typeof file?.text === "string" ? file.text : "");
+					if (parsed.ok !== true) {
+						skipped.push({ name: path, error: parsed.error });
+						continue;
+					}
+					used++;
+					const folder = useFolder ? folderPathOf(path) : "";
+					for (const entry of parsed.entries) {
+						const hasGroup = typeof entry.group === "string" && entry.group !== "";
+						entries.push(folder !== "" && !hasGroup ? { ...entry, group: folder } : entry);
+					}
+				}
+				return { entries, files: jsonFiles, used, skipped };
+			}
+
 			/**
 			 * Decide what an import would do, without doing any of it.
 			 *
@@ -5020,10 +5366,15 @@ window.__ModuleLoader__.load({
 				// Opting in does not empty the `deleted` bucket by accident: it moves those entries into
 				// `accepted`, and the bucket is then genuinely empty, so the report says "0 you deleted" and
 				// means it.
+				//
+				// `revived` names the accepted entries that were previously DELETED, separately from the ones that are
+				// simply new. The caller must not treat the two the same: a new term is a write, while a deleted term is
+				// a RESTORATION — a decision that has to beat the tombstone, not an edit that hopes to. Running both
+				// through the same write is how "a term that was collected and then deleted cannot be restored" happened.
 				const retract = options?.includeDeleted === true;
 				return retract
-					? { accepted: [...accepted, ...wasDeleted], existing: alreadyHave, deleted: [], duplicates }
-					: { accepted, existing: alreadyHave, deleted: wasDeleted, duplicates };
+					? { accepted: [...accepted, ...wasDeleted], revived: wasDeleted, existing: alreadyHave, deleted: [], duplicates }
+					: { accepted, revived: [], existing: alreadyHave, deleted: wasDeleted, duplicates };
 			}
 
 			/**
@@ -5085,6 +5436,7 @@ window.__ModuleLoader__.load({
 				buildExport,
 				buildFeedbackReport,
 				parseImport,
+				collectFolderImport,
 				planImport,
 				domainsIn,
 				toRecord,
@@ -5260,28 +5612,41 @@ window.__ModuleLoader__.load({
 			}
 
 			/**
-			 * Read a pack from whatever arrived: a fetched file, or a decoded share code.
+			 * Read a pack from whatever arrived: a fetched file, a decoded share code, or the text of either.
 			 *
 			 * Tolerant about unknown keys in the envelope, strict about the two things that make it a pack: its
 			 * marker and at least one usable entry. Every record goes through the same validator an imported file
 			 * does, so a record that cannot be imported is a record this refuses.
 			 *
-			 * @param raw - the parsed value.
+			 * Accepts TEXT as well as a parsed object, because text is what actually arrives: the host fetches the
+			 * file and passes the body on. Accepting only an object made every source and every pack answer
+			 * `not-an-object` — a feature that refuses everything, in the shape of a bad URL.
+			 *
+			 * @param raw - the fetched body, the decoded text, or the parsed value.
 			 * @returns `{ ok: true, pack }`, or `{ ok: false, error }`.
 			 */
 			function parsePack(raw) {
-				if (raw === null || typeof raw !== "object" || Array.isArray(raw)) return { ok: false, error: "not-an-object" };
-				if (raw.kind !== PACK_KIND) return { ok: false, error: "not-a-pack" };
-				if (raw.version !== PACK_VERSION) return { ok: false, error: "unsupported-version" };
-				if (!Array.isArray(raw.entries)) return { ok: false, error: "no-entries" };
-				if (raw.entries.length > MAX_PACK_ENTRIES) return { ok: false, error: "too-many" };
+				let value = raw;
+				if (typeof raw === "string") {
+					try {
+						value = JSON.parse(raw);
+					} catch (error) {
+						return { ok: false, error: "not-json" };
+					}
+				}
+				if (value === null || typeof value !== "object" || Array.isArray(value)) return { ok: false, error: "not-an-object" };
+				const raw2 = value;
+				if (raw2.kind !== PACK_KIND) return { ok: false, error: "not-a-pack" };
+				if (raw2.version !== PACK_VERSION) return { ok: false, error: "unsupported-version" };
+				if (!Array.isArray(raw2.entries)) return { ok: false, error: "no-entries" };
+				if (raw2.entries.length > MAX_PACK_ENTRIES) return { ok: false, error: "too-many" };
 				const entries = [];
-				for (const record of raw.entries) {
+				for (const record of raw2.entries) {
 					const entry = transfer.toEntry(record);
 					if (entry !== null) entries.push(record);
 				}
 				if (entries.length === 0) return { ok: false, error: "no-usable-entries" };
-				const scope = raw.scope !== null && typeof raw.scope === "object" && raw.scope.kind === "domains" ? "domains" : "all";
+				const scope = raw2.scope !== null && typeof raw2.scope === "object" && raw2.scope.kind === "domains" ? "domains" : "all";
 				return {
 					ok: true,
 					pack: {
@@ -5380,17 +5745,31 @@ window.__ModuleLoader__.load({
 			 * in somebody's index must not hide the other forty packs. An index with nothing usable left is a
 			 * refusal, because a source that offers nothing is a source that is misconfigured or moved.
 			 *
-			 * @param raw - the parsed value.
+			 * Takes TEXT or a parsed object, like {@link parsePack} — and the text form is the one production uses:
+			 * the host fetches the source and hands the body straight over. Requiring an object here while the host
+			 * sends text meant every source answered `not-an-object`, which is a whole feature answering "no" in a
+			 * way that looks like the user's URL was wrong.
+			 *
+			 * @param raw - the fetched body, or the parsed value.
 			 * @returns `{ ok: true, index, dropped }`, or `{ ok: false, error }`.
 			 */
 			function parseIndex(raw) {
-				if (raw === null || typeof raw !== "object" || Array.isArray(raw)) return { ok: false, error: "not-an-object" };
-				if (raw.kind !== INDEX_KIND) return { ok: false, error: "not-an-index" };
-				if (raw.version !== INDEX_VERSION) return { ok: false, error: "unsupported-version" };
-				if (!Array.isArray(raw.packs)) return { ok: false, error: "no-packs" };
+				let value = raw;
+				if (typeof raw === "string") {
+					try {
+						value = JSON.parse(raw);
+					} catch (error) {
+						return { ok: false, error: "not-json" };
+					}
+				}
+				if (value === null || typeof value !== "object" || Array.isArray(value)) return { ok: false, error: "not-an-object" };
+				const raw2 = value;
+				if (raw2.kind !== INDEX_KIND) return { ok: false, error: "not-an-index" };
+				if (raw2.version !== INDEX_VERSION) return { ok: false, error: "unsupported-version" };
+				if (!Array.isArray(raw2.packs)) return { ok: false, error: "no-packs" };
 				const packs = [];
 				let dropped = 0;
-				for (const pack of raw.packs) {
+				for (const pack of raw2.packs) {
 					if (pack === null || typeof pack !== "object") {
 						dropped++;
 						continue;
@@ -8787,6 +9166,23 @@ window.__ModuleLoader__.load({
 					boxShadow: "0 0 0 1px var(--dsw-alias-brand-primary, #4d6bfe)"
 				},
 				rowHead: { display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" },
+				/** Where you are, and the way back up: a directory you can only enter is a trap. */
+				breadcrumb: { display: "flex", alignItems: "center", gap: "2px", flexWrap: "wrap", padding: "2px 0 6px", fontSize: "12px" },
+				breadcrumbPart: { display: "inline-flex", alignItems: "center", gap: "2px" },
+				breadcrumbSep: { color: "var(--dsw-alias-label-tertiary)", margin: "0 2px" },
+				breadcrumbButton: { appearance: "none", border: "none", background: "none", padding: "2px 4px", font: "inherit", fontSize: "12px", color: "var(--dsw-alias-brand-primary, #4d6bfe)", cursor: "pointer" },
+				breadcrumbHere: { appearance: "none", border: "none", background: "none", padding: "2px 4px", font: "inherit", fontSize: "12px", color: "var(--dsw-alias-label-secondary)", cursor: "default" },
+				/** The group row's own bits: the mark that says "not an entry", and the chevron that says "opens". */
+				groupIcon: { display: "inline-flex", alignItems: "center", color: "var(--dsw-alias-label-secondary)" },
+				groupEnter: { color: "var(--dsw-alias-label-tertiary)", fontSize: "14px", lineHeight: 1 },
+				/**
+				 * The row's action toolbar: the second line, always.
+				 *
+				 * On the title line the controls moved from row to row with the length of the term and the number of
+				 * badges; a line of their own puts every row's controls in the same place and keeps them out of the
+				 * way of the text they act on.
+				 */
+				rowActions: { display: "flex", alignItems: "center", gap: "6px", marginTop: "2px" },
 				termButton: {
 					appearance: "none",
 					background: "transparent",
@@ -9293,6 +9689,13 @@ window.__ModuleLoader__.load({
 						{ width: size, height: size, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" },
 						h("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round" })
 					),
+				// The group row's icon: the one thing on screen that is not an entry, so it says so without a label.
+				folder: (size) =>
+					h(
+						"svg",
+						{ width: size, height: size, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" },
+						h("path", { d: "M1.5 3.5A1 1 0 0 1 2.5 2.5h3.2l1.3 1.6h6.5a1 1 0 0 1 1 1v6.4a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1z", stroke: "currentColor", strokeWidth: "1.2", fill: "none" })
+					),
 				pin: (size) =>
 					h(
 						"svg",
@@ -9366,11 +9769,11 @@ window.__ModuleLoader__.load({
 			};
 
 			/** Settings used when the panel is rendered without a settings store (tests, odd hosts). */
-			const FALLBACK_SETTINGS = { autoCollect: true, autoAnnotate: true, autoExplain: true, explainLang: "auto", explainDepth: "normal", explainParagraph: true, collectMinLength: 4, collectIdentifiers: false, collectCjk: true };
+			const FALLBACK_SETTINGS = { autoCollect: true, autoAnnotate: true, autoExplain: true, explainLang: "auto", explainDepth: "normal", explainParagraph: true, collectMinLength: 4, collectIdentifiers: false, collectCjk: true, entryColumns: "auto", entryRows: "uniform", packSources: [] };
 
 			/** The accepted preference values, so the page offers exactly what the store validates. */
-			const { EXPLAIN_LANGS, EXPLAIN_DEPTHS, COLLECT_LENGTHS, HOVER_DELAY_MIN, HOVER_DELAY_MAX, HOVER_DELAY_STEP } = require("./settings.js");
-			const { buildExport, buildFeedbackReport, parseImport, planImport, domainsIn } = require("./transfer.js");
+			const { EXPLAIN_LANGS, EXPLAIN_DEPTHS, COLLECT_LENGTHS, HOVER_DELAY_MIN, HOVER_DELAY_MAX, HOVER_DELAY_STEP, DEFAULT_PACK_SOURCE, ENTRY_COLUMNS, ENTRY_ROWS, MIN_COLUMN_PX } = require("./settings.js");
+			const { buildExport, buildFeedbackReport, parseImport, collectFolderImport, planImport, domainsIn } = require("./transfer.js");
 			const { FEEDBACK_KINDS, isFlagged, entryAsText } = require("./entries.js");
 			const { refuseUrl } = require("./pack.js");
 			const { selectionInside } = require("./selection.js");
@@ -9544,13 +9947,20 @@ window.__ModuleLoader__.load({
 				const plan = planImport(store.getState().entries ?? [], incoming, store.getState().deletedKeys ?? new Set(), {
 					includeDeleted: options?.includeDeleted === true
 				});
+				// Two different acts, deliberately: a term the dictionary never had is a WRITE, while a term the user
+				// deleted is a RESTORATION. `store.restoreEntry` withdraws the tombstone and records the decision; a
+				// write would instead have to BEAT the tombstone in a merge, and it can lose that comparison — which is
+				// exactly "a term that was collected and then deleted could not be restored".
+				const revived = new Set((plan.revived ?? []).map((entry) => entry.key));
 				for (const entry of plan.accepted) {
-					await store.saveEntry(entry.term, {
+					const patch = {
 						definition: entry.definition,
 						domain: entry.domain,
 						aliases: entry.aliases,
 						pinned: entry.pinned
-					});
+					};
+					if (revived.has(entry.key)) await store.restoreEntry(entry.term, patch);
+					else await store.saveEntry(entry.term, patch);
 				}
 				return {
 					imported: plan.accepted.length,
@@ -9658,6 +10068,21 @@ window.__ModuleLoader__.load({
 				 * choice this page offers.
 				 */
 				const [includeGloss, setIncludeGloss] = React.useState(false);
+				/**
+				 * A file that has been read but not imported yet: `{ name, entries, skippedCount, plan }`.
+				 *
+				 * Reading a file and writing it are two decisions, and this state is the gap between them. It exists
+				 * because the second decision used to have no moment of its own: picking a file imported it outright,
+				 * so the only way to see what was in it was the report afterwards.
+				 */
+				const [pending, setPending] = React.useState(null);
+				/**
+				 * Whether a folder import names each entry's category after the folder it came from.
+				 *
+				 * Off by default: it writes a value the user did not type. On is for the shape people actually keep —
+				 * one folder per topic.
+				 */
+				const [useFolderAsGroup, setUseFolderAsGroup] = React.useState(true);
 				/**
 				 * What came back from the host's own feedback channel, or null when nothing was sent yet.
 				 *
@@ -9742,7 +10167,7 @@ window.__ModuleLoader__.load({
 				/** Save the export as a file. */
 				const download = () => downloadText(textOf(), `term-dictionary-${new Date().toISOString().slice(0, 10)}.json`);
 
-				/** Take a file, and say what came of it. */
+				/** Take a file: read it, show what is in it, and write nothing until the user says so. */
 				const takeFile = async (event) => {
 					const file = event?.target?.files?.[0];
 					if (file === undefined || file === null) return;
@@ -9753,9 +10178,76 @@ window.__ModuleLoader__.load({
 							setReport({ failed: parsed.error });
 							return;
 						}
-						// Through the shared path, so a file and a pack cannot diverge in what they do with an
-						// entry — including the crafted revival that makes a term the user deleted stay revived.
-						setReport(await importEntries(store, parsed.entries, { includeDeleted, skipped: parsed.skipped ?? 0 }));
+						// The previous import's report goes away when a new file is read: it describes something that
+						// has already happened, and leaving it under a fresh confirmation reads as if it described
+						// this one.
+						setReport(null);
+						// The plan is a DRY RUN: `planImport` is pure, so the page can say what would happen without
+						// any of it happening. The write path recomputes it at the moment of the write, so a preview
+						// that went stale (another window deleted something) cannot import the stale answer.
+						setPending({ name: file.name, entries: parsed.entries, skippedCount: parsed.skipped ?? 0, plan: planFor(parsed.entries, includeDeleted) });
+					} catch (error) {
+						setReport({ failed: String(error?.message ?? error) });
+					} finally {
+						setBusy(false);
+					}
+				};
+
+				/** The dry-run plan for a set of incoming records, used by the preview and by the write. */
+				function planFor(incoming, withDeleted) {
+					return planImport(store.getState().entries ?? [], incoming, store.getState().deletedKeys ?? new Set(), { includeDeleted: withDeleted === true });
+				}
+
+				/** The confirmation the user actually presses. */
+				const confirmImport = async () => {
+					if (pending === null || busy) return;
+					setBusy(true);
+					try {
+						const result = await importEntries(store, pending.entries, { includeDeleted, skipped: pending.skippedCount });
+						// The panel owns the view, so IT decides what has to move to show what was just written — and
+						// says whether it had to. An import that lands while the list is filtered to 「已删除」 or
+						// narrowed by a search looks exactly like an import that did nothing, which is how this was
+						// reported once ("the imported entries do not appear").
+						const moved = typeof props.onImported === "function" && props.onImported() === true;
+						setReport(moved ? { ...result, moved: true } : result);
+						setPending(null);
+					} catch (error) {
+						setReport({ failed: String(error?.message ?? error) });
+					} finally {
+						setBusy(false);
+					}
+				};
+
+				/**
+				 * Read a whole folder: every `*.json` in it, as one import.
+				 *
+				 * A directory reaches the page through `webkitdirectory`, which is the OS's own directory browser —
+				 * so this needs no new service dependency, and nothing can park the plugin waiting for one. The
+				 * browser supplies `webkitRelativePath`, which is what names a category after its folder.
+				 */
+				const takeFolder = async (event) => {
+					const files = [...(event?.target?.files ?? [])];
+					if (files.length === 0) return;
+					setBusy(true);
+					try {
+						const read = [];
+						for (const file of files) {
+							const path = typeof file.webkitRelativePath === "string" && file.webkitRelativePath !== "" ? file.webkitRelativePath : file.name;
+							read.push({ path, text: await file.text() });
+						}
+						const collected = collectFolderImport(read, { useFolderAsGroup });
+						if (collected.entries.length === 0) {
+							setReport({ failed: collected.skipped.length === 0 ? t("transferNoJson") : t("transferFolderAllSkipped", { count: String(collected.skipped.length) }) });
+							return;
+						}
+						setReport(null);
+						setPending({
+							name: t("transferFolderLabel", { count: String(collected.used) }),
+							entries: collected.entries,
+							skippedCount: 0,
+							plan: planFor(collected.entries, includeDeleted),
+							folder: { files: collected.files, used: collected.used, skipped: collected.skipped }
+						});
 					} catch (error) {
 						setReport({ failed: String(error?.message ?? error) });
 					} finally {
@@ -9866,7 +10358,13 @@ window.__ModuleLoader__.load({
 							type: "checkbox",
 							style: applyStyles.checkbox,
 							checked: includeDeleted,
-							onChange: () => setIncludeDeleted(!includeDeleted)
+							// Toggling this re-plans the preview rather than leaving it: the number the user is about
+							// to confirm is the number this opt-in produces, or the confirmation is a lie.
+							onChange: () => {
+								const next = !includeDeleted;
+								setIncludeDeleted(next);
+								setPending((current) => (current === null ? null : { ...current, plan: planFor(current.entries, next) }));
+							}
 						}),
 						h("span", { style: applyStyles.transferName }, t("transferIncludeDeleted"))
 					),
@@ -9879,19 +10377,114 @@ window.__ModuleLoader__.load({
 						onChange: (event) => void takeFile(event),
 						style: applyStyles.transferFile
 					}),
+					// The folder half. `webkitdirectory` opens the OS's directory browser and hands over every file
+					// inside it, with the path — which is the only directory browser a page needs, and the one that
+					// arrives without a service the plugin could end up parked on.
+					h("p", { style: applyStyles.settingLabel }, t("transferFolderTitle")),
+					h("p", { style: applyStyles.settingHint }, t("transferFolderHint")),
+					h("input", {
+						type: "file",
+						webkitdirectory: "true",
+						directory: "true",
+						multiple: true,
+						"aria-label": t("transferFolderTitle"),
+						disabled: busy,
+						onChange: (event) => void takeFolder(event),
+						style: applyStyles.transferFile,
+						"data-term-dictionary": "transfer-folder"
+					}),
+					h(
+						"label",
+						{ style: applyStyles.transferItem, "data-term-dictionary": "transfer-folder-group" },
+						h("input", { type: "checkbox", style: applyStyles.checkbox, checked: useFolderAsGroup, onChange: () => setUseFolderAsGroup(!useFolderAsGroup) }),
+						h("span", { style: applyStyles.transferName }, t("transferFolderAsGroup"))
+					),
+					// The confirmation. Picking a file used to import it, which made "what is in this file" a
+					// question you could only answer afterwards; the plan below is a dry run, so the answer comes
+					// first and the write waits for a second press.
+					pending === null
+						? null
+						: h(
+							"div",
+							{ style: applyStyles.notice, "data-term-import-pending": "true" },
+							h("p", { style: applyStyles.settingLabel }, t("transferConfirmTitle", { name: pending.name })),
+							h(
+								"p",
+								{ style: applyStyles.settingHint },
+								[
+									t("transferWillImport", { count: String(pending.plan.accepted.length) }),
+									pending.plan.existing.length > 0 ? t("transferWillSkipExisting", { count: String(pending.plan.existing.length) }) : "",
+									pending.plan.deleted.length > 0 ? t("transferWillSkipDeleted", { count: String(pending.plan.deleted.length) }) : "",
+									pending.plan.duplicates + pending.skippedCount > 0 ? t("transferDuplicates", { count: String(pending.plan.duplicates + pending.skippedCount) }) : ""
+								]
+									.filter((part) => part !== "")
+									.join(" · ")
+							),
+							// A folder says what it found and what it had to pass over — by name, because "one file was
+							// skipped" with twenty files in the folder is not an answer.
+							pending.folder === undefined
+								? null
+								: h(
+									"div",
+									null,
+									h("p", { style: applyStyles.settingHint }, t("transferFolderFound", { files: String(pending.folder.files), used: String(pending.folder.used) })),
+									pending.folder.skipped.length === 0
+										? null
+										: h("p", { style: applyStyles.error }, `${t("transferFolderSkipped", { count: String(pending.folder.skipped.length) })} ${pending.folder.skipped.map((each) => `${each.name}（${each.error}）`).join("、")}`)
+								),
+							h(
+								"div",
+								{ style: applyStyles.transferRow },
+								h(Button, { label: t("transferConfirm"), disabled: busy, onClick: () => void confirmImport() }, t("transferConfirm")),
+								h(Button, { label: t("cancel"), onClick: () => setPending(null) }, t("cancel"))
+							)
+						),
 					report === null
 						? null
 						: h(
 							"p",
-							{ style: report.failed === undefined ? applyStyles.settingHint : applyStyles.error },
+							{ style: report.failed === undefined ? applyStyles.settingHint : applyStyles.error, "data-term-report": "true" },
 							report.failed === undefined
-								? t("transferReport", { imported: report.imported, existing: report.existing, deleted: report.deleted, duplicates: report.duplicates })
+								? [t("transferReport", { imported: report.imported, existing: report.existing, deleted: report.deleted, duplicates: report.duplicates }), report.moved === true ? t("transferShown") : ""]
+										.filter((part) => part !== "")
+										.join(" ")
 								: t("transferFailed", { message: report.failed })
 						)
 					//#endregion
 				);
 			}
 
+			/**
+			 * The entry list's layout, given the column preference.
+			 *
+			 * A module-level function rather than an inline style, and pure, so the rule can be asserted without a
+			 * browser: `auto` asks the grid for as many columns as fit at a readable width, a number pins the
+			 * layout, and `1` is the plain column the panel had before any of this existed.
+			 *
+			 * @param columns - `"auto"`, `"1"`, `"2"` or `"3"` (anything else behaves as `auto`).
+			 * @returns the style for the list container.
+			 */
+			function listStyle(columns, rowLayout) {
+				const fixed = Number.parseInt(String(columns), 10);
+				const gridTemplateColumns =
+					Number.isFinite(fixed) && fixed > 1
+						? `repeat(${fixed}, minmax(0, 1fr))`
+						: `repeat(auto-fill, minmax(${MIN_COLUMN_PX}px, 1fr))`;
+				// `stretch` is the default because the complaint was the GAPS: with each cell as tall as its track,
+				// cards line up and no empty strip appears under the short ones. `compact` lets every card keep its
+				// own height instead, which is tidier in a column but leaves those strips — so it is a choice.
+				return {
+					...applyStyles.list,
+					display: "grid",
+					// Rows are as tall as their content, and the leftover height stays at the bottom. Without this a
+					// grid STRETCHES its rows to fill the container, so two cards in a tall panel became two 700px
+					// boxes — the opposite of what "equal cards" was asking for.
+					alignContent: "start",
+					alignItems: rowLayout === "compact" ? "start" : "stretch",
+					gridTemplateColumns
+				};
+			}
+
 			/**
 			 * Term packs: hand this dictionary to somebody, or take theirs.
 			 *
@@ -9934,6 +10527,7 @@ window.__ModuleLoader__.load({
 				/** One row per source after a refresh: `{ url, ok, stale, error, index }`. */
 				const [listing, setListing] = React.useState(null);
 				const [packNote, setPackNote] = React.useState({});
+				const [autoRefreshed, setAutoRefreshed] = React.useState(false);
 				/** Say something in the page's one notice line rather than in a dialog. */
 				const say = (message) => setNotice(message);
 
@@ -10010,6 +10604,25 @@ window.__ModuleLoader__.load({
 					}
 				};
 
+				/**
+				 * Ask the reader's own sources what they hold, once, when the page first opens.
+				 *
+				 * Without it a fresh install shows a configured source and nothing else, and "press 刷新" is a step
+				 * whose purpose nobody can guess. The request goes to the sources THEY have (the shipped default
+				 * included), the host does the fetching and caches it for an hour, and the list stays theirs to clear
+				 * — a source removed here is not added back, which is why this looks at the length rather than at
+				 * whether the list is the default one.
+				 *
+				 * Declared after `refresh` on purpose: the effect callback runs on the first render in some
+				 * harnesses (and in React's own test renderers), and a callback closing over a `const` below it
+				 * would read an uninitialised binding.
+				 */
+				React.useEffect(() => {
+					if (autoRefreshed || sources.length === 0) return;
+					setAutoRefreshed(true);
+					void refresh();
+				}, [autoRefreshed, sources.length]);
+
 				/** Fetch one listed pack and offer it for import. */
 				const preview = async (row, listed) => {
 					if (typeof packApi?.fetch !== "function") return say(t("packNoHost"));
@@ -10181,6 +10794,9 @@ window.__ModuleLoader__.load({
 								h(
 									"div",
 									{ key: url, style: applyStyles.transferItem, "data-term-source": url },
+									// The shipped one says so: a source nobody remembers adding is a source nobody dares
+									// remove, and this one is removable like any other.
+									url === DEFAULT_PACK_SOURCE ? h("span", { style: applyStyles.badge }, t("packBuiltInSource")) : null,
 									h("span", { style: applyStyles.transferName }, url),
 									h(Button, { label: t("packRemoveSource"), onClick: () => settingsStore?.set?.("packSources", sources.filter((each) => each !== url)) }, t("packRemoveSource"))
 								)
@@ -10189,7 +10805,7 @@ window.__ModuleLoader__.load({
 					h(
 						"div",
 						{ style: applyStyles.transferRow },
-						h(Field, { label: t("packAddSourceLabel"), value: sourceDraft, placeholder: t("packAddSourcePlaceholder"), onChange: setSourceDraft }),
+						h(Field, { label: t("packAddSourceLabel"), value: sourceDraft, placeholder: t("packAddSourcePlaceholder"), width: "30em", onChange: setSourceDraft }),
 						h(Button, { label: t("packAddSource"), disabled: busy, onClick: addSource }, t("packAddSource")),
 						h(Button, { label: t("packRefresh"), disabled: busy || sources.length === 0, onClick: () => void refresh() }, t("packRefresh"))
 					),
@@ -10393,6 +11009,28 @@ window.__ModuleLoader__.load({
 							onSelect: (value) => setSwitch("explainDepth", value)
 						})
 					),
+					row(
+						"rows",
+						t("entryRowsName"),
+						t("entryRowsHint"),
+						h(OptionBar, {
+							label: t("entryRowsName"),
+							value: ENTRY_ROWS.includes(settings.entryRows) ? settings.entryRows : "uniform",
+							options: ENTRY_ROWS.map((value) => ({ value, label: t(`entryRows_${value}`) })),
+							onSelect: (value) => setSwitch("entryRows", value)
+						})
+					),
+					row(
+						"columns",
+						t("entryColumnsName"),
+						t("entryColumnsHint"),
+						h(OptionBar, {
+							label: t("entryColumnsName"),
+							value: ENTRY_COLUMNS.includes(settings.entryColumns) ? settings.entryColumns : "auto",
+							options: ENTRY_COLUMNS.map((value) => ({ value, label: t(`entryColumns_${value}`) })),
+							onSelect: (value) => setSwitch("entryColumns", value)
+						})
+					),
 					flag(
 						"identifiers",
 						t("collectIdentifiersOn"),
@@ -10467,6 +11105,15 @@ window.__ModuleLoader__.load({
 			}
 
 			/** A labelled text input. */
+			/**
+			 * A labelled text field.
+			 *
+			 * One width for every single-line field, because a form of differently-sized boxes reads as a mistake
+			 * rather than as a decision. `width` overrides the cap for the rare field whose content really is longer
+			 * (a URL, a path), and a multi-line field is an {@link Area} and takes the full width instead.
+			 */
+			const FIELD_WIDTH = "22em";
+
 			function Field(props) {
 				return h(
 					"label",
@@ -10477,7 +11124,7 @@ window.__ModuleLoader__.load({
 						value: props.value,
 						placeholder: props.placeholder,
 						onChange: (event) => props.onChange(event.target.value),
-						style: applyStyles.input,
+						style: { ...applyStyles.input, maxWidth: props.width ?? FIELD_WIDTH },
 						"aria-label": props.label
 					})
 				);
@@ -10541,6 +11188,8 @@ window.__ModuleLoader__.load({
 				);
 				const [query, setQuery] = React.useState("");
 				const [filter, setFilter] = React.useState("all");
+				/** How the entry list is laid out; the settings store owns the value, this only reads it. */
+				const columns = settings.entryColumns ?? FALLBACK_SETTINGS.entryColumns;
 				const [editing, setEditing] = React.useState(null);
 				/** Whether the panel is showing its settings page instead of the entry list. */
 				const [settingsOpen, setSettingsOpen] = React.useState(false);
@@ -10587,7 +11236,21 @@ window.__ModuleLoader__.load({
 					};
 				}, [store]);
 
-				const visible = React.useMemo(() => store.list(query, filter), [view, query, filter]);
+				/**
+				 * Which group the list is showing: `""` is the top level, otherwise a path like `backend/net`.
+				 *
+				 * Standing somewhere is a property of the VIEW, not of the dictionary — nothing about an entry changes
+				 * because you looked at it — so it is panel state, next to the search box and the tab.
+				 */
+				const [group, setGroup] = React.useState("");
+				const visible = React.useMemo(() => store.list(query, filter, group), [view, query, filter, group]);
+				/**
+				 * The groups directly inside the current one, each with how many entries it holds.
+				 *
+				 * They are ROWS of the list rather than a sidebar or a header: a group is the same kind of thing as an
+				 * entry — something you open — and the point of the shape is that both are the same size on screen.
+				 */
+				const subGroups = React.useMemo(() => store.groups(group), [view, group]);
 				const current = view.state.entries;
 				/**
 				 * Whether the panel is showing what was deleted.
@@ -10606,6 +11269,22 @@ window.__ModuleLoader__.load({
 				 */
 				const showingFlagged = filter === "flagged";
 
+				/**
+				 * Make what an import just wrote visible.
+				 *
+				 * The panel owns the view, so this is the panel's job and not the import page's. It returns whether it
+				 * had to move anything, because a report that says "12 imported" while the list is still filtered to
+				 * 「已删除」 is a report nobody can check.
+				 *
+				 * @returns true when the search box or the tab had to change.
+				 */
+				const showImported = () => {
+					const moved = query !== "" || filter !== "all";
+					setQuery("");
+					setFilter("all");
+					return moved;
+				};
+
 				/** Open the editor for a blank entry, prefilled from an optional term. */
 				const startCreate = (term = "", context = "") => {
 					setEditing({
@@ -10615,6 +11294,9 @@ window.__ModuleLoader__.load({
 						usage: "",
 						notes: "",
 						domain: "",
+						// A new entry made while standing in a group belongs to that group: that is what standing there
+						// meant, and asking again in the form would be a question with one sensible answer.
+						group,
 						aliases: "",
 						pinned: false,
 						// Nothing to say yet, and `feedbackTouched` is what tells a save apart from a retraction:
@@ -10638,6 +11320,7 @@ window.__ModuleLoader__.load({
 						usage: entry.definition.usage,
 						notes: entry.definition.notes,
 						domain: entry.domain,
+						group: entry.group,
 						aliases: entry.aliases.join(", "),
 						pinned: entry.pinned,
 						// Seeded from the entry, and `touched` starts true when there is already a remark: saving
@@ -10699,6 +11382,7 @@ window.__ModuleLoader__.load({
 						await store.saveEntry(editing.term, {
 							definition: { zh: editing.zh, gloss: editing.gloss, usage: editing.usage, notes: editing.notes },
 							domain: editing.domain,
+							group: editing.group,
 							aliases: editing.aliases
 								.split(",")
 								.map((alias) => alias.trim())
@@ -10856,6 +11540,12 @@ window.__ModuleLoader__.load({
 								placeholder: t("zhPlaceholder"),
 								onChange: (value) => setEditing({ ...editing, zh: value })
 							}),
+							h(Field, {
+								label: t("groupLabel"),
+								value: editing.group,
+								placeholder: t("groupPlaceholder"),
+								onChange: (value) => setEditing({ ...editing, group: value })
+							}),
 							h(Area, {
 								label: t("glossLabel"),
 								value: editing.gloss,
@@ -10988,7 +11678,7 @@ window.__ModuleLoader__.load({
 							),
 							h(Button, { label: t("settingsBack"), onClick: () => setTransferOpen(false) }, t("settingsBack"))
 						),
-						h(TransferPage, { store, t, setToast: props.setToast })
+						h(TransferPage, { store, t, setToast: props.setToast, onImported: showImported })
 					);
 				}
 
@@ -11116,14 +11806,79 @@ window.__ModuleLoader__.load({
 					) : null,
 					h(
 						"div",
-						{ style: applyStyles.list },
-						showingDeleted
-							? h(DeletedList, { entries: visible, t, onRevive: (entry) => void revive(entry) })
-							: showingFlagged
-							? h(FlaggedList, { entries: visible, t, onClear: (entry) => void clearFlag(entry) })
-							: visible.length === 0
-							? h("p", { style: applyStyles.blank }, current.length === 0 ? t("empty") : t("searchEmpty"))
-							: visible.map((entry) =>
+						// The entry list is the one that gets columns. The deleted and flagged views are lists of
+						// DECISIONS rather than of terms — shorter rows, read one at a time — and the picking mode
+						// pairs every row with a checkbox, so laying those out in a grid would be a change nobody
+						// asked for.
+						{
+							style: showingDeleted || showingFlagged || picking ? applyStyles.list : listStyle(columns, settings.entryRows),
+							"data-term-columns": showingDeleted || showingFlagged || picking ? undefined : columns
+						},
+						// The groups come first, then the entries at this level — one list, one scroll area, one kind of
+						// row. A breadcrumb says where you are and is the way back up, because a directory you can only
+						// enter is a trap.
+						[
+							group === "" ? null : h(
+								"div",
+								{ style: { ...applyStyles.breadcrumb, gridColumn: "1 / -1" }, "data-term-breadcrumb": group },
+								[
+									{ path: "", label: t("filterAll") },
+									...group.split("/").map((name, index, all) => ({ path: all.slice(0, index + 1).join("/"), label: name }))
+								].map((crumb, index) =>
+									h(
+										"span",
+										{ key: crumb.path === "" ? "root" : crumb.path, style: applyStyles.breadcrumbPart },
+										index === 0 ? null : h("span", { style: applyStyles.breadcrumbSep }, "›"),
+										h(
+											"button",
+											{
+												type: "button",
+												style: index === group.split("/").length ? applyStyles.breadcrumbHere : applyStyles.breadcrumbButton,
+												onClick: () => setGroup(crumb.path),
+												title: t("groupGo", { name: crumb.label })
+											},
+											crumb.label
+										)
+									)
+								)
+							),
+							...subGroups.map((sub) =>
+								h(
+									"article",
+									{
+									key: `group:${sub.group}`,
+									// Its own height, not the track's: a group has no body text, so stretching it to match a
+									// three-line entry would leave an empty box the size of the entry — which is what it looked
+									// like. Equal KIND of row is the point; equal height only reads as equal among rows with text.
+									style: { ...applyStyles.row, alignSelf: "start" },
+									"data-term-group": sub.group,
+									// The WHOLE row opens the group, exactly as the whole row of an entry opens the entry.
+									// Only the label being live is what "the group cannot be clicked into" meant: a reader
+									// clicks the row, the same gesture that works one line below, and nothing happened.
+									// The label stays a button so it is reachable by keyboard and named for a screen reader.
+									onClick: () => setGroup(sub.group)
+								},
+									h("div", { style: applyStyles.rowHead },
+										h("div", { style: applyStyles.groupIcon, "aria-hidden": "true" }, Icons.folder(14)),
+										h("button", {
+											type: "button",
+											style: applyStyles.termButton,
+											onClick: () => setGroup(sub.group),
+											title: t("groupOpen")
+										}, sub.name),
+										h("span", { style: applyStyles.badge }, t("groupCount", { count: String(sub.count) })),
+										h("span", { style: applyStyles.spacer }),
+										h("span", { style: applyStyles.groupEnter, "aria-hidden": "true" }, "›")
+									)
+								)
+							),
+							showingDeleted
+								? h(DeletedList, { entries: visible, t, onRevive: (entry) => void revive(entry) })
+								: showingFlagged
+								? h(FlaggedList, { entries: visible, t, onClear: (entry) => void clearFlag(entry) })
+								: visible.length === 0
+								? h("p", { style: { ...applyStyles.blank, gridColumn: "1 / -1" } }, current.length === 0 ? t("empty") : subGroups.length > 0 ? t("groupEmpty") : t("searchEmpty"))
+								: visible.map((entry) =>
 								picking
 									? h(
 										"article",
@@ -11179,6 +11934,10 @@ window.__ModuleLoader__.load({
 									h(
 										"div",
 										{ style: applyStyles.rowHead },
+										// The pin comes FIRST, on the title line: it is a state of the entry rather than an
+										// action on it, and the list no longer re-sorts when it changes, so this is where
+										// the state has to be readable.
+										h(IconButton, { title: entry.pinned ? t("unpin") : t("pin"), pressed: entry.pinned, onClick: () => store.togglePinned(entry.id) }, Icons.pin(13)),
 										h("button", {
 											type: "button",
 											style: applyStyles.termButton,
@@ -11195,8 +11954,16 @@ window.__ModuleLoader__.load({
 											: null,
 										entry.untrusted === true ? h("span", { style: applyStyles.badgeWarn, "data-term-badge": "untrusted" }, t("flaggedUntrusted")) : null,
 										h("span", { style: applyStyles.spacer }),
-										entry.domain !== "" ? h("span", { style: applyStyles.domain }, entry.domain) : null,
-										h(IconButton, { title: entry.pinned ? t("unpin") : t("pin"), pressed: entry.pinned, onClick: () => store.togglePinned(entry.id) }, Icons.pin(13)),
+										entry.domain !== "" ? h("span", { style: applyStyles.domain }, entry.domain) : null
+									),
+									// Every action on its own line, and always in the same place.
+									//
+									// The title line used to carry them, so their position depended on how long the term
+									// was, which badges it had and whether it had a domain — the controls wandered from
+									// row to row. A toolbar that is always the second line does not.
+									h(
+										"div",
+										{ style: applyStyles.rowActions, "data-term-actions": entry.key },
 										h(IconButton, { title: t("copyEntry"), onClick: () => void copyEntry(entry) }, Icons.copy(13)),
 										h(IconButton, { title: t("feedbackTitle"), pressed: entry.feedback !== null && entry.feedback !== undefined, onClick: () => startEdit(entry) }, Icons.flag(13)),
 										h(IconButton, { title: t("edit"), onClick: () => startEdit(entry) }, Icons.edit(13)),
@@ -11215,6 +11982,7 @@ window.__ModuleLoader__.load({
 									)
 								)
 							)
+						]
 					),
 					storageNote(view.hostInfo, t),
 					h(