https://hollowapp.pages.dev/_build/assets/api-D4Q_-C-d.js

1const n=`# Hollow API
2
3This page documents the main interfaces, types, and utilities provided by the Hollow API for creating and interacting with plugins, cards, events, and more.
4
5## Plugin Lifecycle
6
7### IPlugin
8Represents a plugin with lifecycle methods to interact with cards and the app.
9
10| Method | Description | Parameters | Returns |
11|:---|:---|:---|:---|
12| \`onCreate(name)\` | Called when a card is created. | \`name: string\` – Card name | \`Promise<boolean>\` |
13| \`onDelete(name)\` | Called when a card is deleted. | \`name: string\` – Card name | \`Promise<boolean>\` |
14| \`onLoad(card, app)\` | Called when a card is loaded. | \`card\`: <a href="#icard">ICard</a>, \`app\`: <a href="#hollowevent">HollowEvent</a> | \`Promise<boolean>\` |
15| \`onUnload(name)\` | Called when a card is unloaded. | \`name: string\` – Card name | \`void\` |
16
17**Example**
18\`\`\`ts
19export const MyPlugin: IPlugin = {
20  constructor(db:DataBase){}
21  
22  async onCreate(name) {
23    console.log(\`Card created: \\\${name}\`);
24    return true;
25  }
26
27  async onDelete(name) {
28    console.log(\`Card deleted: \\\${name}\`);
29    return true;
30  }
31
32  async onLoad(card, app) {
33    console.log(\`Loaded card: \\\${card.name}\`);
34    return true;
35  }
36
37  onUnload(name) {
38    console.log(\`Unloaded card: \\\${name}\`);
39  }
40};
41\`\`\`
42<a id="icard"></a>
43### ICard
44Represents a card data.
45
46| Property | Description | Type |
47|:---|:---|:---|
48| \`name\` | Card name | \`string\` |
49| \`containerID\` | ID of the container holding the card | \`string\` |
50| \`toolEvent\` | Event system for cards of the same tool | <a href="#hollowevent">HollowEvent</a> |
51
52---
53
54## Event System
55<a id="hollowevent"></a>
56### HollowEvent
57Lets plugins listen to, emit, and manage events.
58
59| Method | Description |
60|:---|:---|
61| \`on(eventName, listener)\` | Register a listener |
62| \`off(eventName, listener)\` | Remove a listener |
63| \`emit(eventName, data?)\` | Trigger an event |
64| \`getCurrentData(eventName)\` | Get current event data |
65| \`reverse(eventName)\` | Toggle a boolean event’s value |
66
67**Example**
68\`\`\`ts
69app.on("statusChanged", (status) => {
70  console.log("Status:", status);
71});
72
73app.emit("statusChanged", "active");
74\`\`\`
75
76---
77
78## Database
79
80### DataBase
81Simple storage per plugin (IndexedDB).
82
83| Method | Description |
84|:---|:---|
85| \`putData(key, value)\` | Save data |
86| \`getData(key)\` | Get data |
87| \`deleteData(key)\` | Remove data |
88
89**Example**
90\`\`\`ts
91await db.putData("card-2", {key:"value"});
92const card_data = await db.getData("card-2");
93\`\`\`
94
95---
96
97## Context Menu
98
99### ContextMenuItem
100Extend Hollow’s context menu.
101
102| Property | Description |
103|:---|:---|
104| \`id\` | Unique group ID |
105| \`header\` | Group title |
106| \`items\` | Array of <a href="#contextmenuitembutton">ContextMenuItemButton</a> |
107
108<a id="contextmenuitembutton"></a>
109#### ContextMenuItemButton
110| Property | Description |
111|:---|:---|
112| \`icon\` | Icon name from lucide.dev (PascalCase) |
113| \`label\` | Button text |
114| \`onpointerdown\` | Action when clicked |
115| \`children\` | Submenu items |
116
117**Example**
118\`\`\`ts
119const menu: ContextMenuItem = {
120  id: "MyPluginActions",
121  header: "My Plugin",
122  items: [
123    { icon: "Pen", label: "Edit", onpointerdown: () => console.log("Edit clicked") }
124  ]
125};
126\`\`\`
127
128---
129
130## Notifications
131<a id="notifytype"></a>
132### NotifyType
133| Property | Description |
134|:---|:---|
135| \`id\` | Unique ID |
136| \`title\` | Notification title |
137| \`message\` | Main content |
138| \`attachment\` | Optional attachment URL |
139| \`submitted_at\` | ISO timestamp |
140| \`expires_at\` | Expiration ISO timestamp |
141| \`type\` | "achievement" | "reminder" | "error" | "info" | "warning" | "update" |
142
143**Example**
144\`\`\`ts
145const notify: NotifyType = {
146  id: "welcome1",
147  title: "Welcome",
148  message: "Thanks for installing My Plugin!",
149  submitted_at: new Date().toISOString(),
150  expires_at: "",
151  type: "info"
152};
153\`\`\`
154
155---
156
157## Tags
158<a id="tagtype"></a>
159### TagType
160| Property | Description |
161|:---|:---|
162| \`name\` | Tag name |
163| \`foreground\` | Text color |

164| \`background\` | Background color |
165
166**Example**
167\`\`\`ts
168const urgent: TagType = {
169  name: "Urgent",
170  foreground: "#fff",
171  background: "#f00"
172};
173\`\`\`
174
175---
176
177## Entry Data
178<a id="entrydata"></a>
179### EntryData
180| Property | Description |
181|:---|:---|
182| \`id\` | Unique ID |
183| \`source\` | Tool + card info |
184| \`title\` | Optional title |
185| \`content\` | Main content |
186| \`tags\` | Array of tags |
187| \`meta\` | Extra metadata |
188
189**Example**
190\`\`\`ts
191const entry: EntryData = {
192  id: "myplugin-data-1",
193  source: { tool: "notes", card: "note1" },
194  title: "My Note",
195  content: "Hello World",
196  tags: ["personal"],
197  meta: { pinned: true }
198};
199\`\`\`
200
201---
202
203## Tool Settings
204<a id="tooloptions"></a>
205### ToolOptions
206| Property | Description |
207|:---|:---|
208| \`tool\` | Tool name |
209| \`card\` | Linked card |
210| \`save\` | Save changes |
211| \`options\` | List of <a href="#tooloption">ToolOption</a> |
212
213<a id="tooloption"></a>
214#### ToolOption
215Predefined input types from \`TypedOptionMap\` or a custom renderer.
216
217**Example**
218\`\`\`ts
219const settings: ToolOptions = {
220  tool: "calendar",
221  card: "mainCard",
222  save: () => console.log("Settings saved in db"),
223  options: [
224    { type: "text", label: "Title", value: "My Calendar", onChange: v => console.log(v) }
225  ]
226};
227\`\`\`
228
229---
230
231## Forms
232<a id="formtype"></a>
233### FormType
234| Property | Description |
235|:---|:---|
236| \`id\` | Form ID |
237| \`title\` | Form title |
238| \`submit\` | Callback with form values |
239| \`options\` | Array of <a href="#formoption">FormOption</a> |
240| \`update\` | Optional: if true, the form is used to update existing data rather than create new data |
241
242<a id="formoption"></a>
243#### FormOption
244| Property | Description |
245|:---|:---|
246| \`key\` | Field key |
247| \`dependsOn\` | Conditional visibility |
248| \`value\` | Pre-filled value |
249
250**Example**
251\`\`\`ts
252const form: FormType = {
253  id: "addTask",
254  title: "Add Task",
255  submit: values => console.log("New Task :", values),
256  options: [
257    { key: "taskName", type: "text", label: "Task Name" }
258  ]
259};
260\`\`\`
261---
262# Hollow Events
263
264Hollow provides several **built-in events** accessible through the \`app\` parameter inside \`onLoad\`. These can be listened to or emitted to create interactive experiences in plugins.
265
266### tags
267**Description:**
268Returns a list of type <a href="#tagtype">TagType</a>. Use this to get all tags currently defined by the user in the app.
269
270**Example:**
271\`\`\`ts
272const tags = app.getCurrentData("tags");
273
274app.on("tags", (tags: TagType []) => {
275    console.log("Updated Tags:", tags);
276});
277\`\`\`
278
279### EmojiPicker
280**Description:**
281This event can **only** be emitted. Opens the emoji picker and returns the selected emoji via the provided \`setEmoji\` callback.
282
283**Payload:**
284\`\`\`ts
285{
286    emoji: string,
287    setEmoji: (newEmoji: string) => void
288}
289\`\`\`
290
291**Example:**
292\`\`\`ts
293app.emit("EmojiPicker", {
294    emoji: "😀",
295    setEmoji: (emoji) => {
296        console.log("Chosen emoji:", emoji);
297    }
298});
299\`\`\`
300
301### ColorPicker
302**Description:**
303Similar to \`EmojiPicker\` but for color selection.
304
305**Payload:**
306\`\`\`ts
307{
308    color: string,
309    setColor: (newColor: string) => void
310}
311\`\`\`
312
313**Example:**
314\`\`\`ts
315app.emit("ColorPicker", {
316    color: "#ff0000",
317    setColor: (color) => {
318        console.log("Chosen color:", color);
319    }
320});
321\`\`\`
322
323### Form
324**Description:**
325Opens a form UI. Accepts a payload of type <a href="#formtype">FormType</a>.
326
327**Example:**
328\`\`\`ts
329app.emit("Form", {
330    title: "Feedback",
331    fields: [
332        { label: "Message", type: "textarea" }
333    ]
334});
335\`\`\`
336
337### Notify
338
339**Description:**
340Sends a notification to the user. Accepts a payload of type <a href="#notifytype">NotifyType</a>.
341
342**Example:**
343\`\`\`ts
344app.emit("Notify", {
345    id: "notf-myplugin-1",
346    title: "Feedback",
347    ...
348});
349\`\`\`
350
351### tool-settings
352**Description:**
353Used to set a tool's options from within a plugin. Before emitting this event, the plugin **must** define a method assigned to:
354
355\`\`\`ts
356<pluginNameLowercase>-<CardName>-settings
357
358// if your tool's name MyPlugin then the event will be :
359// card object is of type ICard provided to you in OnLoad event on IPlugin
360const eventName = \`myplugin-\${card.name}-settings\`
361\`\`\`
362
363This method will trigger when the user wants to open the plugin's settings for that card.
364
365**Flow:**
3661. Define the settings method for the card.
3672. When invoked, prepare the <a href="#tooloptions">ToolOptions</a>.
3683. Emit \`tool-settings\` with the <a href="#tooloptions">ToolOptions</a> object.
369
370**Example:**
371\`\`\`ts
372app.on("myplugin-cardname-settings", ()=> {
373    const toolOptions: ToolOptions = {
374        title: "My Card",
375        ...
376    };
377    app.emit("tool-settings", toolOptions);
378});
379\`\`\`
380---
381## Isolated Plugin Events
382
383If your plugin needs to have **its own isolated event system** for communication between its cards, without interfer

383ing with the app's global events or other plugins, you should use the **\`HollowEvent\`** provided in <a href="#icard">ICard</a> under the name \`toolEvent\`.
384
385**Example:**
386\`\`\`ts
387card.toolEvent.on("myCustomEvent", (e) => {
388    console.log(e.detail);
389});
390\`\`\`
391
392Hollow API lets you build rich, interactive plugins with persistent storage, event handling, custom UI, and seamless integration into Hollow’s ecosystem.
393
394`;export{n as default};