Tabs

A tab type is a web page that opens as a tab, next to terminal tabs. It can be split, moved, and pinned like any tab, and is restored on launch.

"tabTypes": [
  { "id": "viewer", "title": "Viewer", "entry": "viewer/index.html", "defaultData": { "mode": "list" } }
]

Field	Notes
`id`	Unique within the extension.
`title`	The tab’s default title.
`entry`	HTML page in the kibble folder.
`defaultData`	Data used when the tab is opened without any.

Open a tab type from a command with the openTab action, or from code.

Opening tabs

tabs.open needs tabs:write and returns the new tab’s ID.

// a page from this or another extension
await nana.tabs.open({
  kind: "extensionWebView",
  extension: { id: "hello", tabType: "viewer", data: { mode: "grid" }, singleton: true },
});

// a terminal in the current project, optionally in a subfolder or running a command
await nana.tabs.open({ kind: "terminal", directory: "src", command: "npm test" });

// a browser tab; drive it with nana.browser
await nana.tabs.open({ kind: "browser", url: "localhost:3000" });

singleton: true focuses an existing tab of that type instead of opening another.
Running a command, or opening another kibble’s tab, asks the user first.
A terminal’s directory must be a folder inside the current project, and works for local projects only.

Page data

Each tab has its own data, saved with the tab.

render(nana.data);
nana.onDataChange(render);
nana.tabs.setTitle("Report");
nana.tabs.setIcon({ symbol: "doc.text" });   // or { svg: "..." }, or null

Theme

Pages get the app’s colors as CSS variables, updated live:

body {
  background: var(--nana-background);
  color: var(--nana-foreground);
  border-color: var(--nana-border);
}

Variables: --nana-background, --nana-foreground, --nana-foreground-muted, --nana-surface, --nana-surface-solid, --nana-border, --nana-hover, --nana-accent, --nana-accent-foreground, --nana-accent-soft, --nana-diff-add, --nana-diff-remove, --nana-diff-hunk, and --nana-topbar-height. The same values are in nana.theme, with colorScheme set to light or dark. nana.onThemeChange(fn) reports changes.

File openers

A file opener lets a kibble open files that users Cmd-click in a terminal, in one of its tab types.

"fileOpeners": [
  { "id": "markdown", "title": "Markdown preview", "tabType": "viewer", "patterns": ["*.md"] }
]

Field	Notes
`tabType`	One of the kibble’s tab types.
`patterns`	Globs matched against the project-relative path, case-insensitive. Default `["*"]`.
`singleton`	Reuse one tab. Default `true`.

Users pick it in Settings → General → Open files with; kibbles never open files unasked. The tab receives data like { "filePath": "docs/README.md", "line": 12, "column": 3, "source": "terminal" }, with filePath relative to the project.