+ {item.section}
+
+ )}
+ handleItemClick(item)}
+ onKeyDown={(event) => activateOnKeyboard(event, () => handleItemClick(item))}
+ >
+ {item.label}
+ {item.badge && (
+
+ {item.badge}
+
+ )}
+
+ handleItemClick(item)}
+ onKeyDown={(event) => activateOnKeyboard(event, () => handleItemClick(item))}
+ >
+ {isActive && (
+
+ )}
+
+
+ {resolveIcon(item.icon)}
+
+
+
+ );
+ };
+
+ // ── Starter JSON template ──────────────────────────────────────────────
+ const STARTER_JSON = JSON.stringify([
+ {
+ id: "home",
+ label: "Home",
+ icon: "table",
+ page: "Dashboard"
+ },
+ {
+ id: "users",
+ label: "Users",
+ icon: "lock",
+ subItems: [
+ { id: "users-active", label: "Active", page: "ActiveUsers" },
+ { id: "users-pending", label: "Pending", page: "PendingUsers" }
+ ]
+ },
+ {
+ id: "reports",
+ label: "Reports",
+ icon: "chart",
+ badge: "New",
+ description: "View analytics and reports"
+ }
+ ], null, 2);
+
+ const copyStarter = () => {
+ // navigator.clipboard often blocked in iframes — use a fallback textarea
+ try {
+ const ta = document.createElement("textarea");
+ ta.value = STARTER_JSON;
+ ta.style.position = "fixed";
+ ta.style.top = "-1000px";
+ ta.style.left = "-1000px";
+ document.body.appendChild(ta);
+ ta.focus();
+ ta.select();
+ try { document.execCommand("copy"); } catch (_) {}
+ document.body.removeChild(ta);
+ // Also try modern API as a bonus
+ if (navigator.clipboard?.writeText) {
+ navigator.clipboard.writeText(STARTER_JSON).catch(() => {});
+ }
+ setCopied(true);
+ setTimeout(() => setCopied(false), 1500);
+ } catch (_) {}
+ };
+
+ const copyMenuJson = () => {
+ const menuJson = JSON.stringify(toSerializableNavItems(navItems), null, 2);
+ try {
+ const ta = document.createElement("textarea");
+ ta.value = menuJson;
+ ta.style.position = "fixed";
+ ta.style.top = "-1000px";
+ ta.style.left = "-1000px";
+ document.body.appendChild(ta);
+ ta.focus();
+ ta.select();
+ try { document.execCommand("copy"); } catch (_) {}
+ document.body.removeChild(ta);
+ if (navigator.clipboard?.writeText) {
+ navigator.clipboard.writeText(menuJson).catch(() => {});
+ }
+ setCopied(true);
+ setTimeout(() => setCopied(false), 1500);
+ } catch (_) {}
+ };
+
+ const handleEditorWheel = (event: React.WheelEvent
+
+ {selectedItem.label}
+ {!hasSubItems && selectedItem.description && (
+ {selectedItem.description}
+ )}
+
+ {hasSubItems ? selectedItem.subItems!.map(sub => {
+ const isActiveSub = activeSubItem === sub.id;
+ return (
+
+ handleSubItemClick(sub)}
+ onKeyDown={(event) => activateOnKeyboard(event, () => handleSubItemClick(sub))}
+ role="button"
+ tabIndex={0}
+ aria-current={isActiveSub ? "page" : undefined}
+ >
+ {isActiveSub && }
+ {sub.label}
+
+ );
+ }) : (
+
+
+ )}
+ handleItemClick(selectedItem)}
+ onKeyDown={(event) => activateOnKeyboard(event, () => handleItemClick(selectedItem))}
+ role="button"
+ tabIndex={0}
+ >
+ {BUILTIN.arrow} Open {selectedItem.label}
+
+
+
+ );
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ Menu Items
+
+
+ Visual editor writes to menuItems and itemsJson
+
+
+ {navItems.map((item, index) => {
+ const cardKey = `menu-item-${index}`;
+ const isExpanded = expandedMenuItemKeys.includes(cardKey);
+
+ return (
+
+
+
+ );
+ })}
+
+
+
+ {isExpanded && (
+ <>
+
+ {resolveIcon(item.icon)}
+
+
+
+
+
+
+
+ {textInput("Label", item.label, (value) => updateItem(index, { label: value }), "Home")}
+ {textInput("ID", item.id, (value) => updateItem(index, { id: value }), "home")}
+
+ {routeInput("Page", item.page, (value) => updateItem(index, { page: value || undefined }), pageSelectOptions, "Dashboard")}
+ {routeInput("App", item.app, (value) => updateItem(index, { app: value || undefined }), appSelectOptions, "Admin")}
+ {textInput("Badge", item.badge, (value) => updateItem(index, { badge: value || undefined }), "New")}
+ {textInput("Section", item.section, (value) => updateItem(index, { section: value || undefined }), "Admin")}
+ {textInput("Description", item.description, (value) => updateItem(index, { description: value || undefined }), "Shown in panel")}
+
+
+
+
+
+ )}
+
+
+ {(item.subItems ?? []).length === 0 ? (
+ Sub-items
+
+ No sub-items
+ ) : (
+
+ {(item.subItems ?? []).map((sub, subIndex) => (
+
+ )}
+
+ {textInput("Label", sub.label, (value) => updateSubItem(index, subIndex, { label: value }), "Active")}
+ {textInput("ID", sub.id, (value) => updateSubItem(index, subIndex, { id: value }), `${item.id}-active`)}
+ {routeInput("Page", sub.page, (value) => updateSubItem(index, subIndex, { page: value || undefined }), pageSelectOptions, "ActiveUsers")}
+ {routeInput("App", sub.app, (value) => updateSubItem(index, subIndex, { app: value || undefined }), appSelectOptions, "Admin")}
+
+
+ ))}
+
+ {showMenuEditor ? renderMenuEditor() : (
+ <>
+
+ {/* Parse error banner */}
+ {(itemsParseError || bottomParseError) && (
+
+
+ );
+};
diff --git a/components/icon-rail-nav/src/components/IconRailNav/README.md b/components/icon-rail-nav/src/components/IconRailNav/README.md
new file mode 100644
index 0000000..9fca68d
--- /dev/null
+++ b/components/icon-rail-nav/src/components/IconRailNav/README.md
@@ -0,0 +1,89 @@
+# Icon Rail Nav
+
+A compact Retool navigation component with an always-visible icon rail, a contextual detail panel, and hover-revealed labels.
+
+## Setup
+
+1. Add `IconRailNav` to your Retool app.
+2. Set `Menu Items JSON` to a JSON array of nav items.
+3. Add a `navigate` event handler.
+4. Configure the handler to go to `{{ iconRailNav1.model.activePage }}`.
+
+## Starter JSON
+
+```json
+[
+ {
+ "id": "home",
+ "label": "Home",
+ "icon": "table",
+ "page": "Dashboard"
+ },
+ {
+ "id": "users",
+ "label": "Users",
+ "icon": "lock",
+ "subItems": [
+ { "id": "users-active", "label": "Active", "page": "ActiveUsers" },
+ { "id": "users-pending", "label": "Pending", "page": "PendingUsers" }
+ ]
+ },
+ {
+ "id": "reports",
+ "label": "Reports",
+ "icon": "chart",
+ "badge": "New",
+ "description": "View analytics and reports"
+ }
+]
+```
+
+## Model Properties
+
+| Property | Type | Description |
+|---|---|---|
+| `menuEditorVisibility` | `"show"`/`"hide"` | Shows or hides the visual editor for top-level menu items and sub-items |
+| `helpVisibility` | `"show"`/`"hide"` | Shows or hides the setup help drawer |
+| `itemsJson` | string | Menu Items JSON: JSON array of top-level nav items |
+| `bottomItemsJson` | string | JSON array of items pinned to the bottom |
+| `activeItem` | string | Last selected top-level item id |
+| `activeSubItem` | string | Last selected sub-item id |
+| `activePage` | string | Page target from the selected item/sub-item |
+| `activeApp` | string | App target from the selected item/sub-item |
+| `projectName` | string | Dynamic/bindable header label in the contextual panel |
+| `projectStatus` | string | `online`, `offline`, or `paused` |
+| `theme` | string | `dark` or `light` |
+| `accentColor` | string | Active item and badge color |
+| `padding` | number | Outer padding in pixels. Negative values can compensate for Retool wrapper inset. |
+| `menuItems` | array | Hidden visual editor output or directly bound menu item array |
+| `pageOptions` | array | Optional page dropdown choices for the visual editor |
+| `appOptions` | array | Optional app dropdown choices for the visual editor |
+| `menuJsonDraft` | string | Hidden JSON output for optional save handlers |
+
+## Item Schema
+
+```ts
+type NavItem = {
+ id: string;
+ label: string;
+ icon: string;
+ page?: string;
+ app?: string;
+ badge?: string;
+ color?: string;
+ section?: string;
+ description?: string;
+ subItems?: SubItem[];
+};
+
+type SubItem = {
+ id: string;
+ label: string;
+ page?: string;
+ app?: string;
+};
+```
+
+Built-in icon keys: `table`, `code`, `database`, `lock`, `storage`, `function`, `realtime`, `clock`, `info`, `logs`, `chart`, `settings`.
+
+Custom icons can be image URLs or data URLs.
diff --git a/components/icon-rail-nav/src/components/IconRailNav/index.tsx b/components/icon-rail-nav/src/components/IconRailNav/index.tsx
new file mode 100644
index 0000000..a8db06f
--- /dev/null
+++ b/components/icon-rail-nav/src/components/IconRailNav/index.tsx
@@ -0,0 +1,2 @@
+export { IconRailNav } from "./IconRailNav";
+export type { NavItem, SubItem } from "./utils";
diff --git a/components/icon-rail-nav/src/components/IconRailNav/utils.test.ts b/components/icon-rail-nav/src/components/IconRailNav/utils.test.ts
new file mode 100644
index 0000000..bbbb4e9
--- /dev/null
+++ b/components/icon-rail-nav/src/components/IconRailNav/utils.test.ts
@@ -0,0 +1,69 @@
+import { describe, expect, it } from "vitest";
+import { parseNavItems, validateNavItems, type NavItem } from "./utils";
+
+const defaults: NavItem[] = [
+ { id: "default", label: "Default", icon: "info" },
+];
+
+describe("parseNavItems", () => {
+ it("uses defaults for blank input", () => {
+ expect(parseNavItems("", defaults)).toEqual({
+ items: defaults,
+ error: null,
+ usingDefaults: true,
+ });
+ });
+
+ it("parses valid JSON strings", () => {
+ const result = parseNavItems(
+ '[{"id":"home","label":"Home","icon":"table","page":"Dashboard"}]',
+ defaults,
+ );
+
+ expect(result.error).toBeNull();
+ expect(result.usingDefaults).toBe(false);
+ expect(result.items).toEqual([
+ { id: "home", label: "Home", icon: "table", page: "Dashboard" },
+ ]);
+ });
+
+ it("accepts arrays that Retool passes through directly", () => {
+ const raw = [{ id: "reports", label: "Reports", icon: "chart" }];
+
+ expect(parseNavItems(raw, defaults)).toEqual({
+ items: raw,
+ error: null,
+ usingDefaults: false,
+ });
+ });
+
+ it("returns defaults and an error for malformed JSON", () => {
+ const result = parseNavItems("[", defaults);
+
+ expect(result.items).toBe(defaults);
+ expect(result.error).toBeTruthy();
+ expect(result.usingDefaults).toBe(true);
+ });
+
+ it("returns defaults and an error for invalid item shape", () => {
+ const result = parseNavItems('[{"id":"home"}]', defaults);
+
+ expect(result.items).toBe(defaults);
+ expect(result.error).toBe('Item 0 is missing a string "label"');
+ });
+});
+
+describe("validateNavItems", () => {
+ it("validates nested sub-items", () => {
+ const error = validateNavItems([
+ {
+ id: "users",
+ label: "Users",
+ icon: "lock",
+ subItems: [{ id: "users-active" }],
+ },
+ ]);
+
+ expect(error).toBe('Item 0 subItem 0 is missing a string "label"');
+ });
+});
diff --git a/components/icon-rail-nav/src/components/IconRailNav/utils.ts b/components/icon-rail-nav/src/components/IconRailNav/utils.ts
new file mode 100644
index 0000000..b7ecf4f
--- /dev/null
+++ b/components/icon-rail-nav/src/components/IconRailNav/utils.ts
@@ -0,0 +1,122 @@
+export type SubItem = {
+ id: string;
+ label: string;
+ page?: string;
+ app?: string;
+};
+
+export type NavItem = {
+ id: string;
+ label: string;
+ description?: string;
+ icon: string;
+ color?: string;
+ badge?: string;
+ page?: string;
+ app?: string;
+ section?: string;
+ subItems?: SubItem[];
+};
+
+type ParseResult = {
+ items: NavItem[];
+ error: string | null;
+ usingDefaults: boolean;
+};
+
+function isBlankInput(raw: unknown): boolean {
+ return raw == null || (typeof raw === "string" && raw.trim() === "");
+}
+
+function resolveJsonInput(raw: unknown): unknown {
+ if (raw == null) return null;
+ if (Array.isArray(raw)) return raw;
+ if (typeof raw === "object") return raw;
+ if (typeof raw !== "string") return null;
+
+ const trimmed = raw.trim();
+ if (!trimmed) return null;
+
+ return JSON.parse(trimmed);
+}
+
+function validateSubItems(subItems: unknown, itemIndex: number): string | null {
+ if (subItems == null) return null;
+ if (!Array.isArray(subItems)) return `Item ${itemIndex} has non-array "subItems"`;
+
+ for (let i = 0; i < subItems.length; i++) {
+ const sub = subItems[i];
+ if (!sub || typeof sub !== "object") return `Item ${itemIndex} subItem ${i} is not an object`;
+ if (!("id" in sub) || typeof sub.id !== "string") return `Item ${itemIndex} subItem ${i} is missing a string "id"`;
+ if (!("label" in sub) || typeof sub.label !== "string") return `Item ${itemIndex} subItem ${i} is missing a string "label"`;
+ }
+
+ return null;
+}
+
+export function validateNavItems(items: unknown): string | null {
+ if (!Array.isArray(items)) return "Expected an array of items";
+
+ for (let i = 0; i < items.length; i++) {
+ const item = items[i];
+ if (!item || typeof item !== "object") return `Item ${i} is not an object`;
+ if (!("id" in item) || typeof item.id !== "string") return `Item ${i} is missing a string "id"`;
+ if (!("label" in item) || typeof item.label !== "string") return `Item ${i} is missing a string "label"`;
+ if ("icon" in item && item.icon != null && typeof item.icon !== "string") return `Item ${i} has non-string "icon"`;
+
+ const subItemError = validateSubItems("subItems" in item ? item.subItems : undefined, i);
+ if (subItemError) return subItemError;
+ }
+
+ return null;
+}
+
+export function parseNavItems(raw: unknown, defaults: NavItem[]): ParseResult {
+ const usingDefaults = isBlankInput(raw);
+
+ try {
+ const parsed = resolveJsonInput(raw);
+ if (parsed === null) return { items: defaults, error: null, usingDefaults: true };
+
+ const validationError = validateNavItems(parsed);
+ if (validationError) throw new Error(validationError);
+
+ return { items: parsed as NavItem[], error: null, usingDefaults };
+ } catch (error) {
+ return {
+ items: defaults,
+ error: error instanceof Error ? error.message : "Invalid JSON",
+ usingDefaults: true,
+ };
+ }
+}
+
+export function toSerializableNavItems(items: NavItem[]): NavItem[] {
+ return items.map((item) => {
+ const next: NavItem = {
+ id: item.id,
+ label: item.label,
+ icon: item.icon || "info",
+ };
+
+ if (item.description) next.description = item.description;
+ if (item.color) next.color = item.color;
+ if (item.badge) next.badge = item.badge;
+ if (item.page) next.page = item.page;
+ if (item.app) next.app = item.app;
+ if (item.section) next.section = item.section;
+ if (item.subItems && item.subItems.length > 0) {
+ next.subItems = item.subItems.map((sub) => {
+ const nextSub: SubItem = {
+ id: sub.id,
+ label: sub.label,
+ };
+ if (sub.page) nextSub.page = sub.page;
+ if (sub.app) nextSub.app = sub.app;
+ return nextSub;
+ });
+ }
+
+ return next;
+ });
+}
diff --git a/components/icon-rail-nav/src/index.tsx b/components/icon-rail-nav/src/index.tsx
index 900f302..355f7a1 100644
--- a/components/icon-rail-nav/src/index.tsx
+++ b/components/icon-rail-nav/src/index.tsx
@@ -1,652 +1 @@
-import React, { useState } from "react";
-import { Retool } from "@tryretool/custom-component-support";
-
-// ─── Types ────────────────────────────────────────────────────────────────────
-// Each item accepts:
-// id — unique identifier (required)
-// label — title shown next to the icon when expanded
-// icon — built-in key ("table","code","database",...) | string | image URL
-// page — Retool page name to navigate to on click (optional)
-// app — Retool app name to open on click (optional)
-// color — override icon/text color (optional)
-// badge — small pill shown after the label (optional)
-// section — divider label shown above the item (optional)
-// subItems — array of child items shown in the right contextual panel
-
-type SubItem = { id: string; label: string; page?: string; app?: string; };
-type NavItem = {
- id: string; label: string; description?: string; icon: string;
- color?: string; badge?: string; page?: string; app?: string;
- section?: string; subItems?: SubItem[];
-};
-
-const DEFAULT_ITEMS: NavItem[] = [
- { id: "item-1", label: "Item 1", icon: "table", description: "Description for Item 1." },
- { id: "item-2", label: "Item 2", icon: "code", description: "Description for Item 2." },
- { id: "item-3", label: "Item 3", icon: "database", subItems: [
- { id: "item-3-a", label: "Sub Item A" },
- { id: "item-3-b", label: "Sub Item B" },
- { id: "item-3-c", label: "Sub Item C" },
- ]},
-];
-const DEFAULT_BOTTOM: NavItem[] = [
- { id: "settings", label: "Settings", icon: "settings", description: "Configure your project settings." },
-];
-
-const BUILTIN: Record
+
+ )}
+
+ {/* Main nav row */}
+
+ {itemsParseError ? "Items JSON error:" : "Bottom Items JSON error:"}
+
+
+ {itemsParseError || bottomParseError}
+
+
+
+
+ )}
+ setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
+ >
+ {/* BOTTOM LAYER — label slide panel, sits behind rail */}
+
+
+ {/* ── Contextual Panel ── */}
+
+ {/* Main labels — identical height/margin to rail items */}
+
+
+ {/* TOP LAYER — icon rail, always on top */}
+
+ {navItems.map(i => renderSlideItem(i))}
+
+
+ {bottomItems.map(i => renderSlideItem(i))}
+
+
+
+
+ {navItems.map(i => renderRailItem(i))}
+
+
+ {bottomItems.map(i => renderRailItem(i))}
+
+
+
+
+
+
+ {displayProjectName}
+
+ {renderPanel()}
+
+ {/* Help drawer — controlled from the inspector. */}
+ {showHelp && (
+
+
+ )}
+
+
+
+
+ Items JSON Help
+
+
+ Paste JSON into the Menu Items JSON field in the model panel.
+
+
+ {/* Schema */}
+
+
+ {/* Close button */}
+ Item fields
+
+
+
+ {/* Icons */}
+ id required, unique
+ label required, display text
+ icon built-in key or image URL
+ page Retool page name
+ app Retool app name
+ badge pill text, e.g. "New"
+ color hex color override
+ description shown in panel
+ subItems nested array
+ Built-in icons
+
+ {Object.keys(BUILTIN).filter(k => k !== "arrow").map(key => (
+
+
+ {/* Starter template */}
+
+ {BUILTIN[key]}
+ {key}
+
+ ))}
+
+ Starter template
+
+
+
+ {STARTER_JSON}
+
+
+
+
+ handleItemClick(item)}
- >
- {item.label}
- {item.badge && (
-
- {item.badge}
-
- )}
-
- );
- };
-
- // Rail row (icon only) — top layer
- const renderRailItem = (item: NavItem) => {
- const isActive = activeItem === item.id;
- return (
- handleItemClick(item)}
- >
- {isActive && (
-
- )}
-
- );
- };
-
- const renderPanel = () => {
- if (!selectedItem) return null;
- const hasSubItems = selectedItem.subItems && selectedItem.subItems.length > 0;
- return (
-
- {resolveIcon(item.icon)}
-
-
-
- );
- };
-
- // ── Starter JSON template ──────────────────────────────────────────────
- const STARTER_JSON = JSON.stringify([
- {
- id: "home",
- label: "Home",
- icon: "table",
- page: "Dashboard"
- },
- {
- id: "users",
- label: "Users",
- icon: "lock",
- subItems: [
- { id: "users-active", label: "Active", page: "ActiveUsers" },
- { id: "users-pending", label: "Pending", page: "PendingUsers" }
- ]
- },
- {
- id: "reports",
- label: "Reports",
- icon: "chart",
- badge: "New",
- description: "View analytics and reports"
- }
- ], null, 2);
-
- const copyStarter = () => {
- // navigator.clipboard often blocked in iframes — use a fallback textarea
- try {
- const ta = document.createElement("textarea");
- ta.value = STARTER_JSON;
- ta.style.position = "fixed";
- ta.style.top = "-1000px";
- ta.style.left = "-1000px";
- document.body.appendChild(ta);
- ta.focus();
- ta.select();
- try { document.execCommand("copy"); } catch (_) {}
- document.body.removeChild(ta);
- // Also try modern API as a bonus
- if (navigator.clipboard?.writeText) {
- navigator.clipboard.writeText(STARTER_JSON).catch(() => {});
- }
- setCopied(true);
- setTimeout(() => setCopied(false), 1500);
- } catch (_) {}
- };
-
- return (
- <>
-
-
-
- {selectedItem.label}
- {!hasSubItems && selectedItem.description && (
- {selectedItem.description}
- )}
-
- {hasSubItems ? selectedItem.subItems!.map(sub => {
- const isActiveSub = activeSubItem === sub.id;
- return (
-
- handleSubItemClick(sub)}
- >
- {isActiveSub && }
- {sub.label}
-
- );
- }) : (
-
-
- )}
- handleItemClick(selectedItem)}
- >
- {BUILTIN.arrow} Open {selectedItem.label}
-
-
-
- {/* Parse error banner */}
- {(itemsParseError || bottomParseError) && (
-
-
- );
-};
+export { IconRailNav } from "./components/IconRailNav";
\ No newline at end of file
diff --git a/components/icon-rail-nav/tsconfig.json b/components/icon-rail-nav/tsconfig.json
new file mode 100644
index 0000000..55be51b
--- /dev/null
+++ b/components/icon-rail-nav/tsconfig.json
@@ -0,0 +1,15 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "skipLibCheck": true,
+ "esModuleInterop": true,
+ "strict": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "noEmit": true,
+ "jsx": "react-jsx"
+ },
+ "include": ["**/*.tsx", "**/*.ts"]
+}
-
- )}
-
- {/* Main nav row */}
-
- {itemsParseError ? "Items JSON error:" : "Bottom Items JSON error:"}
-
-
- {itemsParseError || bottomParseError}
-
- {showHelp && (
-
- )}
-
-
- setHovered(true)}
- onMouseLeave={() => setHovered(false)}
- >
- {/* BOTTOM LAYER — label slide panel, sits behind rail */}
-
-
- {/* ── Contextual Panel ── */}
-
- {/* Main labels — identical height/margin to rail items */}
-
-
- {/* TOP LAYER — icon rail, always on top */}
-
- {navItems.map(i => renderSlideItem(i))}
-
-
- {bottomItems.map(i => renderSlideItem(i, true))}
-
-
-
-
- {navItems.map(i => renderRailItem(i))}
-
-
- {bottomItems.map(i => renderRailItem(i))}
-
-
-
-
-
-
- {projectName}
- {showHelp && (
-
- )}
-
- {renderPanel()}
-
- {/* Help drawer — slides over the panel when ? is clicked. Visible only when ShowHelp is true. */}
- {showHelp && helpOpen && (
-
-
- )}
-
-
-
-
- Items JSON Help
-
-
- Paste JSON into the ItemsJSON field in the model panel.
-
-
- {/* Schema */}
-
-
- {/* Close button */}
- Item fields
-
-
-
- {/* Icons */}
- id required, unique
- label required, display text
- icon built-in key, SVG, or URL
- page Retool page name
- app Retool app name
- badge pill text, e.g. "New"
- color hex color override
- description shown in panel
- subItems nested array
- Built-in icons
-
- {Object.keys(BUILTIN).filter(k => k !== "arrow").map(key => (
-
-
- {/* Starter template */}
-
- {BUILTIN[key]}
- {key}
-
- ))}
-
- Starter template
-
-
-
- {STARTER_JSON}
-
-
-
-
-