table.interface: Authorized document search
Search table documents from a workspace panel and render their names, kinds and snippets as text.
What you will build
Search table documents from a workspace panel and render their names, kinds and snippets as text.
Surface: table.interface · Mode: augment · Gravewright 0.3.0 / SDK 1.x.
When it mounts and who can use it
Open the table workspace, type a query and submit Search. The module-scoped api.table.search rechecks membership and access. The example only displays results; it does not invent document-opening APIs.
The owner installs the local ZIP under Modules → Install module → Install from ZIP. The GM then activates the exact version in the table extension list. This example requests no extra permissions or global handle; all reads use the mount’s supplied api. GMs and players receive only server-authorized data. Streamers do not receive this authenticated mount.
Download the complete package
Download source ZIP · manifest.json · main.mjs · styles.css · LICENSE.txt
Save all four files in the same folder. ZIP the folder contents, with manifest.json directly at the archive root. Do not include a wrapper folder, local state or private keys. Local upload is the owner’s trust decision; for catalog distribution, use the signing workflow in the module reference.
table-interface/
manifest.json
main.mjs
styles.css
LICENSE.txtmanifest.json
{
"id": "example.surface-table-interface",
"name": "Authorized document search",
"version": "1.0.0",
"sdk": {
"requires": ">=1.0.0 <2.0.0",
"tested": "1.0.0"
},
"description": "Search table documents from a workspace panel and render their names, kinds and snippets as text.",
"author": "Gravewright documentation",
"license": "MIT",
"entry": "main.mjs"
}main.mjs
// Original documentation example. License: MIT. Target: Gravewright 0.3.0, SDK 1.x.
export default {
start({ api, styles }) {
styles.use("styles.css");
api.i18n.register({
"en": {
"Search": "Search",
"Search documents": "Search documents",
"No results": "No results",
"Refresh": "Refresh",
"Loading…": "Loading…",
"Error: {code}": "Error: {code}",
"Authorized document search": "Authorized document search"
},
"pt-BR": {
"Search": "Buscar",
"Search documents": "Buscar documentos",
"No results": "Nenhum resultado",
"Refresh": "Atualizar",
"Loading…": "Carregando…",
"Error: {code}": "Erro: {code}",
"Authorized document search": "Busca de documentos autorizados"
}
});
},
register({ register }) {
register("table.interface", { mode: "augment", mount: this.mount });
},
async mount({ root, context, api, storage, viewport, events, signal, onDispose }) {
const el = (tag, text) => {
const node = root.ownerDocument.createElement(tag);
if (text !== undefined) node.textContent = text;
return node;
};
const t = (key, params) => api.i18n.t(key, params);
const panel = el("section"); panel.className = "gw-example";
const heading = el("h3", t("Authorized document search"));
const output = el("pre"); output.setAttribute("role", "status");
panel.append(heading, output); root.append(panel);
onDispose(() => panel.remove());
const report = error => {
if (!signal.aborted) output.textContent = t("Error: {code}", { code: error.code ?? "unavailable" });
};
const form = el("form");
const label = el("label", t("Search documents"));
const input = el("input"); input.type = "search"; input.maxLength = 200;
const submit = el("button", t("Search")); submit.type = "submit";
label.append(input); form.append(label, submit); panel.append(form);
let ticket = 0;
form.addEventListener("submit", async event => {
event.preventDefault();
const current = ++ticket;
try {
const value = await api.table.search(input.value.trim(), { signal });
if (signal.aborted || current !== ticket) return;
output.textContent = value.map(result => result.title + " (" + result.kind + ") · " + (result.snippet ?? "")).join("\n") || t("No results");
} catch (error) { if (current === ticket) report(error); }
}, { signal });
},
stop() {
// Mount and module lifetimes already dispose styles, catalogs and subscriptions.
}
};styles.css
[data-module-id="example.surface-table-interface"] .gw-example { box-sizing: border-box; max-width: 640px; padding: var(--space-3); margin: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); background: var(--surface); font: 14px/1.5 system-ui, sans-serif; }
[data-module-id="example.surface-table-interface"] .gw-example h3 { font-size: 16px; margin: var(--space-0) var(--space-0) var(--space-2); }
[data-module-id="example.surface-table-interface"] .gw-example pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
[data-module-id="example.surface-table-interface"] .gw-example button, [data-module-id="example.surface-table-interface"] .gw-example select, [data-module-id="example.surface-table-interface"] .gw-example input { color: inherit; background: var(--surface); font: inherit; padding: var(--space-1) var(--space-2); margin: var(--space-1); border: 1px solid var(--border); border-radius: var(--radius-sm); }
[data-module-id="example.surface-table-interface"] .gw-example button:focus-visible, [data-module-id="example.surface-table-interface"] .gw-example input:focus-visible, [data-module-id="example.surface-table-interface"] .gw-example select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[data-module-id="example.surface-table-interface"] .gw-example--compact { padding: var(--space-1); }
[data-module-id="example.surface-table-interface"] .gw-example-center { position: absolute; transform: translate(-50%, -50%); pointer-events: none; color: var(--text); background: var(--surface); padding: var(--space-1); border-radius: var(--radius-sm); font: 14px/1.5 system-ui, sans-serif; }
[data-module-id="example.surface-table-interface"] > .gw-example { position: fixed; top: 64px; left: var(--space-4); width: 360px; max-width: min(360px, calc(100vw - 32px)); max-height: 40vh; overflow: auto; margin: var(--space-0); z-index: 20; }Expected result and cleanup
Search table documents from a workspace panel and render their names, kinds and snippets as text.
The native interface remains usable. Closing a sheet, switching scenes, leaving the table or deactivating the module aborts the mount. Listeners use signal; events and owned elements are released through onDispose. Async reads check cancellation and discard old responses before rendering. Errors are displayed through error.code, including network failures.
The search panel floats below the top bar, constrained to the viewport width and 40% of its height, with its own scrolling. Its z-index: 20 is above table controls and below windows and modals. Every selector in this package uses data-module-id, preserving host and other module styles.
Validate on a disposable table
Search the same term as GM and as player; hidden documents must not appear. Submit quickly twice and check that the latest search wins.
Open/close three times, then deactivate while a read or modal is pending. Check that no old panel or error appears after disposal.
Test empty state, long document names, keyboard navigation and a narrow viewport. Compare GM and player accounts.
Check the browser console. These source examples have runtime contract tests; installation and visual behavior still require validation on the target host.
How to use AI for this surface
Adapt the table.interface example for [concrete goal] on Gravewright 0.3.0.
Read registry.json, this surface’s context schema, frontend.json and the native services used.
Keep start/register/stop, mount-scoped api, signal, onDispose and native modals.
Provide the complete manifest and files. Do not use app.shell/inside.content in packages.
Do not invent payload fields, core RPG rules, permissions or APIs.
Test player/GM, empty data, abort, repeated mounting and this example’s behavior.
Explain limitations and which checks actually ran.Continue
SDK · API · Examples by kind