+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/ApiParam.d.vue.ts b/docs/.vitepress/theme/components/ApiParam.d.vue.ts
new file mode 100644
index 00000000..9df0577c
--- /dev/null
+++ b/docs/.vitepress/theme/components/ApiParam.d.vue.ts
@@ -0,0 +1,4 @@
+import type { DefineComponent } from "vue";
+
+declare const component: DefineComponent
-
-
-
-
+
+
+
diff --git a/docs/.vitepress/theme/components/CardGroup.d.vue.ts b/docs/.vitepress/theme/components/CardGroup.d.vue.ts
new file mode 100644
index 00000000..9df0577c
--- /dev/null
+++ b/docs/.vitepress/theme/components/CardGroup.d.vue.ts
@@ -0,0 +1,4 @@
+import type { DefineComponent } from "vue";
+
+declare const component: DefineComponent;
+export default component;
diff --git a/docs/.vitepress/theme/components/CardGroup.vue b/docs/.vitepress/theme/components/CardGroup.vue
index 260208e4..d59258d9 100644
--- a/docs/.vitepress/theme/components/CardGroup.vue
+++ b/docs/.vitepress/theme/components/CardGroup.vue
@@ -1,9 +1,21 @@
@@ -11,9 +23,9 @@ defineProps({
;
+export default component;
diff --git a/docs/.vitepress/theme/components/CookieConsent.d.vue.ts b/docs/.vitepress/theme/components/CookieConsent.d.vue.ts
new file mode 100644
index 00000000..9df0577c
--- /dev/null
+++ b/docs/.vitepress/theme/components/CookieConsent.d.vue.ts
@@ -0,0 +1,4 @@
+import type { DefineComponent } from "vue";
+
+declare const component: DefineComponent;
+export default component;
diff --git a/docs/.vitepress/theme/components/PlaneHeader.vue b/docs/.vitepress/theme/components/PlaneHeader.vue
new file mode 100644
index 00000000..f3a133ff
--- /dev/null
+++ b/docs/.vitepress/theme/components/PlaneHeader.vue
@@ -0,0 +1,745 @@
+
+
+
+ ;
+export default component;
diff --git a/docs/.vitepress/theme/components/Tags.vue b/docs/.vitepress/theme/components/Tags.vue
new file mode 100644
index 00000000..5c01d6ff
--- /dev/null
+++ b/docs/.vitepress/theme/components/Tags.vue
@@ -0,0 +1,17 @@
+
+
+
+ {{ label }}
+ {{ label }}
+
diff --git a/docs/.vitepress/theme/components/card-brand-icons.js b/docs/.vitepress/theme/components/card-brand-icons.js
new file mode 100644
index 00000000..65cd6844
--- /dev/null
+++ b/docs/.vitepress/theme/components/card-brand-icons.js
@@ -0,0 +1,27 @@
+/** Brand SVG icons for Card (deployment methods, etc.) */
+export const cardBrandIcons = {
+ docker: ``,
+ kubernetes: ``,
+ podman: `
+`,
+ portainer: `
+`,
+ coolify: ``,
+
+ // Add more icons as needed
+};
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 37182ad6..a592b970 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,11 +1,14 @@
-import DefaultTheme from "vitepress/theme";
import type { Theme } from "vitepress";
-import { onMounted, watch, nextTick, h } from "vue";
-import { useRoute } from "vitepress";
+import { onMounted, onUnmounted, watch, nextTick, h } from "vue";
+import { useRoute, useData } from "vitepress";
import { enhanceAppWithTabs } from "vitepress-plugin-tabs/client";
import mediumZoom from "medium-zoom";
+import VoidZeroTheme from "@voidzero-dev/vitepress-theme";
+import { themeContextKey } from "@voidzero-dev/vitepress-theme";
-import "./style.css";
+import "./styles.css";
+import "./plane-overrides.css";
+import "./plane-ui.css";
import "vitepress-plugin-tabs/client";
import ApiParam from "./components/ApiParam.vue";
@@ -13,11 +16,13 @@ import CodePanel from "./components/CodePanel.vue";
import ResponsePanel from "./components/ResponsePanel.vue";
import Card from "./components/Card.vue";
import CardGroup from "./components/CardGroup.vue";
+import Tags from "./components/Tags.vue";
import CookieConsent from "./components/CookieConsent.vue";
+import PlaneLayout from "./Layout.vue";
+
+const PLANE_FOOTER_BG = "https://media.docs.plane.so/logo/og-docs.webp";
+const PLANE_MONO_ICON = "/logo/favicon-32x32.png";
-/**
- * Adds 'api-page' class to hide the aside on API reference pages
- */
function updateLayout() {
if (typeof document === "undefined") return;
@@ -31,69 +36,53 @@ function updateLayout() {
}
}
-/**
- * Handles tab activation based on URL hash
- */
+/** Keep OSS header data-theme aligned with html.dark after hydration */
+function syncHeaderTheme() {
+ if (typeof document === "undefined") return;
+
+ const isDark = document.documentElement.classList.contains("dark");
+ document.querySelectorAll("header.plane-header, header.wrapper").forEach((header) => {
+ if (isDark) {
+ header.setAttribute("data-theme", "dark");
+ } else {
+ header.removeAttribute("data-theme");
+ }
+ });
+}
+
function handleTabHash() {
if (typeof document === "undefined") return;
- const hash = window.location.hash.slice(1); // Remove the '#'
+ const hash = window.location.hash.slice(1);
if (!hash) return;
- console.log("Looking for hash:", hash);
-
const tabButtons = document.querySelectorAll('[role="tab"]');
-
- if (tabButtons.length === 0) {
- console.log("No tabs found on page");
- return;
- }
-
- console.log("Found tabs:", tabButtons);
+ if (tabButtons.length === 0) return;
tabButtons.forEach((button) => {
const labelText = button.textContent?.trim().toLowerCase().replace(/\s+/g, "-");
- console.log("Tab label text:", labelText);
-
if (labelText === hash) {
- console.log("Activating tab:", button);
-
- // Trigger multiple event types to ensure Vue picks it up
const element = button as HTMLElement;
-
- // Dispatch a proper mouse event
- const clickEvent = new MouseEvent("click", {
- view: window,
- bubbles: true,
- cancelable: true,
- });
-
- element.dispatchEvent(clickEvent);
-
- // Also try direct click
+ element.dispatchEvent(
+ new MouseEvent("click", {
+ view: window,
+ bubbles: true,
+ cancelable: true,
+ })
+ );
element.click();
-
- // Set focus as well
element.focus();
}
});
}
-/**
- * Adds click listeners to tabs to update URL hash
- */
function setupTabHashUpdates() {
if (typeof document === "undefined") return;
const tabButtons = document.querySelectorAll('[role="tab"]');
-
tabButtons.forEach((button) => {
const element = button as HTMLElement;
-
- // Remove existing listener if any
element.removeEventListener("click", updateHashOnTabClick);
-
- // Add new listener
element.addEventListener("click", updateHashOnTabClick);
});
}
@@ -101,21 +90,35 @@ function setupTabHashUpdates() {
function updateHashOnTabClick(event: Event) {
const button = event.currentTarget as HTMLElement;
const labelText = button.textContent?.trim().toLowerCase().replace(/\s+/g, "-");
-
if (labelText) {
- // Update URL hash without triggering scroll
history.replaceState(null, "", `#${labelText}`);
}
}
+function runDomEnhancements() {
+ syncHeaderTheme();
+}
+
export default {
- extends: DefaultTheme,
+ extends: VoidZeroTheme,
Layout() {
- return h(DefaultTheme.Layout, null, {
+ return h(PlaneLayout, null, {
"layout-bottom": () => h(CookieConsent),
});
},
- enhanceApp({ app, router }) {
+ enhanceApp(ctx) {
+ VoidZeroTheme.enhanceApp?.(ctx);
+ const { app } = ctx;
+
+ app.provide(themeContextKey, {
+ /* dark mark on light bg | light/white mark on dark bg (VoidZero naming) */
+ logoDark: "/logo/dev-logo-watermark-light.png",
+ logoLight: "/logo/dev-logo-watermark-dark.png",
+ logoAlt: "Plane",
+ footerBg: PLANE_FOOTER_BG,
+ monoIcon: PLANE_MONO_ICON,
+ });
+
enhanceAppWithTabs(app);
app.component("ApiParam", ApiParam);
@@ -123,20 +126,16 @@ export default {
app.component("ResponsePanel", ResponsePanel);
app.component("Card", Card);
app.component("CardGroup", CardGroup);
-
- if (typeof window !== "undefined") {
- router.onAfterRouteChanged = () => {
- nextTick(() => {
- updateLayout();
- });
- };
- }
+ app.component("Tags", Tags);
},
setup() {
if (typeof window === "undefined") return;
const route = useRoute();
+ const { isDark } = useData();
let zoom: ReturnType | null = null;
+ let headerObserver: MutationObserver | null = null;
+ let htmlClassObserver: MutationObserver | null = null;
const initZoom = () => {
zoom?.detach();
@@ -145,29 +144,67 @@ export default {
});
};
+ const scheduleEnhancements = () => {
+ nextTick(() => {
+ runDomEnhancements();
+ requestAnimationFrame(runDomEnhancements);
+ });
+ };
+
+ watch(isDark, () => {
+ syncHeaderTheme();
+ });
+
onMounted(() => {
- initZoom();
+ nextTick(() => {
+ updateLayout();
+ initZoom();
+ scheduleEnhancements();
+ });
- // Delay tab hash handling to ensure tabs are rendered
setTimeout(() => {
handleTabHash();
setupTabHashUpdates();
+ runDomEnhancements();
}, 100);
- // Listen for hash changes
window.addEventListener("hashchange", () => {
nextTick(handleTabHash);
});
+
+ window.addEventListener("resize", scheduleEnhancements);
+
+ htmlClassObserver = new MutationObserver(() => {
+ syncHeaderTheme();
+ });
+ htmlClassObserver.observe(document.documentElement, {
+ attributes: true,
+ attributeFilter: ["class"],
+ });
+
+ const navRoot = document.querySelector(".VPNav");
+ if (navRoot) {
+ headerObserver = new MutationObserver(scheduleEnhancements);
+ headerObserver.observe(navRoot, { childList: true, subtree: true });
+ }
+ });
+
+ onUnmounted(() => {
+ htmlClassObserver?.disconnect();
+ headerObserver?.disconnect();
+ window.removeEventListener("resize", scheduleEnhancements);
+ zoom?.detach();
});
- // Watch for route changes
watch(
() => route.path,
() => {
nextTick(() => {
+ updateLayout();
initZoom();
handleTabHash();
setupTabHashUpdates();
+ scheduleEnhancements();
});
}
);
diff --git a/docs/.vitepress/theme/plane-overrides.css b/docs/.vitepress/theme/plane-overrides.css
new file mode 100644
index 00000000..b8886653
--- /dev/null
+++ b/docs/.vitepress/theme/plane-overrides.css
@@ -0,0 +1,526 @@
+/* ================================================
+ PLANE BRAND THEME — component overrides
+ ================================================ */
+
+/* --- Doc links (exclude home hero CTAs) --- */
+.vp-doc
+ a:not(.header-anchor):not(.vp-button):not(.card-link):not(.home-doc-actions__btn):not(
+ :where(.home-doc-actions *)
+ ):not(:where(.card-links *)) {
+ color: var(--vp-c-brand-1);
+}
+
+.vp-doc
+ a:not(.header-anchor):not(.vp-button):not(.card-link):not(.home-doc-actions__btn):not(
+ :where(.home-doc-actions *)
+ ):not(:where(.card-links *)):hover {
+ color: var(--plane-link-hover);
+}
+
+/* --- Navbar / header --- */
+header.plane-header.wrapper,
+.plane-header-shell {
+ --font-heading: var(--vp-font-family-base);
+ font-family: var(--vp-font-family-base);
+ background-color: var(--plane-header-bg) !important;
+ border-bottom-color: var(--plane-header-border) !important;
+}
+
+@media (min-width: 768px) {
+ .docs-layout header.plane-header.wrapper,
+ .docs-layout .plane-header-shell .wrapper {
+ border-left-color: var(--docs-divider) !important;
+ border-right-color: var(--docs-divider) !important;
+ }
+}
+
+.docs-layout .border-stroke,
+html.dark .docs-layout .border-stroke,
+[data-theme="dark"] .docs-layout .border-stroke {
+ border-color: var(--docs-divider) !important;
+}
+
+@media (min-width: 1024px) {
+ .plane-header__nav .VPLink.text-base,
+ .plane-header__nav a.text-base {
+ font-size: 14px !important;
+ }
+}
+
+@media (min-width: 768px) {
+ .plane-header .VPNavBarSearchButton,
+ .plane-header .search-bar {
+ background-color: var(--plane-header-search-bg) !important;
+ border: 1px solid var(--plane-header-search-border) !important;
+ border-radius: 12px;
+ color: var(--plane-header-search-text) !important;
+ }
+}
+
+/* --- Home feature cards --- */
+.VPHomeFeatures .VPFeature {
+ background-color: #f7f8f9;
+ border-color: #f7f8f9;
+}
+
+.VPHomeFeatures .VPFeature.link:hover {
+ background-color: #eef0f2;
+ border-color: #eef0f2;
+}
+
+.VPHomeFeatures .VPFeature .icon {
+ background-color: transparent;
+ color: #0a0a0a;
+}
+
+.VPHomeFeatures .VPFeature .title {
+ color: #0a0a0a;
+}
+
+.VPHomeFeatures .VPFeature.link:hover .title {
+ color: #111827;
+}
+
+.VPHomeFeatures .VPFeature .details {
+ color: #4a5568;
+}
+
+.VPHomeFeatures .VPFeature .link-text-value {
+ color: var(--vp-c-brand-1);
+}
+
+.VPHomeFeatures .VPFeature.link:hover .link-text-value {
+ color: var(--plane-brand-hover);
+}
+
+.dark .VPHomeFeatures .VPFeature,
+html.dark .VPHomeFeatures .VPFeature,
+[data-theme="dark"] .VPHomeFeatures .VPFeature {
+ background-color: #181a1b;
+ border-color: #181a1b;
+}
+
+.dark .VPHomeFeatures .VPFeature.link:hover,
+html.dark .VPHomeFeatures .VPFeature.link:hover,
+[data-theme="dark"] .VPHomeFeatures .VPFeature.link:hover {
+ background-color: #1d1f20;
+ border-color: #1d1f20;
+}
+
+.dark .VPHomeFeatures .VPFeature .icon,
+html.dark .VPHomeFeatures .VPFeature .icon,
+[data-theme="dark"] .VPHomeFeatures .VPFeature .icon {
+ color: #f4f4f4;
+}
+
+.dark .VPHomeFeatures .VPFeature .title,
+html.dark .VPHomeFeatures .VPFeature .title,
+[data-theme="dark"] .VPHomeFeatures .VPFeature .title {
+ color: #f4f4f4;
+}
+
+.dark .VPHomeFeatures .VPFeature .details,
+html.dark .VPHomeFeatures .VPFeature .details,
+[data-theme="dark"] .VPHomeFeatures .VPFeature .details {
+ color: #a1a1aa;
+}
+
+/* --- Hero images in markdown --- */
+.vp-doc p:has(> img[src$="#hero"]),
+.vp-doc p:has(> img[src$="#hero-tl"]),
+.vp-doc p:has(> img[src$="#hero-tr"]),
+.vp-doc p:has(> img[src$="#hero-bl"]),
+.vp-doc p:has(> img[src$="#hero-br"]),
+article p:has(> img[src$="#hero"]),
+article p:has(> img[src$="#hero-tl"]),
+article p:has(> img[src$="#hero-tr"]),
+article p:has(> img[src$="#hero-bl"]),
+article p:has(> img[src$="#hero-br"]) {
+ background: #f1f3f3;
+}
+
+.vp-doc img[src$="#hero"],
+.vp-doc img[src$="#hero-tl"],
+.vp-doc img[src$="#hero-tr"],
+.vp-doc img[src$="#hero-bl"],
+.vp-doc img[src$="#hero-br"],
+article img[src$="#hero"],
+article img[src$="#hero-tl"],
+article img[src$="#hero-tr"],
+article img[src$="#hero-bl"],
+article img[src$="#hero-br"] {
+ border-color: #eaebeb;
+ box-shadow:
+ 0 1px 2px rgba(41, 47, 61, 0.04),
+ 0 4px 12px rgba(41, 47, 61, 0.05);
+}
+
+/* --- HR / borders --- */
+.vp-doc hr {
+ border-color: #e5e7eb;
+}
+
+.dark .vp-doc hr,
+html.dark .vp-doc hr,
+[data-theme="dark"] .vp-doc hr {
+ border-color: #2a2a2a;
+}
+
+/* ================================================
+ PLANE-SPECIFIC OVERRIDES (API docs, components)
+ ================================================ */
+
+/* Hide aside for API reference pages */
+.api-page .aside,
+.api-page .aside-container,
+.api-page .VPDocAside,
+.api-page aside,
+.api-page .VPDocAsideOutline {
+ display: none !important;
+ width: 0 !important;
+ min-width: 0 !important;
+ opacity: 0 !important;
+ visibility: hidden !important;
+}
+
+.api-page.VPDoc > .container {
+ display: block !important;
+ max-width: 100% !important;
+}
+
+.api-page .VPDoc > .container > .content {
+ max-width: 100% !important;
+ padding-right: 24px !important;
+}
+
+.api-page .content-container,
+.api-page .main,
+.api-page .vp-doc {
+ max-width: 100% !important;
+}
+
+/* Two-column API layout */
+.api-two-column {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+ gap: 40px;
+ align-items: start;
+}
+
+@media (max-width: 1100px) {
+ .api-two-column {
+ grid-template-columns: 1fr;
+ gap: 24px;
+ }
+}
+
+.api-left {
+ min-width: 0;
+}
+
+.api-right {
+ position: sticky;
+ top: 100px;
+ min-width: 0;
+}
+
+@media (max-width: 1100px) {
+ .api-right {
+ position: static;
+ }
+}
+
+/* API endpoint badge */
+.api-endpoint-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 12px;
+ margin-bottom: 20px;
+}
+
+.api-endpoint-badge .method {
+ font-size: 12px;
+ font-weight: 700;
+ padding: 5px 12px;
+ border-radius: 6px;
+ font-family: var(--vp-font-family-mono);
+ text-transform: uppercase;
+}
+
+.api-endpoint-badge .method.get {
+ background: #dcfce7;
+ color: #166534;
+}
+
+.api-endpoint-badge .method.post {
+ background: #dbeafe;
+ color: #1e40af;
+}
+
+.api-endpoint-badge .method.patch,
+.api-endpoint-badge .method.put {
+ background: #fef3c7;
+ color: #92400e;
+}
+
+.api-endpoint-badge .method.delete {
+ background: #fee2e2;
+ color: #991b1b;
+}
+
+.dark .api-endpoint-badge .method.get {
+ background: rgba(34, 197, 94, 0.15);
+ color: #4ade80;
+}
+
+.dark .api-endpoint-badge .method.post {
+ background: rgba(59, 130, 246, 0.15);
+ color: #60a5fa;
+}
+
+.dark .api-endpoint-badge .method.patch,
+.dark .api-endpoint-badge .method.put {
+ background: rgba(251, 191, 36, 0.15);
+ color: #fbbf24;
+}
+
+.dark .api-endpoint-badge .method.delete {
+ background: rgba(239, 68, 68, 0.15);
+ color: #f87171;
+}
+
+.api-endpoint-badge .path {
+ font-family: var(--vp-font-family-mono);
+ font-size: 14px;
+ color: var(--vp-c-text-2);
+}
+
+/* Section headers */
+.params-section h3,
+.returns-section h3 {
+ font-size: 13px !important;
+ font-weight: 600 !important;
+ color: var(--vp-c-text-2) !important;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ margin: 0 0 12px 0 !important;
+ padding: 0 !important;
+ border: none !important;
+}
+
+.params-list {
+ border-top: 1px solid var(--vp-c-divider);
+}
+
+/* Card components */
+.card-group {
+ display: grid;
+ gap: 16px;
+ margin: 24px 0;
+}
+
+.card-group-2 {
+ grid-template-columns: 1fr;
+}
+
+@media (min-width: 768px) {
+ .card-group-2 {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+.card-group-3 {
+ grid-template-columns: 1fr;
+}
+
+@media (min-width: 768px) {
+ .card-group-3 {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@media (min-width: 1024px) {
+ .card-group-3 {
+ grid-template-columns: repeat(3, 1fr);
+ }
+}
+
+.card-group-4 {
+ grid-template-columns: 1fr;
+}
+
+@media (min-width: 768px) {
+ .card-group-4 {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@media (min-width: 1024px) {
+ .card-group-4 {
+ grid-template-columns: repeat(4, 1fr);
+ }
+}
+
+.card-link {
+ display: block;
+ padding: 24px;
+ border-radius: 12px;
+ border: 1px solid #e5e7eb;
+ background: #ffffff;
+ transition: all 0.2s ease;
+ text-decoration: none !important;
+ color: inherit;
+}
+
+.card-link:hover {
+ border-color: var(--vp-c-brand-1);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+ text-decoration: none !important;
+}
+
+.dark .card-link,
+html.dark .card-link,
+[data-theme="dark"] .card-link {
+ border-color: #2a2a2a;
+ background: rgba(20, 20, 20, 0.5);
+}
+
+.dark .card-link:hover,
+html.dark .card-link:hover,
+[data-theme="dark"] .card-link:hover {
+ border-color: var(--vp-c-brand-1);
+}
+
+.card-head {
+ margin-bottom: 0;
+}
+
+.card-title {
+ font-size: 1.0625rem !important;
+ font-weight: 600 !important;
+ line-height: 1.35 !important;
+ letter-spacing: -0.01em;
+ color: #111827 !important;
+ border: none !important;
+ transition: color 0.2s ease;
+}
+
+.card-link:hover .card-title {
+ color: var(--vp-c-brand-1) !important;
+}
+
+.dark .card-title,
+html.dark .card-title,
+[data-theme="dark"] .card-title {
+ color: #f9fafb !important;
+}
+
+.dark .card-link:hover .card-title,
+html.dark .card-link:hover .card-title,
+[data-theme="dark"] .card-link:hover .card-title {
+ color: #f9fafb !important;
+}
+
+.card-description {
+ font-size: 14px;
+ color: #6b7280;
+ line-height: 1.6;
+ margin: 0;
+}
+
+.dark .card-description,
+html.dark .card-description,
+[data-theme="dark"] .card-description {
+ color: #9ca3af;
+}
+
+/* Card CTA link (optional slot / future use) */
+.card-cta {
+ color: var(--vp-c-brand-1);
+ font-weight: 500;
+ transition: color 0.2s ease;
+}
+
+.card-link:hover .card-cta {
+ color: var(--plane-brand-hover);
+}
+
+/* Hero image layout in markdown */
+.vp-doc p:has(> img[src$="#hero"]),
+.vp-doc p:has(> img[src$="#hero-tl"]),
+.vp-doc p:has(> img[src$="#hero-tr"]),
+.vp-doc p:has(> img[src$="#hero-bl"]),
+.vp-doc p:has(> img[src$="#hero-br"]),
+article p:has(> img[src$="#hero"]),
+article p:has(> img[src$="#hero-tl"]),
+article p:has(> img[src$="#hero-tr"]),
+article p:has(> img[src$="#hero-bl"]),
+article p:has(> img[src$="#hero-br"]) {
+ max-width: 841px;
+ padding: 36px 56px 0;
+ border-radius: 12px;
+ box-sizing: border-box;
+ overflow: hidden;
+}
+
+.vp-doc img[src$="#hero"],
+.vp-doc img[src$="#hero-tl"],
+.vp-doc img[src$="#hero-tr"],
+.vp-doc img[src$="#hero-bl"],
+.vp-doc img[src$="#hero-br"],
+article img[src$="#hero"],
+article img[src$="#hero-tl"],
+article img[src$="#hero-tr"],
+article img[src$="#hero-bl"],
+article img[src$="#hero-br"] {
+ width: 100%;
+ height: auto;
+ display: block;
+ margin: 0;
+ border-radius: 8px 8px 0 0;
+ border: 1px solid #eaebeb;
+ border-bottom: none;
+ object-fit: cover;
+}
+
+/* Medium zoom */
+.vp-doc img {
+ cursor: zoom-in;
+}
+
+.medium-zoom-overlay {
+ z-index: 9999 !important;
+ background: rgba(0, 0, 0, 0.8) !important;
+}
+
+.medium-zoom-image,
+.medium-zoom-image--opened {
+ z-index: 10000 !important;
+}
+
+.medium-zoom-image--opened {
+ cursor: zoom-out;
+}
+
+.hidden {
+ display: none !important;
+}
+
+.mobile-img-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: wrap;
+}
+
+.mobile-img-box {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ max-width: 25rem;
+ min-width: 15rem;
+ text-align: center;
+ margin: 10px;
+}
diff --git a/docs/.vitepress/theme/plane-ui.css b/docs/.vitepress/theme/plane-ui.css
new file mode 100644
index 00000000..507e90fc
--- /dev/null
+++ b/docs/.vitepress/theme/plane-ui.css
@@ -0,0 +1,852 @@
+/* ================================================
+ PLANE UI — layout, typography, shell, header
+ (VoidZero base + Plane overrides)
+ ================================================ */
+
+:root {
+ --vp-layout-top-height: 0;
+ --plane-header-padding-y: 1.125rem;
+ --plane-header-padding-x: 1.375rem;
+ --plane-header-logo-height: 1.6875rem;
+ --vp-nav-height: 84px;
+
+ /* Navbar tokens (fallback outside .docs-layout) */
+ --plane-header-bg: #ffffff;
+ --plane-header-border: var(--docs-divider, #ececec);
+ --plane-header-text: var(--color-primary, #0a0a0a);
+ --plane-header-muted: var(--vp-c-text-2, #6b7280);
+ --plane-header-divider: var(--docs-divider, #ececec);
+ --plane-header-search-bg: #ffffff;
+ --plane-header-search-border: #e7e7e7;
+ --plane-header-search-text: #867e8e;
+ --plane-header-search-keys-border: #e5e4e7;
+}
+
+html.dark,
+html.dark .plane-header-shell,
+[data-theme="dark"],
+[data-theme="dark"] .plane-header-shell {
+ --plane-header-bg: var(--color-primary, #141415);
+ --plane-header-border: var(--docs-divider, #2a2a2a);
+ --plane-header-text: #ffffff;
+ --plane-header-muted: var(--vp-c-text-2, #9ca3af);
+ --plane-header-divider: var(--docs-divider, #2a2a2a);
+ --plane-header-search-bg: #111111;
+ --plane-header-search-border: #323232;
+ --plane-header-search-text: #867e8e;
+ --plane-header-search-keys-border: #323232;
+}
+
+/* --- Fonts & body --- */
+body,
+.docs-layout {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-rendering: optimizeLegibility;
+ font-feature-settings:
+ "cv01" on,
+ "cv02" on,
+ "zero" on;
+}
+
+html.dark .docs-layout,
+html.dark body {
+ background-color: #141415;
+ color-scheme: dark;
+}
+
+.docs-layout {
+ --vp-font-family-base: var(--vp-font-family-base, "Inter", system-ui, sans-serif);
+ --vp-font-family-mono: var(--vp-font-family-mono, "IBM Plex Mono", ui-monospace, monospace);
+ /* Plane header row — keep in sync with .plane-header padding + content */
+ --plane-header-padding-y: 1.125rem;
+ --plane-header-padding-x: 1.375rem;
+ --plane-header-logo-height: 1.6875rem;
+ --vp-nav-height: 84px;
+
+ /* Navbar — Plane theme tokens (light) */
+ --plane-header-bg: #ffffff;
+ --plane-header-border: var(--docs-divider);
+ --plane-header-text: var(--color-primary, #0a0a0a);
+ --plane-header-muted: var(--vp-c-text-2);
+ --plane-header-divider: var(--docs-divider);
+ --plane-header-search-bg: #ffffff;
+ --plane-header-search-border: #e7e7e7;
+ --plane-header-search-text: #867e8e;
+ --plane-header-search-keys-border: #e5e4e7;
+}
+
+html.dark .docs-layout,
+html.dark .docs-layout .plane-header-shell,
+[data-theme="dark"] .docs-layout,
+[data-theme="dark"] .plane-header-shell {
+ --plane-header-bg: var(--color-primary, #141415);
+ --plane-header-border: var(--docs-divider);
+ --plane-header-text: #ffffff;
+ --plane-header-muted: var(--vp-c-text-2);
+ --plane-header-divider: var(--docs-divider);
+ --plane-header-search-bg: #111111;
+ --plane-header-search-border: #323232;
+ --plane-header-search-text: #867e8e;
+ --plane-header-search-keys-border: #323232;
+}
+
+/* --- Doc prose --- */
+.vp-doc {
+ line-height: 1.7;
+ letter-spacing: -0.011em;
+}
+
+.vp-doc h1 {
+ letter-spacing: -0.022em;
+ line-height: 1.2;
+}
+
+.vp-doc h2 {
+ border-top: none !important;
+ margin-top: 32px;
+ letter-spacing: -0.017em;
+ line-height: 1.3;
+}
+
+.vp-doc h3 {
+ border-top: none !important;
+ letter-spacing: -0.014em;
+ line-height: 1.4;
+}
+
+/* --- Sidebars: flush under OSS navbar --- */
+@media (min-width: 1024px) {
+ .docs-layout .VPSidebar {
+ padding-top: 0;
+ top: calc(var(--vp-nav-height) + var(--vp-banner-height, 0px) - 4px);
+ }
+
+ .docs-layout .VPDoc .aside-container {
+ padding-top: 0;
+ top: calc(var(--vp-nav-height) + var(--vp-banner-height, 0px) - 4px);
+ }
+}
+
+/* --- Doc layout shell (1280px+) --- */
+@media (min-width: 1280px) {
+ .docs-layout .VPSidebar .nav {
+ padding-top: 0;
+ }
+
+ .docs-layout .VPDoc .content {
+ padding-top: 32px;
+ }
+
+ .docs-layout .VPDoc .aside {
+ max-width: 256px;
+ }
+
+ .docs-layout .VPDoc .aside-container {
+ width: 256px;
+ padding-left: 24px;
+ border-left-color: var(--docs-divider);
+ }
+
+ .docs-layout .VPDocOutlineItem .outline-link {
+ white-space: normal;
+ text-overflow: unset;
+ overflow: visible;
+ }
+}
+
+/* No right outline (aside: false) — widen main column */
+.docs-layout .VPDoc:not(.has-aside) .content-container {
+ max-width: 960px;
+ padding-left: 24px;
+ padding-right: 24px;
+}
+
+@media (min-width: 1280px) {
+ .docs-layout .VPDoc:not(.has-aside) .content-container {
+ max-width: 1104px;
+ padding-left: 48px;
+ padding-right: 48px;
+ }
+}
+
+/* Unified layout borders & corner ticks */
+@media (min-width: 768px) {
+ .docs-layout .content-wrapper,
+ .docs-layout .wrapper {
+ border-left-color: var(--docs-divider);
+ border-right-color: var(--docs-divider);
+ }
+}
+
+.docs-layout .tick-left::before {
+ border-left-color: var(--docs-divider);
+}
+
+.docs-layout .tick-right::after {
+ border-right-color: var(--docs-divider);
+}
+
+.docs-layout .VPSidebar {
+ border-right: 1px solid var(--docs-divider);
+}
+
+/* Hide local nav when sidebar is present */
+@media (min-width: 1024px) {
+ .docs-layout .VPLocalNav {
+ display: none !important;
+ }
+}
+
+/* --- Plane header — match content-wrapper width (centered when fixed) --- */
+@media (min-width: 768px) {
+ .docs-layout .plane-header-shell {
+ width: calc(100vw - 2rem);
+ max-width: calc(100vw - 2rem);
+ margin-left: auto;
+ margin-right: auto;
+ box-sizing: border-box;
+ }
+}
+
+@media (min-width: 90rem) {
+ .docs-layout .plane-header-shell {
+ width: 90rem;
+ max-width: 90rem;
+ }
+}
+
+@media (min-width: 1024px) {
+ .docs-layout .plane-header-shell--docs {
+ left: 50%;
+ right: auto;
+ transform: translateX(-50%);
+ width: calc(100vw - 2rem);
+ max-width: calc(100vw - 2rem);
+ }
+
+ .docs-layout .plane-header-shell--docs.plane-header-shell {
+ overflow-x: clip;
+ }
+}
+
+@media (min-width: 90rem) {
+ .docs-layout .plane-header-shell--docs {
+ width: 90rem;
+ max-width: 90rem;
+ }
+}
+
+@media (min-width: 1024px) {
+ .plane-header-shell {
+ overflow-x: clip;
+ }
+
+ .docs-layout .plane-header.wrapper {
+ width: 100%;
+ max-width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ box-sizing: border-box;
+ overflow-x: clip;
+ }
+
+ .plane-header .plane-header__start,
+ .plane-header .plane-header__actions {
+ min-width: 0;
+ overflow: hidden;
+ }
+
+ .plane-header .plane-header__search {
+ width: 240px;
+ max-width: 240px;
+ }
+
+ .plane-header .VPNavBarSearch {
+ width: 100%;
+ min-width: 0;
+ max-width: 240px;
+ }
+
+ .plane-header .VPNavBarSearchButton,
+ .plane-header .DocSearch.DocSearch-Button {
+ width: 100% !important;
+ max-width: 240px !important;
+ min-width: 0 !important;
+ }
+
+ .plane-header .DocSearch.DocSearch-Button,
+ .plane-header .VPNavBarSearchButton,
+ .plane-header .search-bar {
+ height: 36px;
+ border-radius: 12px;
+ background: var(--plane-header-search-bg) !important;
+ border: 1px solid var(--plane-header-search-border) !important;
+ color: var(--plane-header-search-text) !important;
+ justify-content: flex-start !important;
+ text-align: left !important;
+ gap: 8px;
+ }
+
+ .plane-header .DocSearch-Button-Container {
+ justify-content: flex-start !important;
+ flex: 1;
+ min-width: 0;
+ gap: 0.5rem;
+ }
+
+ .plane-header .DocSearch-Search-Icon {
+ color: var(--plane-header-search-text) !important;
+ }
+
+ .plane-header .DocSearch-Button-Placeholder,
+ .plane-header .VPNavBarSearchButton .text,
+ .plane-header .search-bar__text {
+ color: var(--plane-header-search-text) !important;
+ text-align: left !important;
+ flex: 0 1 auto;
+ font-size: 13px;
+ }
+
+ .plane-header .DocSearch-Button-Keys,
+ .plane-header .VPNavBarSearchButton .keys,
+ .plane-header .search-bar__keys {
+ color: var(--plane-header-search-text) !important;
+ border: 1px solid var(--plane-header-search-keys-border) !important;
+ margin-left: auto !important;
+ flex-shrink: 0;
+ font-size: 12px;
+ font-weight: 500;
+ }
+
+ .plane-header__nav .VPLink.link,
+ .plane-header__nav .VPLink.text-base,
+ .plane-header .VPNavBarMenuLink:not(.home-doc-actions__btn),
+ .plane-header .VPNavBarMenuGroup .button {
+ color: var(--plane-header-text) !important;
+ font-size: 14px !important;
+ font-weight: 400;
+ padding: 0.375rem 0.5rem;
+ min-width: 0;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ transition: color 0.2s ease;
+ }
+
+ .plane-header__nav .VPLink.link:hover,
+ .plane-header .VPNavBarMenuLink:not(.home-doc-actions__btn):hover,
+ .plane-header .VPNavBarMenuGroup .button:hover {
+ color: var(--vp-c-brand-1) !important;
+ opacity: 1;
+ }
+
+ .plane-header a.home-doc-actions__btn--secondary.VPNavBarMenuLink,
+ .plane-header a.home-doc-actions__btn--secondary.VPNavBarMenuLink:hover {
+ color: inherit !important;
+ opacity: 1 !important;
+ }
+
+ .plane-header .VPNavBarMenuLink.active,
+ .plane-header__nav .VPLink.link.active {
+ color: var(--vp-c-brand-1) !important;
+ }
+
+ .plane-header .VPNavBarAppearance,
+ .plane-header .VPNavBarSocialLinks {
+ display: flex !important;
+ align-items: center;
+ flex-shrink: 0;
+ }
+
+ .plane-header .VPNavBarSocialLinks {
+ gap: 0.25rem;
+ }
+
+ .plane-header .VPNavBarSocialLinks .VPSocialLink {
+ color: var(--plane-header-text);
+ transition: color 0.2s ease;
+ }
+
+ .plane-header .VPNavBarSocialLinks .VPSocialLink:hover {
+ color: var(--vp-c-brand-1);
+ }
+
+ .plane-header .VPSwitchAppearance {
+ --vp-c-bg: var(--plane-header-search-bg);
+ }
+}
+
+/* Theme switcher border: --vp-input-border-color → --vp-c-border → stroke / nickel */
+.docs-layout .VPSwitchAppearance {
+ --vp-c-border: var(--color-stroke);
+ --vp-input-border-color: var(--vp-c-border);
+}
+
+html.dark .docs-layout .VPSwitchAppearance,
+[data-theme="dark"] .docs-layout .VPSwitchAppearance {
+ --vp-c-border: var(--color-nickel);
+ --vp-input-border-color: var(--vp-c-border);
+}
+
+@media (min-width: 1024px) and (max-width: 1279px) {
+ .plane-header__title {
+ display: none;
+ }
+}
+
+@media (min-width: 1280px) {
+ .plane-header {
+ gap: 0.5rem 1.25rem;
+ --plane-header-padding-x: 1.5rem;
+ }
+
+ .plane-header__nav .VPLink.link,
+ .plane-header__nav .VPLink.text-base,
+ .plane-header .VPNavBarMenuLink:not(.home-doc-actions__btn),
+ .plane-header .VPNavBarMenuGroup .button {
+ font-size: 14px !important;
+ padding: 0.375rem 0.75rem;
+ }
+}
+
+/* --- Code blocks --- */
+div[class*="language-"] {
+ border-radius: 8px !important;
+ overflow: hidden;
+ border: 1px solid #e5e7eb;
+ background: #fafafa !important;
+}
+
+.dark div[class*="language-"],
+html.dark div[class*="language-"],
+[data-theme="dark"] div[class*="language-"] {
+ background: #0f0f0f !important;
+ border-color: #2a2a2a !important;
+}
+
+div[class*="language-"] pre {
+ background: transparent !important;
+}
+
+.dark .shiki,
+.dark .shiki span,
+html.dark .shiki,
+html.dark .shiki span {
+ background: transparent !important;
+}
+
+div[class*="language-"] > span.lang {
+ color: #9ca3af;
+ font-size: 12px;
+}
+
+/* --- Home page (layout: doc) --- */
+.vp-doc .home-hero {
+ margin-bottom: 2rem;
+}
+
+.vp-doc .home-hero h1 {
+ font-size: 2.5rem;
+ font-weight: 600;
+ letter-spacing: -0.02em;
+ margin: 0 0 0.5rem;
+ line-height: 1.15;
+}
+
+.vp-doc .home-hero .home-hero-text {
+ font-size: 1.75rem;
+ font-weight: 600;
+ letter-spacing: -0.02em;
+ margin: 0 0 1rem;
+ color: var(--vp-c-text-1);
+}
+
+.vp-doc .home-hero .home-hero-tagline {
+ font-size: 1.125rem;
+ color: var(--vp-c-text-2);
+ max-width: 42rem;
+ margin: 0 0 1.5rem;
+ line-height: 1.6;
+}
+
+.home-doc-actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+ margin-bottom: 3rem;
+}
+
+/* --- Plane buttons: shared base --- */
+a.home-doc-actions__btn,
+.home-doc-actions__btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 40px;
+ padding: 9px 18px;
+ border-radius: 8px;
+ border: 1px solid transparent;
+ font-size: 15px;
+ font-weight: 500;
+ line-height: 1.25;
+ text-decoration: none !important;
+ cursor: pointer;
+ transition:
+ background 0.2s ease,
+ color 0.2s ease,
+ border-color 0.2s ease,
+ box-shadow 0.2s ease,
+ transform 0.2s ease;
+}
+
+/* Navbar — smaller primary variant */
+a.home-doc-actions__btn--nav,
+.home-doc-actions__btn--nav {
+ min-height: auto;
+ padding: 4px 15px;
+ border-radius: 6px;
+ font-size: 14px;
+ margin: 0 !important;
+}
+
+/* Primary */
+a.home-doc-actions__btn--primary,
+a.home-doc-actions__btn--primary:is(:link, :visited, :focus, :active) {
+ background: #006399 !important;
+ border-color: #006399 !important;
+ color: #ffffff !important;
+}
+
+a.home-doc-actions__btn--primary:hover {
+ background: #0078b8 !important;
+ border-color: #0078b8 !important;
+ color: #ffffff !important;
+ box-shadow: 0 2px 8px rgba(0, 99, 153, 0.25);
+}
+
+a.home-doc-actions__btn--primary.home-doc-actions__btn--nav:hover {
+ transform: translateY(-1px);
+}
+
+.dark a.home-doc-actions__btn--primary,
+.dark a.home-doc-actions__btn--primary:is(:link, :visited, :focus, :active),
+html.dark a.home-doc-actions__btn--primary,
+html.dark a.home-doc-actions__btn--primary:is(:link, :visited, :focus, :active),
+[data-theme="dark"] a.home-doc-actions__btn--primary,
+[data-theme="dark"] a.home-doc-actions__btn--primary:is(:link, :visited, :focus, :active) {
+ background: #2893cc !important;
+ border-color: #2893cc !important;
+ color: #ffffff !important;
+}
+
+.dark a.home-doc-actions__btn--primary:hover,
+html.dark a.home-doc-actions__btn--primary:hover,
+[data-theme="dark"] a.home-doc-actions__btn--primary:hover {
+ background: #3aa5d4 !important;
+ border-color: #3aa5d4 !important;
+ color: #ffffff !important;
+}
+
+.dark a.home-doc-actions__btn--primary.home-doc-actions__btn--nav:hover,
+html.dark a.home-doc-actions__btn--primary.home-doc-actions__btn--nav:hover,
+[data-theme="dark"] a.home-doc-actions__btn--primary.home-doc-actions__btn--nav:hover {
+ box-shadow: 0 2px 8px rgba(40, 147, 204, 0.25);
+}
+
+/* Secondary */
+a.home-doc-actions__btn--secondary,
+a.home-doc-actions__btn--secondary:is(:link, :visited, :focus, :active) {
+ background: transparent !important;
+ border-color: #e5e7eb !important;
+ color: #0a0a0a !important;
+}
+
+a.home-doc-actions__btn--secondary:hover {
+ background: #f7f8f9 !important;
+ border-color: #d1d5db !important;
+ color: #0a0a0a !important;
+}
+
+.dark a.home-doc-actions__btn--secondary,
+.dark a.home-doc-actions__btn--secondary:is(:link, :visited, :focus, :active),
+html.dark a.home-doc-actions__btn--secondary,
+html.dark a.home-doc-actions__btn--secondary:is(:link, :visited, :focus, :active),
+[data-theme="dark"] a.home-doc-actions__btn--secondary,
+[data-theme="dark"] a.home-doc-actions__btn--secondary:is(:link, :visited, :focus, :active) {
+ background: #252829 !important;
+ border-color: #3f4244 !important;
+ color: #ffffff !important;
+}
+
+.dark a.home-doc-actions__btn--secondary:hover,
+html.dark a.home-doc-actions__btn--secondary:hover,
+[data-theme="dark"] a.home-doc-actions__btn--secondary:hover {
+ background: #2f3236 !important;
+ border-color: #4a4e52 !important;
+ color: #ffffff !important;
+}
+
+/* Navbar buttons — hide external-link ↗ icon */
+.plane-header a.home-doc-actions__btn.vp-external-link-icon::after,
+.plane-header .VPLink.home-doc-actions__btn.vp-external-link-icon::after,
+.plane-header a.home-doc-actions__btn.no-icon::after,
+.plane-header .VPLink.home-doc-actions__btn.no-icon::after {
+ display: none !important;
+ content: none !important;
+}
+
+.plane-header a.home-doc-actions__btn .vp-external-link-icon,
+.plane-header a.home-doc-actions__btn svg {
+ display: none !important;
+}
+
+/* Navbar primary & secondary buttons */
+.plane-header a.home-doc-actions__btn--primary.VPNavBarMenuLink,
+.plane-header a.home-doc-actions__btn--secondary.VPNavBarMenuLink,
+.plane-header .VPLink.home-doc-actions__btn--primary,
+.plane-header .VPLink.home-doc-actions__btn--secondary {
+ padding: 4px 15px !important;
+ font-size: 14px !important;
+ border-radius: 6px !important;
+ min-height: auto !important;
+ line-height: 1.25 !important;
+ font-weight: 500 !important;
+ white-space: nowrap;
+}
+
+/* Don't apply nav text-link hover to Sign in button */
+.plane-header .VPNavBarMenuLink.home-doc-actions__btn:hover {
+ opacity: 1 !important;
+}
+
+.home-feature-cards {
+ margin: 2rem 0 3rem;
+}
+
+.home-quick-start {
+ margin: 1.5rem 0 3rem;
+}
+
+.home-feature-cards .card-group,
+.home-quick-start .card-group {
+ display: grid;
+ gap: 16px;
+ grid-template-columns: 1fr;
+}
+
+@media (min-width: 640px) {
+ .home-feature-cards .card-group,
+ .home-quick-start .card-group {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@media (min-width: 960px) {
+ .home-feature-cards .card-group,
+ .home-quick-start .card-group {
+ grid-template-columns: repeat(3, 1fr);
+ }
+}
+
+.home-feature-cards .card-group,
+.home-quick-start .card-group {
+ gap: 1rem;
+}
+
+.home-feature-cards .card-link,
+.home-quick-start .card-link {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ min-height: 10rem;
+ border: 1px solid transparent;
+ background: #f7f8f9;
+ padding: 1.5rem;
+ border-radius: 0.875rem;
+ box-shadow: none;
+ transition:
+ background 0.2s ease,
+ border-color 0.2s ease,
+ transform 0.2s ease;
+}
+
+.home-feature-cards .card-link:hover,
+.home-quick-start .card-link:hover {
+ background: #eef0f2;
+ border-color: color-mix(in srgb, var(--vp-c-brand-1) 12%, transparent);
+ box-shadow: none;
+ transform: translateY(-1px);
+ text-decoration: none !important;
+}
+
+.home-quick-start .card-link--static {
+ cursor: default;
+}
+
+.home-quick-start .card-link--static:hover {
+ background: #f7f8f9;
+ border-color: transparent;
+ box-shadow: none;
+ transform: none;
+ text-decoration: none !important;
+}
+
+.home-quick-start .card-link--static:hover .card-title {
+ color: #0a0a0a !important;
+}
+
+.home-quick-start .card-link--static:hover .card-icon__surface {
+ background: color-mix(in srgb, var(--vp-c-brand-1) 10%, transparent);
+}
+
+.dark .home-quick-start .card-link--static:hover,
+html.dark .home-quick-start .card-link--static:hover,
+[data-theme="dark"] .home-quick-start .card-link--static:hover {
+ background: #181a1b;
+ border-color: transparent;
+}
+
+.dark .home-quick-start .card-link--static:hover .card-title,
+html.dark .home-quick-start .card-link--static:hover .card-title,
+[data-theme="dark"] .home-quick-start .card-link--static:hover .card-title {
+ color: #f4f4f4 !important;
+}
+
+.dark .home-feature-cards .card-link,
+html.dark .home-feature-cards .card-link,
+[data-theme="dark"] .home-feature-cards .card-link,
+.dark .home-quick-start .card-link,
+html.dark .home-quick-start .card-link,
+[data-theme="dark"] .home-quick-start .card-link {
+ background: #181a1b;
+ border-color: transparent;
+}
+
+.dark .home-feature-cards .card-link:hover,
+html.dark .home-feature-cards .card-link:hover,
+[data-theme="dark"] .home-feature-cards .card-link:hover,
+.dark .home-quick-start .card-link:hover,
+html.dark .home-quick-start .card-link:hover,
+[data-theme="dark"] .home-quick-start .card-link:hover {
+ background: #1f2224;
+ border-color: color-mix(in srgb, var(--vp-c-brand-1) 22%, transparent);
+ box-shadow: none;
+}
+
+.home-feature-cards .card-head,
+.home-quick-start .card-head {
+ margin-bottom: 0.625rem;
+}
+
+.home-feature-cards .card-title,
+.home-quick-start .card-title {
+ color: #0a0a0a !important;
+ font-size: 1rem !important;
+}
+
+.dark .home-feature-cards .card-title,
+html.dark .home-feature-cards .card-title,
+[data-theme="dark"] .home-feature-cards .card-title,
+.dark .home-quick-start .card-title,
+html.dark .home-quick-start .card-title,
+[data-theme="dark"] .home-quick-start .card-title {
+ color: #f4f4f4 !important;
+}
+
+.home-feature-cards .card-link:hover .card-title,
+.home-quick-start .card-link:hover .card-title {
+ color: #0a0a0a !important;
+}
+
+.dark .home-feature-cards .card-link:hover .card-title,
+html.dark .home-feature-cards .card-link:hover .card-title,
+[data-theme="dark"] .home-feature-cards .card-link:hover .card-title,
+.dark .home-quick-start .card-link:hover .card-title,
+html.dark .home-quick-start .card-link:hover .card-title,
+[data-theme="dark"] .home-quick-start .card-link:hover .card-title {
+ color: #f4f4f4 !important;
+}
+
+.home-feature-cards .card-description,
+.home-quick-start .card-description {
+ font-size: 0.875rem;
+ line-height: 1.55;
+ color: #5c6570;
+}
+
+.dark .home-feature-cards .card-description,
+html.dark .home-feature-cards .card-description,
+[data-theme="dark"] .home-feature-cards .card-description,
+.dark .home-quick-start .card-description,
+html.dark .home-quick-start .card-description,
+[data-theme="dark"] .home-quick-start .card-description {
+ color: #9ca3af;
+}
+
+.home-feature-cards .card-cta,
+.home-quick-start .card-links {
+ margin-top: auto;
+}
+
+.home-feature-cards .card-cta {
+ padding-top: 1rem;
+}
+
+.home-quick-start .card-links {
+ padding-top: 1rem;
+}
+
+.home-feature-cards .card-icon__surface,
+.home-quick-start .card-icon__surface {
+ width: 2.75rem;
+ height: 2.75rem;
+ border-radius: 0.6875rem;
+}
+
+.home-feature-cards .card-icon__custom svg,
+.home-quick-start .card-icon__custom svg {
+ width: 1.375rem;
+ height: 1.375rem;
+}
+
+/* Hide footer prev/next on home when card grids are present */
+.Layout:has(.home-feature-cards) .VPDocFooter .prev,
+.Layout:has(.home-feature-cards) .VPDocFooter .next,
+.Layout:has(.home-feature-cards) .VPDocFooter .pager-link,
+.Layout:has(.home-quick-start) .VPDocFooter .prev,
+.Layout:has(.home-quick-start) .VPDocFooter .next,
+.Layout:has(.home-quick-start) .VPDocFooter .pager-link {
+ display: none;
+}
+
+/* Legacy VPFeature icons in dark mode */
+.dark .VPFeature .VPImage,
+html.dark .VPFeature .VPImage {
+ filter: invert(1) hue-rotate(180deg);
+}
+
+.dark .VPFeatures .VPFeature .icon img,
+html.dark .VPFeatures .VPFeature .icon img {
+ filter: invert(1) hue-rotate(180deg);
+}
+
+/* --- Tags --- */
+.plantag,
+a.plantag {
+ display: inline-flex;
+ align-items: center;
+ padding: 2px 8px;
+ border-radius: 4px;
+ font-size: 12px;
+ font-weight: 500;
+ background: var(--vp-c-brand-soft);
+ color: var(--vp-c-brand-1);
+ text-decoration: none;
+ line-height: 1.4;
+}
+
+a.plantag:hover {
+ color: var(--plane-brand-hover);
+}
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
deleted file mode 100644
index f14ef8f4..00000000
--- a/docs/.vitepress/theme/style.css
+++ /dev/null
@@ -1,859 +0,0 @@
-/* ================================================
- TAILWIND CSS
- ================================================ */
-/* Import Tailwind theme + utilities WITHOUT Preflight (CSS reset).
- VitePress has its own base/reset styles for markdown rendering,
- so Tailwind's Preflight conflicts with headings, links, lists, etc.
- The layer() wrappers ensure Tailwind utilities don't override
- VitePress's unlayered default theme styles. */
-@import "tailwindcss/theme" layer(theme);
-@import "tailwindcss/utilities" layer(utilities);
-
-@source "../../**/*.{vue,md}";
-@source "../**/*.{vue,md}";
-
-@theme {
- --color-plane-400: #0088cc;
- --color-plane-500: #006399;
- --color-plane-600: #005280;
-}
-
-/* ================================================
- THEME VARIANTS
- ================================================ */
-
-@custom-variant light (&:where([data-theme*="light"], [data-theme*="light"] *));
-@custom-variant dark (&:where([data-theme*="dark"], [data-theme*="dark"] *));
-
-/* ================================================
- COLOR SYSTEM
- ================================================ */
-
-@layer base {
- :root {
- /* Alpha colors - for transparency effects */
- --alpha-white-0: oklch(1 0 0 / 0%);
- --alpha-white-200: oklch(1 0 0 / 10%);
- --alpha-white-500: oklch(1 0 0 / 30%);
- --alpha-white-700: oklch(1 0 0 / 50%);
- --alpha-black-0: oklch(0.1482 0.0034 196.79 / 0%);
- --alpha-black-200: oklch(0.1482 0.0034 196.79 / 10%);
- --alpha-black-500: oklch(0.1482 0.0034 196.79 / 30%);
- --alpha-black-700: oklch(0.1482 0.0034 196.79 / 50%);
-
- /* Neutral colors - for text and backgrounds */
- --neutral-white: oklch(1 0 0);
- --neutral-100: oklch(0.9848 0.0003 230.66);
- --neutral-200: oklch(0.9696 0.0007 230.67);
- --neutral-300: oklch(0.9543 0.001 230.67);
- --neutral-500: oklch(0.9235 0.001733 230.6853);
- --neutral-700: oklch(0.8612 0.0032 230.71);
- --neutral-800: oklch(0.6668 0.0079 230.82);
- --neutral-1000: oklch(0.5288 0.0083 230.88);
- --neutral-1100: oklch(0.4377 0.0066 230.87);
- --neutral-1200: oklch(0.2378 0.0029 230.83);
- --neutral-black: oklch(0.1472 0.0034 230.83);
-
- /* Brand colors */
- --brand-100: oklch(0.9847 0.0083 236.56);
- --brand-300: oklch(0.9428 0.0341 230.22);
- --brand-500: oklch(0.8414 0.0947 233.08);
- --brand-700: oklch(0.6766 0.1665 243.91);
- --brand-900: oklch(0.4347 0.104093 242.4823);
- --brand-default: oklch(0.4799 0.1158 242.91);
-
- /* Semantic colors */
- --green-100: oklch(0.9819 0.0181 155.83);
- --green-500: oklch(0.7914 0.2091 151.66);
- --green-700: oklch(0.632 0.185972 147.3695);
- --amber-100: oklch(0.9869 0.0214 95.28);
- --amber-500: oklch(0.829 0.1712 81.04);
- --amber-700: oklch(0.6671 0.1685 53.38);
- --red-100: oklch(0.9705 0.0129 17.38);
- --red-500: oklch(0.7022 0.1892 22.23);
- --red-700: oklch(0.583 0.238666 28.4765);
-
- /* Font sizes */
- --text-xs: 0.75rem; /* 12px */
- --text-sm: 0.875rem; /* 14px */
- --text-base: 1rem; /* 16px */
- --text-lg: 1.125rem; /* 18px */
- --text-xl: 1.25rem; /* 20px */
- --text-2xl: 1.5rem; /* 24px */
- --text-3xl: 1.875rem; /* 30px */
- --text-4xl: 2.25rem; /* 36px */
-
- /* Font weights */
- --font-weight-light: 300;
- --font-weight-normal: 400;
- --font-weight-medium: 500;
- --font-weight-semibold: 600;
- --font-weight-bold: 700;
- }
-}
-
-/* ================================================
- INTER VARIABLE FONT
- ================================================ */
-
-@font-face {
- font-family: "Inter";
- src: url("/fonts/Inter/InterVariable.woff2") format("woff2");
- font-weight: 100 900;
- font-style: normal;
- font-display: swap;
-}
-
-/* ================================================
- IBM PLEX MONO FONT (FOR CODE BLOCKS)
- ================================================ */
-
-@font-face {
- font-family: "IBM Plex Mono";
- src: url("/fonts/IBMPlexMono/IBMPlexMono-Regular.ttf") format("truetype");
- font-weight: 400;
- font-style: normal;
- font-display: swap;
-}
-
-@font-face {
- font-family: "IBM Plex Mono";
- src: url("/fonts/IBMPlexMono/IBMPlexMono-Medium.ttf") format("truetype");
- font-weight: 500;
- font-style: normal;
- font-display: swap;
-}
-
-@font-face {
- font-family: "IBM Plex Mono";
- src: url("/fonts/IBMPlexMono/IBMPlexMono-SemiBold.ttf") format("truetype");
- font-weight: 600;
- font-style: normal;
- font-display: swap;
-}
-
-@font-face {
- font-family: "IBM Plex Mono";
- src: url("/fonts/IBMPlexMono/IBMPlexMono-Bold.ttf") format("truetype");
- font-weight: 700;
- font-style: normal;
- font-display: swap;
-}
-
-/* ================================================
- PLANE DEVELOPER DOCS - CUSTOM STYLES
- ================================================ */
-
-/* Brand colors and fonts */
-:root {
- /* Brand colors */
- --vp-c-brand-1: #006399;
- --vp-c-brand-2: #006399;
- --vp-c-brand-3: #006399;
- --vp-c-brand-soft: rgba(0, 99, 153, 0.14);
- --plane-500: #006399;
-
- /* Fonts */
- --vp-font-family-base:
- "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
- --vp-font-family-mono:
- "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
- monospace;
-}
-
-/* Font rendering optimizations */
-body {
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- text-rendering: optimizeLegibility;
- font-feature-settings:
- "cv01" on,
- "cv02" on,
- "zero" on;
-}
-
-/* Typography tuning for Inter readability */
-.vp-doc {
- line-height: 1.7;
- letter-spacing: -0.011em;
-}
-
-.vp-doc h1 {
- letter-spacing: -0.022em;
- line-height: 1.2;
-}
-
-.vp-doc h2 {
- letter-spacing: -0.017em;
- line-height: 1.3;
-}
-
-.vp-doc h3 {
- letter-spacing: -0.014em;
- line-height: 1.4;
-}
-
-/* Dark mode */
-.dark {
- --vp-c-bg: #0a0a0a;
- --vp-c-bg-soft: #141414;
- --vp-c-bg-mute: #1f1f1f;
-
- /* Brand colors */
- --vp-c-brand-1: #2f9bd5;
- --vp-c-brand-2: #2f9bd5;
- --vp-c-brand-3: #2f9bd5;
- --vp-c-brand-soft: rgba(0, 99, 153, 0.14);
- --plane-500: #2f9bd5;
-}
-
-/* ================================================
- HIDE ASIDE FOR API PAGES
- ================================================ */
-
-/* Hide ALL aside elements when .api-page is present */
-.api-page .aside,
-.api-page .aside-container,
-.api-page .VPDocAside,
-.api-page aside,
-.api-page .VPDocAsideOutline {
- display: none !important;
- width: 0 !important;
- min-width: 0 !important;
- opacity: 0 !important;
- visibility: hidden !important;
-}
-
-/* Remove the aside column entirely */
-.api-page.VPDoc > .container {
- display: block !important;
- max-width: 100% !important;
-}
-
-.api-page .VPDoc > .container > .content {
- max-width: 100% !important;
- padding-right: 24px !important;
-}
-
-/* Target specific VitePress structure */
-.api-page .content-container {
- max-width: 100% !important;
-}
-
-.api-page .main {
- max-width: 100% !important;
-}
-
-/* Force full width on content */
-.api-page .vp-doc {
- max-width: 100% !important;
-}
-
-/* ================================================
- TWO-COLUMN API LAYOUT
- ================================================ */
-
-.api-two-column {
- display: grid;
- grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
- gap: 40px;
- align-items: start;
-}
-
-@media (max-width: 1100px) {
- .api-two-column {
- grid-template-columns: 1fr;
- gap: 24px;
- }
-}
-
-.api-left {
- min-width: 0;
-}
-
-.api-right {
- position: sticky;
- top: 100px;
- min-width: 0;
-}
-
-@media (max-width: 1100px) {
- .api-right {
- position: static;
- }
-}
-
-/* ================================================
- API ENDPOINT BADGE
- ================================================ */
-
-.api-endpoint-badge {
- display: inline-flex;
- align-items: center;
- gap: 12px;
- margin-bottom: 20px;
-}
-
-.api-endpoint-badge .method {
- font-size: 12px;
- font-weight: 700;
- padding: 5px 12px;
- border-radius: 6px;
- font-family: var(--vp-font-family-mono);
- text-transform: uppercase;
-}
-
-.api-endpoint-badge .method.get {
- background: #dcfce7;
- color: #166534;
-}
-
-.api-endpoint-badge .method.post {
- background: #dbeafe;
- color: #1e40af;
-}
-
-.api-endpoint-badge .method.patch,
-.api-endpoint-badge .method.put {
- background: #fef3c7;
- color: #92400e;
-}
-
-.api-endpoint-badge .method.delete {
- background: #fee2e2;
- color: #991b1b;
-}
-
-.dark .api-endpoint-badge .method.get {
- background: rgba(34, 197, 94, 0.15);
- color: #4ade80;
-}
-
-.dark .api-endpoint-badge .method.post {
- background: rgba(59, 130, 246, 0.15);
- color: #60a5fa;
-}
-
-.dark .api-endpoint-badge .method.patch,
-.dark .api-endpoint-badge .method.put {
- background: rgba(251, 191, 36, 0.15);
- color: #fbbf24;
-}
-
-.dark .api-endpoint-badge .method.delete {
- background: rgba(239, 68, 68, 0.15);
- color: #f87171;
-}
-
-.api-endpoint-badge .path {
- font-family: var(--vp-font-family-mono);
- font-size: 14px;
- color: #6b7280;
-}
-
-.dark .api-endpoint-badge .path {
- color: #9ca3af;
-}
-
-/* ================================================
- SECTION HEADERS
- ================================================ */
-
-.params-section {
- margin: 24px 0;
-}
-
-.params-section h3 {
- font-size: 13px !important;
- font-weight: 600 !important;
- color: #6b7280 !important;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- margin: 0 0 12px 0 !important;
- padding: 0 !important;
- border: none !important;
-}
-
-.dark .params-section h3 {
- color: #9ca3af !important;
-}
-
-.params-list {
- border-top: 1px solid #e5e7eb;
-}
-
-.dark .params-list {
- border-top-color: #2a2a2a;
-}
-
-.returns-section {
- margin: 24px 0;
-}
-
-.returns-section h3 {
- font-size: 13px !important;
- font-weight: 600 !important;
- color: #6b7280 !important;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- margin: 0 0 12px 0 !important;
- padding: 0 !important;
- border: none !important;
-}
-
-.dark .returns-section h3 {
- color: #9ca3af !important;
-}
-
-/* ================================================
- CODE BLOCKS - DARK MODE FIX
- ================================================ */
-
-div[class*="language-"] {
- border-radius: 8px !important;
- overflow: hidden;
- border: 1px solid #e5e7eb;
- background: #fafafa !important;
-}
-
-.dark div[class*="language-"] {
- background: #0f0f0f !important;
- border-color: #2a2a2a !important;
-}
-
-div[class*="language-"] pre {
- background: transparent !important;
-}
-
-.dark div[class*="language-"] pre {
- background: transparent !important;
-}
-
-.dark .shiki,
-.dark .shiki span {
- background: transparent !important;
-}
-
-/* Language label */
-div[class*="language-"] > span.lang {
- color: #9ca3af;
- font-size: 12px;
-}
-
-/* ================================================
- UTILITY CLASSES
- ================================================ */
-
-.hidden {
- display: none !important;
-}
-
-/* Remove default VitePress h2/h3 borders */
-.vp-doc h2 {
- border-top: none !important;
- margin-top: 32px;
-}
-
-.vp-doc h3 {
- border-top: none !important;
-}
-
-/* ================================================
- CARD GROUP COMPONENT STYLES
- ================================================ */
-
-.card-group {
- display: grid;
- gap: 16px;
- margin: 24px 0;
-}
-
-.card-group-2 {
- grid-template-columns: 1fr;
-}
-
-@media (min-width: 768px) {
- .card-group-2 {
- grid-template-columns: repeat(2, 1fr);
- }
-}
-
-.card-group-3 {
- grid-template-columns: 1fr;
-}
-
-@media (min-width: 768px) {
- .card-group-3 {
- grid-template-columns: repeat(2, 1fr);
- }
-}
-
-@media (min-width: 1024px) {
- .card-group-3 {
- grid-template-columns: repeat(3, 1fr);
- }
-}
-
-.card-group-4 {
- grid-template-columns: 1fr;
-}
-
-@media (min-width: 768px) {
- .card-group-4 {
- grid-template-columns: repeat(2, 1fr);
- }
-}
-
-@media (min-width: 1024px) {
- .card-group-4 {
- grid-template-columns: repeat(4, 1fr);
- }
-}
-
-/* ================================================
- CARD COMPONENT STYLES
- ================================================ */
-
-.card-link {
- display: block;
- padding: 24px;
- border-radius: 12px;
- border: 1px solid #e5e7eb;
- background: #ffffff;
- transition: all 0.2s ease;
- text-decoration: none !important;
- color: inherit;
-}
-
-.card-link:hover {
- border-color: #006399;
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
- text-decoration: none !important;
-}
-
-.dark .card-link {
- border-color: #2a2a2a;
- background: rgba(20, 20, 20, 0.5);
-}
-
-.dark .card-link:hover {
- border-color: #0088cc;
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
-}
-
-.card-icon {
- font-size: 32px;
- margin-bottom: 16px;
- line-height: 1;
-}
-
-.card-title {
- font-size: 16px !important;
- font-weight: 600 !important;
- color: #111827 !important;
- margin: 0 0 12px 0 !important;
- padding: 0 !important;
- border: none !important;
- transition: color 0.2s ease;
-}
-
-.card-link:hover .card-title {
- color: #006399 !important;
-}
-
-.dark .card-title {
- color: #f9fafb !important;
-}
-
-.dark .card-link:hover .card-title {
- color: #0088cc !important;
-}
-
-.card-description {
- font-size: 14px;
- color: #6b7280;
- line-height: 1.6;
- margin: 0;
-}
-
-.dark .card-description {
- color: #9ca3af;
-}
-
-/* ================================================
- SEARCH BOX WIDTH IN HEADER
- ================================================ */
-
-/* Make the header search box wider */
-.DocSearch.DocSearch-Button {
- justify-content: space-between !important;
-}
-
-@media (min-width: 768px) {
- .DocSearch.DocSearch-Button {
- width: 230px !important;
- }
-}
-
-@media (min-width: 1024px) {
- .DocSearch.DocSearch-Button {
- width: 310px !important;
- }
-}
-
-/* ================================================
- SIGN IN BUTTON STYLING
- ================================================ */
-
-/* Target the Sign in link using multiple class combinations */
-.VPNavBarMenuLink.VPLink[href*="sign-in"],
-a.VPLink.VPNavBarMenuLink[href*="sign-in"],
-.VPNavBarMenu .VPLink[href="https://app.plane.so/sign-in"] {
- background: #006399 !important;
- color: #ffffff !important;
- padding: 6px 14px !important;
- margin-top: 15px !important;
- margin-bottom: 15px !important;
- border-radius: 6px !important;
- font-weight: 500 !important;
- font-size: 14px !important;
- transition: all 0.2s ease !important;
- line-height: normal !important;
- text-decoration: none !important;
- display: inline-flex !important;
- align-items: center !important;
- vertical-align: middle !important;
-}
-
-/* Hide the external link arrow icon */
-.VPNavBarMenuLink.VPLink[href*="sign-in"] .vp-external-link-icon,
-a.VPLink.VPNavBarMenuLink[href*="sign-in"] .vp-external-link-icon,
-.VPNavBarMenu .VPLink[href="https://app.plane.so/sign-in"] .vp-external-link-icon,
-.VPNavBarMenuLink.VPLink[href*="sign-in"] svg,
-a.VPLink.VPNavBarMenuLink[href*="sign-in"] svg,
-.VPNavBarMenuLink.VPLink[href*="sign-in"] .VPImage,
-a.VPLink.VPNavBarMenuLink[href*="sign-in"] .VPImage {
- display: none !important;
-}
-
-/* Also hide the icon using ::after if it's a pseudo-element */
-.VPNavBarMenuLink.VPLink[href*="sign-in"]::after,
-a.VPLink.VPNavBarMenuLink[href*="sign-in"]::after {
- display: none !important;
- content: none !important;
-}
-
-.VPNavBarMenuLink.VPLink[href*="sign-in"]:hover,
-a.VPLink.VPNavBarMenuLink[href*="sign-in"]:hover {
- background: #0078b8 !important;
- transform: translateY(-1px) !important;
- box-shadow: 0 2px 8px rgba(0, 99, 153, 0.25) !important;
- text-decoration: none !important;
-}
-
-/* Dark mode variant */
-.dark .VPNavBarMenuLink.VPLink[href*="sign-in"],
-.dark a.VPLink.VPNavBarMenuLink[href*="sign-in"] {
- background: #006399 !important;
- color: #ffffff !important;
-}
-
-.dark .VPNavBarMenuLink.VPLink[href*="sign-in"]:hover,
-.dark a.VPLink.VPNavBarMenuLink[href*="sign-in"]:hover {
- background: #0078b8 !important;
- box-shadow: 0 2px 8px rgba(0, 99, 153, 0.35) !important;
-}
-
-/* ================================================
- HERO IMAGE STYLES
- ================================================ */
-
-.vp-doc p:has(> img[src$="#hero"]),
-article p:has(> img[src$="#hero"]) {
- max-width: 841px;
- padding: 36px 56px 0px 56px;
- background: #f1f3f3;
- border-radius: 12px;
- box-sizing: border-box;
- overflow: hidden;
-}
-
-.vp-doc img[src$="#hero"],
-article img[src$="#hero"] {
- width: 100%;
- height: auto;
- display: block;
- margin: 0;
- border-radius: 8px 8px 0px 0px;
- border-width: 1px 1px 0px 1px;
- border-style: solid;
- border-color: #eaebeb;
- object-fit: cover;
- box-shadow:
- 0px 2px 4px -1px rgba(41, 47, 61, 0.04),
- 0px 4px 6px -1px rgba(41, 47, 61, 0.05);
-}
-
-.vp-doc p:has(> img[src$="#hero-tl"]),
-article p:has(> img[src$="#hero-tl"]) {
- max-width: 841px;
- padding: 36px 0px 0px 56px;
- background: #f1f3f3;
- border-radius: 12px;
- box-sizing: border-box;
- overflow: hidden;
-}
-
-.vp-doc img[src$="#hero-tl"],
-article img[src$="#hero-tl"] {
- width: 100%;
- height: auto;
- display: block;
- margin: 0;
- border-radius: 8px 0px 0px 0px;
- border-width: 1px 0px 0px 1px;
- border-style: solid;
- border-color: #eaebeb;
- object-fit: cover;
- box-shadow:
- 0px 2px 4px -1px rgba(41, 47, 61, 0.04),
- 0px 4px 6px -1px rgba(41, 47, 61, 0.05);
-}
-
-.vp-doc p:has(> img[src$="#hero-tr"]),
-article p:has(> img[src$="#hero-tr"]) {
- max-width: 841px;
- padding: 36px 56px 0px 0px;
- background: #f1f3f3;
- border-radius: 12px;
- box-sizing: border-box;
- overflow: hidden;
-}
-
-.vp-doc img[src$="#hero-tr"],
-article img[src$="#hero-tr"] {
- width: 100%;
- height: auto;
- display: block;
- margin: 0;
- border-radius: 0px 8px 0px 0px;
- border-width: 1px 1px 0px 0px;
- border-style: solid;
- border-color: #eaebeb;
- object-fit: cover;
- box-shadow:
- 0px 2px 4px -1px rgba(41, 47, 61, 0.04),
- 0px 4px 6px -1px rgba(41, 47, 61, 0.05);
-}
-
-.vp-doc p:has(> img[src$="#hero-bl"]),
-article p:has(> img[src$="#hero-bl"]) {
- max-width: 841px;
- padding: 0px 0px 36px 56px;
- background: #f1f3f3;
- border-radius: 12px;
- box-sizing: border-box;
- overflow: hidden;
-}
-
-.vp-doc img[src$="#hero-bl"],
-article img[src$="#hero-bl"] {
- width: 100%;
- height: auto;
- display: block;
- margin: 0;
- border-radius: 0px 0px 0px 8px;
- border-width: 0px 0px 1px 1px;
- border-style: solid;
- border-color: #eaebeb;
- object-fit: cover;
- box-shadow:
- 0px 2px 4px -1px rgba(41, 47, 61, 0.04),
- 0px 4px 6px -1px rgba(41, 47, 61, 0.05);
-}
-
-.vp-doc p:has(> img[src$="#hero-br"]),
-article p:has(> img[src$="#hero-br"]) {
- max-width: 841px;
- padding: 0px 56px 36px 0px;
- background: #f1f3f3;
- border-radius: 12px;
- box-sizing: border-box;
- overflow: hidden;
-}
-
-.vp-doc img[src$="#hero-br"],
-article img[src$="#hero-br"] {
- width: 100%;
- height: auto;
- display: block;
- margin: 0;
- border-radius: 0px 0px 8px 0px;
- border-width: 0px 1px 1px 0px;
- border-style: solid;
- border-color: #eaebeb;
- object-fit: cover;
- box-shadow:
- 0px 2px 4px -1px rgba(41, 47, 61, 0.04),
- 0px 4px 6px -1px rgba(41, 47, 61, 0.05);
-}
-
-/* ================================================
- MOBILE IMAGE LAYOUT
- ================================================ */
-
-.mobile-img-container {
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- flex-wrap: wrap;
-}
-
-.mobile-img-box {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- max-width: 25rem;
- min-width: 15rem;
- text-align: center;
- margin: 10px;
-}
-
-/* ================================================
- HOMEPAGE FEATURE ICONS - DARK MODE
- ================================================ */
-
-/* Feature card icons use currentColor in SVG, but since they're
- loaded as ![]()
tags, currentColor defaults to black. This filter
- inverts them for visibility in dark mode. */
-.dark .VPFeature .VPImage {
- filter: invert(1) hue-rotate(180deg);
-}
-
-.dark .VPFeatures .VPFeature .icon img {
- filter: invert(1) hue-rotate(180deg);
-}
-
-/* ================================================
- MEDIUM ZOOM - IMAGE LIGHTBOX
- ================================================ */
-
-.vp-doc img {
- cursor: zoom-in;
-}
-
-.medium-zoom-overlay {
- z-index: 9999 !important;
- background: rgba(0, 0, 0, 0.8) !important;
-}
-
-.medium-zoom-image {
- z-index: 10000 !important;
-}
-
-.medium-zoom-image--opened {
- z-index: 10000 !important;
- cursor: zoom-out;
-}
diff --git a/docs/.vitepress/theme/styles.css b/docs/.vitepress/theme/styles.css
new file mode 100644
index 00000000..77209c07
--- /dev/null
+++ b/docs/.vitepress/theme/styles.css
@@ -0,0 +1,269 @@
+@import "@voidzero-dev/vitepress-theme/src/styles/index.css";
+
+@source "./**/*.vue";
+@source "../../**/*.{vue,md}";
+
+/* Inter + IBM Plex Mono (Plane docs) */
+@font-face {
+ font-family: "Inter";
+ src: url("/fonts/Inter/InterVariable.woff2") format("woff2");
+ font-weight: 100 900;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: "IBM Plex Mono";
+ src: url("/fonts/IBMPlexMono/IBMPlexMono-Regular.ttf") format("truetype");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: "IBM Plex Mono";
+ src: url("/fonts/IBMPlexMono/IBMPlexMono-Medium.ttf") format("truetype");
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: "IBM Plex Mono";
+ src: url("/fonts/IBMPlexMono/IBMPlexMono-SemiBold.ttf") format("truetype");
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: "IBM Plex Mono";
+ src: url("/fonts/IBMPlexMono/IBMPlexMono-Bold.ttf") format("truetype");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+/* ================================================
+ PLANE BRAND TOKENS (replaces VoidZero purple)
+ ================================================ */
+
+@theme {
+ --color-plane-400: #0088cc;
+ --color-plane-500: #006399;
+ --color-plane-600: #005280;
+}
+
+@layer base {
+ :root {
+ --neutral-50: oklch(0.99 0.002 250);
+ --neutral-100: oklch(0.97 0.004 250);
+ --neutral-200: oklch(0.92 0.006 250);
+ --neutral-500: oklch(0.55 0.02 250);
+ --neutral-900: oklch(0.2 0.01 250);
+ --brand-400: oklch(0.62 0.12 230);
+ --brand-500: oklch(0.48 0.1 230);
+ --brand-600: oklch(0.4 0.09 230);
+ --green-400: oklch(0.72 0.17 145);
+ --green-500: oklch(0.55 0.15 145);
+ }
+}
+
+/* Plane font stacks (override VoidZero APK / KH Teka) */
+:root,
+:root[data-variant="voidzero"],
+:root[data-variant="vitest"] {
+ --vp-font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --vp-font-family-mono:
+ "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+ --font-sans: var(--vp-font-family-base);
+ --font-mono: var(--vp-font-family-mono);
+}
+
+/* --- Light mode --- */
+:root,
+:root[data-theme="light"],
+html:not(.dark):not([data-theme="dark"]) {
+ --color-brand: #006399;
+ --color-primary: #0a0a0a;
+
+ --vp-c-brand-1: #006399;
+ --vp-c-brand-2: #006399;
+ --vp-c-brand-3: #006399;
+ --vp-c-brand-soft: rgba(0, 99, 153, 0.14);
+
+ --plane-500: #006399;
+ --color-plane-400: #0088cc;
+ --color-plane-500: #006399;
+ --color-plane-600: #005280;
+
+ --docs-divider: #ececec;
+
+ --vp-c-bg: #ffffff;
+ --vp-c-text-1: #0a0a0a;
+
+ --plane-link-hover: #0078b8;
+ --plane-brand-hover: #0078b8;
+
+ --vp-c-text-2: #6b7280;
+ --vp-c-divider: #e5e7eb;
+ --vp-c-border: #e5e7eb;
+
+ --vp-code-block-bg: #fafafa;
+
+ /* Hero / CTA buttons */
+ --vp-button-brand-border: #006399;
+ --vp-button-brand-bg: #006399;
+ --vp-button-brand-text: #ffffff;
+ --vp-button-brand-hover-border: #0078b8;
+ --vp-button-brand-hover-bg: #0078b8;
+ --vp-button-brand-hover-text: #ffffff;
+
+ --vp-button-alt-border: #e5e7eb;
+ --vp-button-alt-text: #0a0a0a;
+ --vp-button-alt-bg: transparent;
+ --vp-button-alt-hover-border: #d1d5db;
+ --vp-button-alt-hover-text: #0a0a0a;
+ --vp-button-alt-hover-bg: #f7f8f9;
+
+ /* Custom blocks */
+ --vp-c-tip-1: #166534;
+ --vp-c-tip-2: #166534;
+ --vp-c-tip-3: #166534;
+ --vp-c-tip-soft: #dcfce7;
+ --vp-custom-block-tip-text: #166534;
+ --vp-custom-block-tip-bg: #dcfce7;
+ --vp-custom-block-tip-code-bg: #dcfce7;
+
+ --vp-custom-block-info-text: #1e40af;
+ --vp-custom-block-info-bg: #dbeafe;
+ --vp-custom-block-info-code-bg: #dbeafe;
+
+ --vp-c-warning-1: #92400e;
+ --vp-custom-block-warning-text: #92400e;
+ --vp-custom-block-warning-bg: #fef3c7;
+ --vp-custom-block-warning-code-bg: #fef3c7;
+
+ --vp-c-danger-1: #991b1b;
+ --vp-custom-block-danger-text: #991b1b;
+ --vp-custom-block-danger-bg: #fee2e2;
+ --vp-custom-block-danger-code-bg: #fee2e2;
+}
+
+/* VoidZero / vitest variant — Plane brand (not electric purple) */
+:root[data-variant="voidzero"],
+:root[data-variant="vitest"],
+:root[data-variant="voidzero"][data-theme="light"],
+:root[data-variant="vitest"][data-theme="light"],
+:root[data-variant="voidzero"]:not(.dark):not([data-theme="dark"]),
+:root[data-variant="vitest"]:not(.dark):not([data-theme="dark"]) {
+ --color-brand: #006399;
+ --vp-code-color: #006399;
+}
+
+/* --- Dark mode --- */
+.dark,
+html.dark,
+[data-theme="dark"],
+:root.dark:not([data-theme]),
+:root[data-theme="dark"][data-variant="voidzero"],
+:root[data-theme="dark"][data-variant="vitest"] {
+ --color-brand: #2893cc;
+ --color-primary: #141415;
+
+ --vp-c-bg: #141415;
+ --vp-c-bg-soft: #1f2122;
+ --vp-c-bg-alt: #141618;
+ --vp-c-bg-mute: #252829;
+ --vp-c-bg-elv: #141618;
+
+ --vp-c-brand-1: #2893cc;
+ --vp-c-brand-2: #2893cc;
+ --vp-c-brand-3: #2893cc;
+ --vp-c-brand-soft: rgba(40, 147, 204, 0.14);
+
+ --plane-500: #2893cc;
+ --color-plane-400: #0088cc;
+ --color-plane-500: #2893cc;
+ --color-plane-600: #005280;
+
+ --docs-divider: #2a2a2a;
+
+ --vp-c-text-1: rgba(255, 255, 255, 0.9);
+
+ --plane-link-hover: #3aa5d4;
+ --plane-brand-hover: #3aa5d4;
+
+ --vp-c-text-2: #9ca3af;
+ --vp-c-divider: #2a2a2a;
+ --vp-c-border: #2a2a2a;
+
+ --vp-code-block-bg: #0f0f0f;
+
+ --vp-button-brand-border: #2893cc;
+ --vp-button-brand-bg: #2893cc;
+ --vp-button-brand-text: #ffffff;
+ --vp-button-brand-hover-border: #3aa5d4;
+ --vp-button-brand-hover-bg: #3aa5d4;
+ --vp-button-brand-hover-text: #ffffff;
+
+ --vp-button-alt-border: #3f4244;
+ --vp-button-alt-text: #ffffff;
+ --vp-button-alt-bg: transparent;
+ --vp-button-alt-hover-border: #4a4e52;
+ --vp-button-alt-hover-text: #ffffff;
+ --vp-button-alt-hover-bg: #252829;
+ --vp-button-alt-active-bg: #2f3236;
+
+ --vp-c-tip-1: #4ade80;
+ --vp-c-tip-soft: rgba(34, 197, 94, 0.15);
+ --vp-custom-block-tip-text: #4ade80;
+ --vp-custom-block-tip-bg: rgba(34, 197, 94, 0.15);
+ --vp-custom-block-tip-code-bg: rgba(34, 197, 94, 0.15);
+
+ --vp-custom-block-info-text: #60a5fa;
+ --vp-custom-block-info-bg: rgba(59, 130, 246, 0.15);
+ --vp-custom-block-info-code-bg: rgba(59, 130, 246, 0.15);
+
+ --vp-c-warning-1: #fbbf24;
+ --vp-custom-block-warning-text: #fbbf24;
+ --vp-custom-block-warning-bg: rgba(251, 191, 36, 0.15);
+ --vp-custom-block-warning-code-bg: rgba(251, 191, 36, 0.15);
+
+ --vp-c-danger-1: #f87171;
+ --vp-custom-block-danger-text: #f87171;
+ --vp-custom-block-danger-bg: rgba(239, 68, 68, 0.15);
+ --vp-custom-block-danger-code-bg: rgba(239, 68, 68, 0.15);
+}
+
+.highlighted-word {
+ background-color: var(--vp-code-line-highlight-color);
+ transition: background-color 0.5s;
+ display: inline-block;
+}
+
+html:not(.dark) .VPContent kbd {
+ --kbd-color-background: #f7f7f7;
+ --kbd-color-border: #cbcccd;
+ --kbd-color-text: #222325;
+}
+
+.VPContent kbd {
+ --kbd-color-background: #898b90;
+ --kbd-color-border: #3d3e42;
+ --kbd-color-text: #222325;
+
+ background-color: var(--kbd-color-background);
+ color: var(--kbd-color-text);
+ border-radius: 0.25rem;
+ border: 1px solid var(--kbd-color-border);
+ box-shadow: 0 2px 0 1px var(--kbd-color-border);
+ font-family: var(--font-family-sans-serif);
+ font-size: 0.75em;
+ line-height: 1;
+ min-width: 0.75rem;
+ text-align: center;
+ padding: 2px 5px;
+ position: relative;
+ top: -1px;
+}
diff --git a/docs/.vitepress/theme/tsconfig.json b/docs/.vitepress/theme/tsconfig.json
new file mode 100644
index 00000000..de924a2b
--- /dev/null
+++ b/docs/.vitepress/theme/tsconfig.json
@@ -0,0 +1,4 @@
+{
+ "extends": "../tsconfig.json",
+ "include": ["./**/*.ts", "./**/*.vue", "../types/**/*.ts", "../types/**/*.d.ts", "../env.d.ts"]
+}
diff --git a/docs/.vitepress/theme/voidzero/default-layout.ts b/docs/.vitepress/theme/voidzero/default-layout.ts
new file mode 100644
index 00000000..41b63b86
--- /dev/null
+++ b/docs/.vitepress/theme/voidzero/default-layout.ts
@@ -0,0 +1,10 @@
+import { defineComponent, h } from "vue";
+import Layout from "./doc-layout.vue";
+import { slotsToChildren } from "./slots";
+
+export default defineComponent({
+ name: "PlaneVoidzeroDefaultLayout",
+ setup(_, { slots }) {
+ return () => h(Layout, null, slotsToChildren(slots));
+ },
+});
diff --git a/docs/.vitepress/theme/voidzero/doc-layout.vue b/docs/.vitepress/theme/voidzero/doc-layout.vue
new file mode 100644
index 00000000..2ff8c45b
--- /dev/null
+++ b/docs/.vitepress/theme/voidzero/doc-layout.vue
@@ -0,0 +1,179 @@
+
+
+
+ VNode[]> {
+ const children: Record VNode[]> = {};
+ for (const name of Object.keys(slots)) {
+ const slot = slots[name];
+ if (slot) {
+ children[name] = () => slot() as VNode[];
+ }
+ }
+ return children;
+}
diff --git a/docs/.vitepress/theme/voidzero/top-banner.ts b/docs/.vitepress/theme/voidzero/top-banner.ts
new file mode 100644
index 00000000..02492af3
--- /dev/null
+++ b/docs/.vitepress/theme/voidzero/top-banner.ts
@@ -0,0 +1,9 @@
+import { defineComponent, h } from "vue";
+import Banner from "@voidzero-dev/vitepress-theme/src/components/oss/TopBanner.vue";
+
+export default defineComponent({
+ name: "PlaneVoidzeroTopBanner",
+ setup() {
+ return () => h(Banner);
+ },
+});
diff --git a/docs/.vitepress/tsconfig.json b/docs/.vitepress/tsconfig.json
new file mode 100644
index 00000000..14befa79
--- /dev/null
+++ b/docs/.vitepress/tsconfig.json
@@ -0,0 +1,46 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "strict": true,
+ "jsx": "preserve",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "ignoreDeprecations": "6.0",
+ "allowArbitraryExtensions": true,
+ "noEmit": true,
+ "lib": ["ESNext", "DOM"],
+ "types": ["vitepress/client", "node", "vue"],
+ "paths": {
+ "@voidzero-dev/vitepress-theme": ["./types/voidzero-theme.ts"],
+ "@voidzero-dev/vitepress-theme/src/vitest": ["./types/vitest-theme.ts"],
+ "@voidzero-dev/vitepress-theme/src/components/vitepress-default/Layout.vue": [
+ "../../node_modules/@voidzero-dev/vitepress-theme/src/components/vitepress-default/Layout.vue"
+ ],
+ "@voidzero-dev/vitepress-theme/src/components/oss/Header.vue": [
+ "../../node_modules/@voidzero-dev/vitepress-theme/src/components/oss/Header.vue"
+ ],
+ "@voidzero-dev/vitepress-theme/src/components/oss/TopBanner.vue": [
+ "../../node_modules/@voidzero-dev/vitepress-theme/src/components/oss/TopBanner.vue"
+ ],
+ "@voidzero-dev/vitepress-theme/src/types/theme-context": [
+ "../../node_modules/@voidzero-dev/vitepress-theme/src/types/theme-context.ts"
+ ],
+ "@vp-default/*": ["../../node_modules/@voidzero-dev/vitepress-theme/src/components/vitepress-default/*"],
+ "@vp-composables/*": ["../../node_modules/@voidzero-dev/vitepress-theme/src/composables/vitepress-default/*"],
+ "@vp-support/*": ["../../node_modules/@voidzero-dev/vitepress-theme/src/support/vitepress-default/*"],
+ "@components/*": ["../../node_modules/@voidzero-dev/vitepress-theme/src/components/*"]
+ }
+ },
+ "include": [
+ "./config.mts",
+ "./theme/**/*.ts",
+ "./theme/**/*.vue",
+ "./env.d.ts",
+ "./types/**/*.ts",
+ "./types/**/*.d.ts"
+ ]
+}
diff --git a/docs/.vitepress/types/ambient-modules.d.ts b/docs/.vitepress/types/ambient-modules.d.ts
new file mode 100644
index 00000000..6bf6d613
--- /dev/null
+++ b/docs/.vitepress/types/ambient-modules.d.ts
@@ -0,0 +1,35 @@
+declare module "*.vue" {
+ import type { DefineComponent } from "vue";
+ const component: DefineComponent;
+ export default component;
+}
+
+/** Deep imports from @voidzero-dev/vitepress-theme (package does not export .vue types) */
+declare module "@voidzero-dev/vitepress-theme/src/components/vitepress-default/Layout.vue" {
+ import type { DefineComponent } from "vue";
+ const component: DefineComponent;
+ export default component;
+}
+
+declare module "@voidzero-dev/vitepress-theme/src/components/oss/Header.vue" {
+ import type { DefineComponent } from "vue";
+ const component: DefineComponent;
+ export default component;
+}
+
+declare module "@voidzero-dev/vitepress-theme/src/components/oss/TopBanner.vue" {
+ import type { DefineComponent } from "vue";
+ const component: DefineComponent;
+ export default component;
+}
+
+declare module "@voidzero-dev/vitepress-theme/src/types/theme-context" {
+ export const themeContextKey: symbol;
+ export interface ThemeContext {
+ logoDark: string;
+ logoLight: string;
+ logoAlt: string;
+ footerBg: string;
+ monoIcon: string;
+ }
+}
diff --git a/docs/.vitepress/types/vitest-theme.ts b/docs/.vitepress/types/vitest-theme.ts
new file mode 100644
index 00000000..f5deaf18
--- /dev/null
+++ b/docs/.vitepress/types/vitest-theme.ts
@@ -0,0 +1,4 @@
+import type { Theme } from "vitepress";
+
+declare const VitestTheme: Theme;
+export default VitestTheme;
diff --git a/docs/.vitepress/types/voidzero-theme.ts b/docs/.vitepress/types/voidzero-theme.ts
new file mode 100644
index 00000000..a2ab1706
--- /dev/null
+++ b/docs/.vitepress/types/voidzero-theme.ts
@@ -0,0 +1,11 @@
+import type { Component } from "vue";
+import type { Theme } from "vitepress";
+
+export { themeContextKey, type ThemeContext } from "@voidzero-dev/vitepress-theme/src/types/theme-context";
+
+export const VPHomeHero = {} as Component;
+export const VPHomeFeatures = {} as Component;
+
+declare const VoidZeroTheme: Theme;
+export { VoidZeroTheme };
+export default VoidZeroTheme;
diff --git a/docs/.vitepress/types/vp-theme-modules.d.ts b/docs/.vitepress/types/vp-theme-modules.d.ts
new file mode 100644
index 00000000..cb2cbb6a
--- /dev/null
+++ b/docs/.vitepress/types/vp-theme-modules.d.ts
@@ -0,0 +1,110 @@
+/**
+ * Explicit module declarations for VoidZero VitePress theme aliases.
+ * Wildcard patterns are unreliable in Vetur / some IDE resolvers; list each import path.
+ */
+import type { DefineComponent } from "vue";
+
+type VueModule = DefineComponent;
+
+declare module "@vp-default/VPNavBarSearch.vue" {
+ const component: VueModule;
+ export default component;
+}
+
+declare module "@vp-default/VPNavBarMenuLink.vue" {
+ const component: VueModule;
+ export default component;
+}
+
+declare module "@vp-default/VPNavBarMenuGroup.vue" {
+ const component: VueModule;
+ export default component;
+}
+
+declare module "@vp-default/VPNavBarAppearance.vue" {
+ const component: VueModule;
+ export default component;
+}
+
+declare module "@vp-default/VPSwitchAppearance.vue" {
+ const component: VueModule;
+ export default component;
+}
+
+declare module "@vp-default/VPNavBarSocialLinks.vue" {
+ const component: VueModule;
+ export default component;
+}
+
+declare module "@vp-default/VPSocialLinks.vue" {
+ const component: VueModule;
+ export default component;
+}
+
+declare module "@vp-default/VPBackdrop.vue" {
+ const component: VueModule;
+ export default component;
+}
+
+declare module "@vp-default/VPContent.vue" {
+ const component: VueModule;
+ export default component;
+}
+
+declare module "@vp-default/VPFooter.vue" {
+ const component: VueModule;
+ export default component;
+}
+
+declare module "@vp-default/VPLocalNav.vue" {
+ const component: VueModule;
+ export default component;
+}
+
+declare module "@vp-default/VPSidebar.vue" {
+ const component: VueModule;
+ export default component;
+}
+
+declare module "@vp-default/VPSkipLink.vue" {
+ const component: VueModule;
+ export default component;
+}
+
+declare module "@components/oss/TopBanner.vue" {
+ const component: VueModule;
+ export default component;
+}
+
+declare module "@vp-composables/langs" {
+ export function useLangs(options?: { correspondingLink?: boolean }): {
+ localeLinks: { link: string; text: string }[];
+ currentLang: { label?: string };
+ };
+}
+
+declare module "@vp-composables/data" {
+ export function useData(): ReturnType;
+}
+
+declare module "@vp-composables/layout" {
+ export const layoutInfoInjectionKey: symbol;
+ export function registerWatchers(options: { closeSidebar: () => void }): void;
+ export function useLayout(): { hasSidebar: import("vue").ComputedRef };
+}
+
+declare module "@vp-composables/sidebar" {
+ export function useSidebarControl(): {
+ isOpen: import("vue").Ref;
+ open: () => void;
+ close: () => void;
+ };
+}
+
+declare module "@vp-support/utils" {
+ export function normalizeLink(path: string): string;
+}
+
+declare module "@vp-support/search-config" {
+ export function getSearchProvider(theme: unknown): "local" | "algolia" | undefined;
+}
diff --git a/docs/dev-tools/openapi-specification.md b/docs/dev-tools/openapi-specification.md
index 6ce11d75..932f43f4 100644
--- a/docs/dev-tools/openapi-specification.md
+++ b/docs/dev-tools/openapi-specification.md
@@ -12,7 +12,7 @@ Plane uses [drf-spectacular](https://drf-spectacular.readthedocs.io/) to generat
Add the following to your `.env` file (at the project root or `apps/api/.env`):
-```env
+```ini
ENABLE_DRF_SPECTACULAR=1
```
diff --git a/docs/index.md b/docs/index.md
index b78340ba..c10dbb1a 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,80 +1,110 @@
---
-layout: home
+layout: doc
title: Plane Developer Documentation - API Reference & Self-Hosting Guides
description: Build integrations with Plane's REST API and deploy on your infrastructure. Complete guides for self-hosting with Docker, Kubernetes, webhooks, and OAuth apps.
keywords: plane developer docs, plane api, self-hosting plane, kubernetes deployment, docker compose, plane webhooks, plane oauth, project management api
-hero:
- name: Developer docs
- text: Build, deploy, and integrate
- tagline: Everything you need to self-host Plane, integrate with the REST API, and build powerful custom workflows.
- actions:
- - theme: brand
- text: Get Started
- link: /self-hosting/overview
- - theme: alt
- text: API Reference
- link: /api-reference/introduction
-
-features:
- - icon: 🚀
- title: Self-hosting
- details: Deploy Plane on your infrastructure with Docker, Kubernetes, or other methods. Complete guides for configuration, authentication, and management.
- link: /self-hosting/overview
- linkText: View deployment guides
- - icon: 📡
- title: REST API
- details: 180+ endpoints to manage projects, work items, cycles, modules, and more.
- link: /api-reference/introduction
- linkText: Explore API docs
- - icon: 🔧
- title: Webhooks
- details: Automate workflows with real-time webhooks for project events, work item updates, and team activities.
- link: /dev-tools/intro-webhooks
- linkText: Configure webhooks
- - icon: 🔌
- title: OAuth Apps
- details: Build custom integrations using OAuth 2.0. Complete guides for app registration, token management, and API access.
- link: /dev-tools/build-plane-app/overview
- linkText: Build an app
- - icon: 🤖
- title: MCP Server
- details: Integrate Plane with AI agents using Model Context Protocol for intelligent project management automation.
- link: /dev-tools/mcp-server
- linkText: Setup MCP
+aside: false
---
-## Quick start guides
+
+
+
- {{ title }}
- {{ title }} -
-+
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/PlaneSearchButton.vue b/docs/.vitepress/theme/components/PlaneSearchButton.vue
new file mode 100644
index 00000000..36ff15b0
--- /dev/null
+++ b/docs/.vitepress/theme/components/PlaneSearchButton.vue
@@ -0,0 +1,72 @@
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/ResponsePanel.d.vue.ts b/docs/.vitepress/theme/components/ResponsePanel.d.vue.ts
new file mode 100644
index 00000000..9df0577c
--- /dev/null
+++ b/docs/.vitepress/theme/components/ResponsePanel.d.vue.ts
@@ -0,0 +1,4 @@
+import type { DefineComponent } from "vue";
+
+declare const component: DefineComponent
+
+ ![]()
+ ![]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+ ![]()
+ Plane Developers
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+# Developer docs
+
+
+
+Build, deploy, and integrate
+
+Everything you need to self-host Plane, integrate with the REST API, and build powerful custom workflows.
+ +
+ Get Started
+ Tutorials
+
+
+
+
+
+
+
+
+Deploy Plane on your infrastructure with Docker, Kubernetes, or other methods. Complete guides for configuration, authentication, and management.
+
+
+
+
+
+180+ endpoints to manage projects, work items, cycles, modules, and more.
+
+
+
+
-