@ankit.blumox/theme-sdk 0.1.0

package/README.md

@@ -0,0 +1,23 @@
+# @blumox/theme-sdk
+
+Official TypeScript SDK for building custom themes for the Blumox multi-tenant SaaS platform.
+
+[![npm version](https://img.shields.io/npm/v/@blumox/theme-sdk.svg)](https://www.npmjs.com/package/@blumox/theme-sdk)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+## Overview
+
+Build custom themes for the Blumox platform using a revolutionary "liquid architecture" where themes control 100% of the layout and design while the platform provides data [file:1]. Create once, deploy to thousands of tenants across the marketplace.
+
+## What is This?
+
+The Blumox platform uses a unique architecture where:
+- **Platform = Data Provider** - Supplies navigation, user info, content via props
+- **Your Theme = Visual Container** - Controls all layout, styling, and UX
+
+Think of it like water and containers: the platform is shapeless water, your theme is the container that gives it form. Same data, infinite design possibilities.
+
+## Installation
+
+```bash
+npm install @blumox/theme-sdk

package/dist/index.d.mts

@@ -0,0 +1,77 @@
+import { ReactNode } from 'react';
+
+interface NavigationItem {
+    label: string;
+    path: string;
+    icon?: string;
+    badge?: string | number;
+    children?: NavigationItem[];
+}
+interface NavigationData {
+    items: NavigationItem[];
+    logo?: string;
+    brandName: string;
+}
+
+type UserRole = 'admin' | 'user' | 'super_admin';
+interface UserData {
+    userId: string;
+    name: string;
+    email: string;
+    role: UserRole;
+    avatar?: string;
+}
+
+interface TenantConfig {
+    tenantId: string;
+    tenantName: string;
+    logo?: string;
+    primaryColor?: string;
+    currency?: string;
+}
+
+interface ThemeLayoutProps {
+    children: ReactNode;
+    navigation: NavigationData;
+    user: UserData;
+    tenant: TenantConfig;
+}
+interface ThemeManifest {
+    id: string;
+    name: string;
+    version: string;
+    author: string;
+    description: string;
+    screenshots: string[];
+    category: 'modern' | 'classic' | 'minimal' | 'creative';
+    pricing: 'free' | 'paid';
+    price?: number;
+    tags?: string[];
+}
+interface ThemeMetadata {
+    id: string;
+    name: string;
+    author: string;
+    version: string;
+    description: string;
+    preview: string;
+}
+
+declare function cn(...classes: (string | undefined | null | false | 0)[]): string;
+declare function getAvatarColor(userId: string): string;
+
+declare function getUserInitials(name: string): string;
+
+declare function formatDate(date: Date | string, format?: 'short' | 'long' | 'relative'): string;
+
+declare function isActiveRoute(currentPath: string, itemPath: string): boolean;
+
+interface ValidationResult {
+    valid: boolean;
+    errors: string[];
+    warnings: string[];
+}
+declare function validateThemeConfig(config: ThemeManifest): ValidationResult;
+declare function isValidVersion(version: string): boolean;
+
+export { type NavigationData, type NavigationItem, type TenantConfig, type ThemeLayoutProps, type ThemeManifest, type ThemeMetadata, type UserData, type UserRole, type ValidationResult, cn, formatDate, getAvatarColor, getUserInitials, isActiveRoute, isValidVersion, validateThemeConfig };

package/dist/index.d.ts

@@ -0,0 +1,77 @@
+import { ReactNode } from 'react';
+
+interface NavigationItem {
+    label: string;
+    path: string;
+    icon?: string;
+    badge?: string | number;
+    children?: NavigationItem[];
+}
+interface NavigationData {
+    items: NavigationItem[];
+    logo?: string;
+    brandName: string;
+}
+
+type UserRole = 'admin' | 'user' | 'super_admin';
+interface UserData {
+    userId: string;
+    name: string;
+    email: string;
+    role: UserRole;
+    avatar?: string;
+}
+
+interface TenantConfig {
+    tenantId: string;
+    tenantName: string;
+    logo?: string;
+    primaryColor?: string;
+    currency?: string;
+}
+
+interface ThemeLayoutProps {
+    children: ReactNode;
+    navigation: NavigationData;
+    user: UserData;
+    tenant: TenantConfig;
+}
+interface ThemeManifest {
+    id: string;
+    name: string;
+    version: string;
+    author: string;
+    description: string;
+    screenshots: string[];
+    category: 'modern' | 'classic' | 'minimal' | 'creative';
+    pricing: 'free' | 'paid';
+    price?: number;
+    tags?: string[];
+}
+interface ThemeMetadata {
+    id: string;
+    name: string;
+    author: string;
+    version: string;
+    description: string;
+    preview: string;
+}
+
+declare function cn(...classes: (string | undefined | null | false | 0)[]): string;
+declare function getAvatarColor(userId: string): string;
+
+declare function getUserInitials(name: string): string;
+
+declare function formatDate(date: Date | string, format?: 'short' | 'long' | 'relative'): string;
+
+declare function isActiveRoute(currentPath: string, itemPath: string): boolean;
+
+interface ValidationResult {
+    valid: boolean;
+    errors: string[];
+    warnings: string[];
+}
+declare function validateThemeConfig(config: ThemeManifest): ValidationResult;
+declare function isValidVersion(version: string): boolean;
+
+export { type NavigationData, type NavigationItem, type TenantConfig, type ThemeLayoutProps, type ThemeManifest, type ThemeMetadata, type UserData, type UserRole, type ValidationResult, cn, formatDate, getAvatarColor, getUserInitials, isActiveRoute, isValidVersion, validateThemeConfig };

package/dist/index.js

@@ -0,0 +1,114 @@
+'use strict';
+
+// src/utils/styling.ts
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function getAvatarColor(userId) {
+  const colors = [
+    "#4F46E5",
+    "#7C3AED",
+    "#DB2777",
+    "#DC2626",
+    "#EA580C",
+    "#CA8A04",
+    "#16A34A",
+    "#0891B2",
+    "#2563EB"
+  ];
+  let hash = 0;
+  for (let i = 0; i < userId.length; i++) {
+    hash = userId.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return colors[Math.abs(hash) % colors.length];
+}
+
+// src/utils/user.ts
+function getUserInitials(name) {
+  if (!name || typeof name !== "string") return "?";
+  return name.trim().split(/\s+/).filter(Boolean).map((word) => word[0]).join("").toUpperCase().slice(0, 2);
+}
+
+// src/utils/formatting.ts
+function formatDate(date, format = "short") {
+  const dateObj = typeof date === "string" ? new Date(date) : date;
+  if (isNaN(dateObj.getTime())) return "Invalid date";
+  switch (format) {
+    case "short":
+      return new Intl.DateTimeFormat("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric"
+      }).format(dateObj);
+    case "long":
+      return new Intl.DateTimeFormat("en-US", {
+        month: "long",
+        day: "numeric",
+        year: "numeric",
+        hour: "numeric",
+        minute: "2-digit"
+      }).format(dateObj);
+    case "relative":
+      const now = Date.now();
+      const diff = now - dateObj.getTime();
+      const seconds = Math.floor(diff / 1e3);
+      const minutes = Math.floor(seconds / 60);
+      const hours = Math.floor(minutes / 60);
+      const days = Math.floor(hours / 24);
+      if (seconds < 60) return "Just now";
+      if (minutes < 60) return `${minutes} minute${minutes > 1 ? "s" : ""} ago`;
+      if (hours < 24) return `${hours} hour${hours > 1 ? "s" : ""} ago`;
+      if (days < 7) return `${days} day${days > 1 ? "s" : ""} ago`;
+      return formatDate(dateObj, "short");
+    default:
+      return dateObj.toLocaleDateString();
+  }
+}
+
+// src/utils/navigation.ts
+function isActiveRoute(currentPath, itemPath) {
+  if (!currentPath || !itemPath) return false;
+  if (currentPath === itemPath) return true;
+  if (itemPath !== "/" && currentPath.startsWith(itemPath)) return true;
+  return false;
+}
+
+// src/utils/validation.ts
+function validateThemeConfig(config) {
+  const errors = [];
+  const warnings = [];
+  if (!config.id) errors.push("Theme ID is required");
+  if (!config.name) errors.push("Theme name is required");
+  if (!config.version) errors.push("Theme version is required");
+  if (!config.author) errors.push("Theme author is required");
+  if (config.version && !/^\d+\.\d+\.\d+$/.test(config.version)) {
+    errors.push("Version must follow semantic versioning (e.g., 1.0.0)");
+  }
+  if (config.id && !/^[a-z0-9-]+$/.test(config.id)) {
+    errors.push("Theme ID must contain only lowercase letters, numbers, and hyphens");
+  }
+  if (!config.screenshots || config.screenshots.length === 0) {
+    warnings.push("At least one screenshot is recommended");
+  }
+  if (config.pricing === "paid" && !config.price) {
+    errors.push("Price is required for paid themes");
+  }
+  return {
+    valid: errors.length === 0,
+    errors,
+    warnings
+  };
+}
+function isValidVersion(version) {
+  return /^\d+\.\d+\.\d+$/.test(version);
+}
+
+exports.cn = cn;
+exports.formatDate = formatDate;
+exports.getAvatarColor = getAvatarColor;
+exports.getUserInitials = getUserInitials;
+exports.isActiveRoute = isActiveRoute;
+exports.isValidVersion = isValidVersion;
+exports.validateThemeConfig = validateThemeConfig;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/styling.ts","../src/utils/user.ts","../src/utils/formatting.ts","../src/utils/navigation.ts","../src/utils/validation.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["export function cn(...classes: (string | undefined | null | false | 0)[]): string {\r\n  return classes.filter(Boolean).join(' ');\r\n}\r\n\r\nexport function getAvatarColor(userId: string): string {\r\n  const colors = [\r\n    '#4F46E5', '#7C3AED', '#DB2777', '#DC2626',\r\n    '#EA580C', '#CA8A04', '#16A34A', '#0891B2', '#2563EB'\r\n  ];\r\n  \r\n  let hash = 0;\r\n  for (let i = 0; i < userId.length; i++) {\r\n    hash = userId.charCodeAt(i) + ((hash << 5) - hash);\r\n  }\r\n  \r\n  return colors[Math.abs(hash) % colors.length];\r\n}\r\n","export function getUserInitials(name: string): string {\r\n  if (!name || typeof name !== 'string') return '?';\r\n  \r\n  return name\r\n    .trim()\r\n    .split(/\\s+/)\r\n    .filter(Boolean)\r\n    .map(word => word[0])\r\n    .join('')\r\n    .toUpperCase()\r\n    .slice(0, 2);\r\n}\r\n","export function formatDate(\r\n  date: Date | string,\r\n  format: 'short' | 'long' | 'relative' = 'short'\r\n): string {\r\n  const dateObj = typeof date === 'string' ? new Date(date) : date;\r\n  \r\n  if (isNaN(dateObj.getTime())) return 'Invalid date';\r\n  \r\n  switch (format) {\r\n    case 'short':\r\n      return new Intl.DateTimeFormat('en-US', {\r\n        month: 'short',\r\n        day: 'numeric',\r\n        year: 'numeric',\r\n      }).format(dateObj);\r\n      \r\n    case 'long':\r\n      return new Intl.DateTimeFormat('en-US', {\r\n        month: 'long',\r\n        day: 'numeric',\r\n        year: 'numeric',\r\n        hour: 'numeric',\r\n        minute: '2-digit',\r\n      }).format(dateObj);\r\n      \r\n    case 'relative':\r\n      const now = Date.now();\r\n      const diff = now - dateObj.getTime();\r\n      const seconds = Math.floor(diff / 1000);\r\n      const minutes = Math.floor(seconds / 60);\r\n      const hours = Math.floor(minutes / 60);\r\n      const days = Math.floor(hours / 24);\r\n      \r\n      if (seconds < 60) return 'Just now';\r\n      if (minutes < 60) return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;\r\n      if (hours < 24) return `${hours} hour${hours > 1 ? 's' : ''} ago`;\r\n      if (days < 7) return `${days} day${days > 1 ? 's' : ''} ago`;\r\n      \r\n      return formatDate(dateObj, 'short');\r\n      \r\n    default:\r\n      return dateObj.toLocaleDateString();\r\n  }\r\n}\r\n","export function isActiveRoute(currentPath: string, itemPath: string): boolean {\r\n  if (!currentPath || !itemPath) return false;\r\n  if (currentPath === itemPath) return true;\r\n  if (itemPath !== '/' && currentPath.startsWith(itemPath)) return true;\r\n  return false;\r\n}\r\n","import type { ThemeManifest } from '../types';\r\n\r\nexport interface ValidationResult {\r\n  valid: boolean;\r\n  errors: string[];\r\n  warnings: string[];\r\n}\r\n\r\nexport function validateThemeConfig(config: ThemeManifest): ValidationResult {\r\n  const errors: string[] = [];\r\n  const warnings: string[] = [];\r\n  \r\n  if (!config.id) errors.push('Theme ID is required');\r\n  if (!config.name) errors.push('Theme name is required');\r\n  if (!config.version) errors.push('Theme version is required');\r\n  if (!config.author) errors.push('Theme author is required');\r\n  \r\n  if (config.version && !/^\\d+\\.\\d+\\.\\d+$/.test(config.version)) {\r\n    errors.push('Version must follow semantic versioning (e.g., 1.0.0)');\r\n  }\r\n  \r\n  if (config.id && !/^[a-z0-9-]+$/.test(config.id)) {\r\n    errors.push('Theme ID must contain only lowercase letters, numbers, and hyphens');\r\n  }\r\n  \r\n  if (!config.screenshots || config.screenshots.length === 0) {\r\n    warnings.push('At least one screenshot is recommended');\r\n  }\r\n  \r\n  if (config.pricing === 'paid' && !config.price) {\r\n    errors.push('Price is required for paid themes');\r\n  }\r\n  \r\n  return {\r\n    valid: errors.length === 0,\r\n    errors,\r\n    warnings,\r\n  };\r\n}\r\n\r\nexport function isValidVersion(version: string): boolean {\r\n  return /^\\d+\\.\\d+\\.\\d+$/.test(version);\r\n}\r\n"]}

package/dist/index.mjs

@@ -0,0 +1,106 @@
+// src/utils/styling.ts
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function getAvatarColor(userId) {
+  const colors = [
+    "#4F46E5",
+    "#7C3AED",
+    "#DB2777",
+    "#DC2626",
+    "#EA580C",
+    "#CA8A04",
+    "#16A34A",
+    "#0891B2",
+    "#2563EB"
+  ];
+  let hash = 0;
+  for (let i = 0; i < userId.length; i++) {
+    hash = userId.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return colors[Math.abs(hash) % colors.length];
+}
+
+// src/utils/user.ts
+function getUserInitials(name) {
+  if (!name || typeof name !== "string") return "?";
+  return name.trim().split(/\s+/).filter(Boolean).map((word) => word[0]).join("").toUpperCase().slice(0, 2);
+}
+
+// src/utils/formatting.ts
+function formatDate(date, format = "short") {
+  const dateObj = typeof date === "string" ? new Date(date) : date;
+  if (isNaN(dateObj.getTime())) return "Invalid date";
+  switch (format) {
+    case "short":
+      return new Intl.DateTimeFormat("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric"
+      }).format(dateObj);
+    case "long":
+      return new Intl.DateTimeFormat("en-US", {
+        month: "long",
+        day: "numeric",
+        year: "numeric",
+        hour: "numeric",
+        minute: "2-digit"
+      }).format(dateObj);
+    case "relative":
+      const now = Date.now();
+      const diff = now - dateObj.getTime();
+      const seconds = Math.floor(diff / 1e3);
+      const minutes = Math.floor(seconds / 60);
+      const hours = Math.floor(minutes / 60);
+      const days = Math.floor(hours / 24);
+      if (seconds < 60) return "Just now";
+      if (minutes < 60) return `${minutes} minute${minutes > 1 ? "s" : ""} ago`;
+      if (hours < 24) return `${hours} hour${hours > 1 ? "s" : ""} ago`;
+      if (days < 7) return `${days} day${days > 1 ? "s" : ""} ago`;
+      return formatDate(dateObj, "short");
+    default:
+      return dateObj.toLocaleDateString();
+  }
+}
+
+// src/utils/navigation.ts
+function isActiveRoute(currentPath, itemPath) {
+  if (!currentPath || !itemPath) return false;
+  if (currentPath === itemPath) return true;
+  if (itemPath !== "/" && currentPath.startsWith(itemPath)) return true;
+  return false;
+}
+
+// src/utils/validation.ts
+function validateThemeConfig(config) {
+  const errors = [];
+  const warnings = [];
+  if (!config.id) errors.push("Theme ID is required");
+  if (!config.name) errors.push("Theme name is required");
+  if (!config.version) errors.push("Theme version is required");
+  if (!config.author) errors.push("Theme author is required");
+  if (config.version && !/^\d+\.\d+\.\d+$/.test(config.version)) {
+    errors.push("Version must follow semantic versioning (e.g., 1.0.0)");
+  }
+  if (config.id && !/^[a-z0-9-]+$/.test(config.id)) {
+    errors.push("Theme ID must contain only lowercase letters, numbers, and hyphens");
+  }
+  if (!config.screenshots || config.screenshots.length === 0) {
+    warnings.push("At least one screenshot is recommended");
+  }
+  if (config.pricing === "paid" && !config.price) {
+    errors.push("Price is required for paid themes");
+  }
+  return {
+    valid: errors.length === 0,
+    errors,
+    warnings
+  };
+}
+function isValidVersion(version) {
+  return /^\d+\.\d+\.\d+$/.test(version);
+}
+
+export { cn, formatDate, getAvatarColor, getUserInitials, isActiveRoute, isValidVersion, validateThemeConfig };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/styling.ts","../src/utils/user.ts","../src/utils/formatting.ts","../src/utils/navigation.ts","../src/utils/validation.ts"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["export function cn(...classes: (string | undefined | null | false | 0)[]): string {\r\n  return classes.filter(Boolean).join(' ');\r\n}\r\n\r\nexport function getAvatarColor(userId: string): string {\r\n  const colors = [\r\n    '#4F46E5', '#7C3AED', '#DB2777', '#DC2626',\r\n    '#EA580C', '#CA8A04', '#16A34A', '#0891B2', '#2563EB'\r\n  ];\r\n  \r\n  let hash = 0;\r\n  for (let i = 0; i < userId.length; i++) {\r\n    hash = userId.charCodeAt(i) + ((hash << 5) - hash);\r\n  }\r\n  \r\n  return colors[Math.abs(hash) % colors.length];\r\n}\r\n","export function getUserInitials(name: string): string {\r\n  if (!name || typeof name !== 'string') return '?';\r\n  \r\n  return name\r\n    .trim()\r\n    .split(/\\s+/)\r\n    .filter(Boolean)\r\n    .map(word => word[0])\r\n    .join('')\r\n    .toUpperCase()\r\n    .slice(0, 2);\r\n}\r\n","export function formatDate(\r\n  date: Date | string,\r\n  format: 'short' | 'long' | 'relative' = 'short'\r\n): string {\r\n  const dateObj = typeof date === 'string' ? new Date(date) : date;\r\n  \r\n  if (isNaN(dateObj.getTime())) return 'Invalid date';\r\n  \r\n  switch (format) {\r\n    case 'short':\r\n      return new Intl.DateTimeFormat('en-US', {\r\n        month: 'short',\r\n        day: 'numeric',\r\n        year: 'numeric',\r\n      }).format(dateObj);\r\n      \r\n    case 'long':\r\n      return new Intl.DateTimeFormat('en-US', {\r\n        month: 'long',\r\n        day: 'numeric',\r\n        year: 'numeric',\r\n        hour: 'numeric',\r\n        minute: '2-digit',\r\n      }).format(dateObj);\r\n      \r\n    case 'relative':\r\n      const now = Date.now();\r\n      const diff = now - dateObj.getTime();\r\n      const seconds = Math.floor(diff / 1000);\r\n      const minutes = Math.floor(seconds / 60);\r\n      const hours = Math.floor(minutes / 60);\r\n      const days = Math.floor(hours / 24);\r\n      \r\n      if (seconds < 60) return 'Just now';\r\n      if (minutes < 60) return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;\r\n      if (hours < 24) return `${hours} hour${hours > 1 ? 's' : ''} ago`;\r\n      if (days < 7) return `${days} day${days > 1 ? 's' : ''} ago`;\r\n      \r\n      return formatDate(dateObj, 'short');\r\n      \r\n    default:\r\n      return dateObj.toLocaleDateString();\r\n  }\r\n}\r\n","export function isActiveRoute(currentPath: string, itemPath: string): boolean {\r\n  if (!currentPath || !itemPath) return false;\r\n  if (currentPath === itemPath) return true;\r\n  if (itemPath !== '/' && currentPath.startsWith(itemPath)) return true;\r\n  return false;\r\n}\r\n","import type { ThemeManifest } from '../types';\r\n\r\nexport interface ValidationResult {\r\n  valid: boolean;\r\n  errors: string[];\r\n  warnings: string[];\r\n}\r\n\r\nexport function validateThemeConfig(config: ThemeManifest): ValidationResult {\r\n  const errors: string[] = [];\r\n  const warnings: string[] = [];\r\n  \r\n  if (!config.id) errors.push('Theme ID is required');\r\n  if (!config.name) errors.push('Theme name is required');\r\n  if (!config.version) errors.push('Theme version is required');\r\n  if (!config.author) errors.push('Theme author is required');\r\n  \r\n  if (config.version && !/^\\d+\\.\\d+\\.\\d+$/.test(config.version)) {\r\n    errors.push('Version must follow semantic versioning (e.g., 1.0.0)');\r\n  }\r\n  \r\n  if (config.id && !/^[a-z0-9-]+$/.test(config.id)) {\r\n    errors.push('Theme ID must contain only lowercase letters, numbers, and hyphens');\r\n  }\r\n  \r\n  if (!config.screenshots || config.screenshots.length === 0) {\r\n    warnings.push('At least one screenshot is recommended');\r\n  }\r\n  \r\n  if (config.pricing === 'paid' && !config.price) {\r\n    errors.push('Price is required for paid themes');\r\n  }\r\n  \r\n  return {\r\n    valid: errors.length === 0,\r\n    errors,\r\n    warnings,\r\n  };\r\n}\r\n\r\nexport function isValidVersion(version: string): boolean {\r\n  return /^\\d+\\.\\d+\\.\\d+$/.test(version);\r\n}\r\n"]}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@ankit.blumox/theme-sdk",
+  "version": "0.1.0",
+  "description": "Official SDK for building custom themes for Blumox platform",
+  "keywords": ["blumox", "theme", "sdk", "nextjs", "react"],
+  "author": "Blumox Team",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "type-check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "next": "^16.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "next": "^16.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  }
+}

package/templates/starter/Layout.tsx

@@ -0,0 +1,43 @@
+import type { ThemeLayoutProps } from '@blumox/theme-sdk';
+import { getUserInitials, cn, isActiveRoute } from '@blumox/theme-sdk';
+
+export default function StarterTheme({
+  children,
+  navigation,
+  user,
+  tenant,
+}: ThemeLayoutProps) {
+  const initials = getUserInitials(user.name);
+  
+  return (
+    <div className="theme-container">
+      <header className="header">
+        <div className="brand">
+          <h1>{tenant.tenantName}</h1>
+        </div>
+        <div className="user-info">
+          <div className="avatar">{initials}</div>
+          <span>{user.name}</span>
+        </div>
+      </header>
+      
+      <nav className="navigation">
+        {navigation.items.map((item) => (
+          <a
+            key={item.path}
+            href={item.path}
+            className={cn(
+              'nav-item',
+              isActiveRoute(window.location.pathname, item.path) && 'active'
+            )}
+          >
+            {item.label}
+            {item.badge && <span className="badge">{item.badge}</span>}
+          </a>
+        ))}
+      </nav>
+      
+      <main className="content">{children}</main>
+    </div>
+  );
+}

package/templates/starter/README.md

@@ -0,0 +1,12 @@
+# @blumox/theme-sdk
+
+Official TypeScript SDK for building custom themes for the Blumox multi-tenant SaaS platform.
+
+## Overview
+
+The Blumox Theme SDK enables developers to create custom themes for the Blumox platform using a revolutionary "liquid architecture" where themes control 100% of the layout and design while the platform provides data [file:1]. Build once, deploy to thousands of tenants across the marketplace.
+
+## Installation
+
+```bash
+npm install @blumox/theme-sdk

package/templates/starter/styles.css

@@ -0,0 +1,54 @@
+:root {
+  --primary-color: #4F46E5;
+  --background-color: #ffffff;
+  --text-color: #1F2937;
+  --border-color: #E5E7EB;
+}
+
+.theme-container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  padding: 1rem 2rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--primary-color);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.navigation {
+  display: flex;
+  gap: 1rem;
+  padding: 1rem 2rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.nav-item {
+  padding: 0.5rem 1rem;
+  text-decoration: none;
+  color: var(--text-color);
+}
+
+.nav-item.active {
+  background: var(--primary-color);
+  color: white;
+  border-radius: 0.375rem;
+}
+
+.content {
+  flex: 1;
+  padding: 2rem;
+}

package/templates/starter/theme.config.ts

@@ -0,0 +1,12 @@
+import type { ThemeManifest } from '@blumox/theme-sdk';
+
+export const themeConfig: ThemeManifest = {
+  id: 'my-custom-theme',
+  name: 'My Custom Theme',
+  version: '1.0.0',
+  author: 'Your Name',
+  description: 'A beautiful custom theme for Blumox platform',
+  screenshots: [],
+  category: 'modern',
+  pricing: 'free',
+};