firebase-os 1.1.4 → 1.1.6

package/src/configs/pages/admin.config.ts

@@ -0,0 +1,29 @@
+export const adminPageConfig = {
+    tabName: 'Admin Tab',
+    iconName: '',
+    route: '/admin-tab',
+    template: 'none',
+    form: '',
+    showPrompt: true,
+    tabTitle: 'Admin Dashboard',
+    showButton: true,
+    buttonStyle: 'primary',
+    buttonText: '+',
+    buttonAction: 'save_info',
+    storage: true,
+    buttonStorageIcon: 'upload',
+    buttonStorageText: '',
+    buttonStorageStyle: 'secondary',
+    buttonStorageAction: 'upload_file',
+    // Calendar defaults (used when template === 'calendar')
+    defaultView: 'calendar',
+    defaultTimeFormat: '12h',
+    showViewsButton: true,
+    viewsButtonStyle: 'secondary',
+    // Table defaults (used when template === 'table')
+    showExportButton: true,
+    exportButtonIcon: 'download-square',
+    // Board defaults (used when template === 'board')
+    keyName: 'key',
+    valueName: 'value',
+};

package/src/configs/pages/contact.config.ts

@@ -0,0 +1,6 @@
+export const defaultContactConfig = {
+  route: '/contact',
+  template: 'popup_form',
+  form: 'contact',
+  pageName: 'Contact'
+};

package/src/configs/pages/home.config.ts

@@ -0,0 +1,18 @@
+export const defaultHomeConfig = {
+  hero: {
+    title: 'Firebase OS.',
+    showSubtitle: true,
+    subtitle: 'The Open-Source Firebase Starter',
+    text: 'A production-ready Firebase backend template with Auth, Firestore prefix rules, and a clean dashboard — ready for vibe-coded apps.',
+    buttons: {
+      primary: {
+        text: 'Start Building Free',
+        action: 'register'
+      },
+      secondary: {
+        text: 'Sign In',
+        action: 'sign_in'
+      }
+    }
+  }
+};

package/src/configs/pages/mem.config.ts

@@ -0,0 +1,2 @@
+export const memPageConfig = {
+};

package/src/configs/pages/menuOrders.config.ts

@@ -0,0 +1,11 @@
+import type { OrderItem } from './tabOrders.config';
+
+/**
+ * Default public menu order — used when Firestore has no record.
+ * Home is intentionally excluded from the nav menu (it's the logo link).
+ */
+export const defaultMenuOrder: OrderItem[] = [
+  { id: 'contact',   hidden: false },
+  { id: 'templates', hidden: false },
+  { id: 'setup',     hidden: false },
+];

package/src/configs/pages/pub.config.ts

@@ -0,0 +1,11 @@
+export const defaultPublicConfig = {
+  route: '/page_1',
+  pageName: 'New Public Page',
+  template: 'none',
+  pageTitle: 'My Custom Page',
+  copyPrompt: true,
+  showButton: true,
+  buttonText: 'Open Form',
+  action: 'form',
+  form: 'contact'
+};

package/src/configs/pages/shared.config.ts

@@ -0,0 +1,29 @@
+export const sharedPageConfig = {
+    tabName: 'Shared Tab',
+    iconName: '',
+    route: '/shared-tab',
+    template: 'none',
+    form: '',
+    showPrompt: true,
+    tabTitle: 'Shared Dashboard',
+    showButton: true,
+    buttonStyle: 'primary',
+    buttonText: '+',
+    buttonAction: 'save_info',
+    storage: true,
+    buttonStorageIcon: 'upload',
+    buttonStorageText: '',
+    buttonStorageStyle: 'secondary',
+    buttonStorageAction: 'upload_file',
+    // Calendar defaults (used when template === 'calendar')
+    defaultView: 'calendar',
+    defaultTimeFormat: '12h',
+    showViewsButton: true,
+    viewsButtonStyle: 'secondary',
+    // Table defaults (used when template === 'table')
+    showExportButton: true,
+    exportButtonIcon: 'download-square',
+    // Board defaults (used when template === 'board')
+    keyName: 'key',
+    valueName: 'value',
+};

package/src/configs/pages/support.config.ts

@@ -0,0 +1,7 @@
+export const defaultSupportConfig = {
+  route: '/support',
+  template: 'popup_form',
+  form: 'support',
+  tabName: 'Support',
+  iconName: ''
+};

package/src/configs/pages/tabOrders.config.ts

@@ -0,0 +1,33 @@
+/**
+ * OrderItem — the shape stored in sys_configs/tab_order and sys_configs/page_order.
+ * Both order AND visibility live here so there is a single source of truth.
+ */
+export type OrderItem = {
+  id: string;
+  hidden: boolean;
+};
+
+/**
+ * Converts legacy plain-string arrays (old Firestore data) to OrderItem[].
+ * Always safe to call even if the data is already in the correct shape.
+ */
+export const parseOrderItems = (raw: any[]): OrderItem[] =>
+  (raw || []).map(item =>
+    typeof item === 'string'
+      ? { id: item, hidden: false }
+      : { id: String(item.id), hidden: Boolean(item.hidden) }
+  );
+
+/** Default tab order for the internal dashboard — used when Firestore has no record. */
+export const defaultTabOrder: OrderItem[] = [
+  { id: 'pages',       hidden: false },
+  { id: 'forms',       hidden: false },
+  { id: 'drive',       hidden: false },
+  { id: 'users',       hidden: false },
+  { id: 'theme',       hidden: false },
+  { id: 'submissions', hidden: false },
+  { id: 'requests',    hidden: false },
+  { id: 'settings',    hidden: false },
+  { id: 'profile',     hidden: false },
+  { id: 'support',     hidden: true },
+];

package/src/configs/pages/user.config.ts

@@ -0,0 +1,29 @@
+export const userPageConfig = {
+    tabName: 'New Private Page',
+    iconName: '',
+    route: '/new-private-page',
+    template: 'none',
+    form: 'support',
+    showPrompt: true,
+    tabTitle: 'Private Dashboard',
+    showButton: true,
+    buttonStyle: 'primary',
+    buttonText: '+',
+    buttonAction: 'save_info',
+    storage: true,
+    buttonStorageIcon: 'upload',
+    buttonStorageText: '',
+    buttonStorageStyle: 'secondary',
+    buttonStorageAction: 'upload_file',
+    // Calendar defaults (used when template === 'calendar')
+    defaultView: 'calendar',
+    defaultTimeFormat: '12h',
+    showViewsButton: true,
+    viewsButtonStyle: 'secondary',
+    // Table defaults (used when template === 'table')
+    showExportButton: true,
+    exportButtonIcon: 'download-square',
+    // Board defaults (used when template === 'board')
+    keyName: 'key',
+    valueName: 'value',
+};

package/src/configs/theme.config.ts

@@ -0,0 +1,93 @@
+/**
+ * THEME & BRANDING CONFIGURATION
+ * 
+ * This is the central hub for customizing your app's look. 
+ * Change any value below to rebrand your "Firebase OS" instantly.
+ */
+
+export const themeConfig = {
+  // -------------------------------------------------------------------------
+  // 1. GLOBAL SETTINGS
+  // -------------------------------------------------------------------------
+  appName: 'Firebase OS.',
+
+  // Choose how the app starts: 'system', 'light', or 'dark'
+  defaultTheme: 'system' as 'system' | 'light' | 'dark',
+
+  // Show or hide the Sun/Moon toggle button in the top menu
+  showThemeToggle: true,
+
+  // Links to your logo and favicon (Can be a URL or a local path like /favicon.svg)
+  logoUrl: 'https://firebasestorage.googleapis.com/v0/b/fir-os-47863.firebasestorage.app/o/pub_files%2F1776321238933_favicon_smaller.png?alt=media&token=efecb55c-2456-4cbe-a20a-b86db54a1e55',
+  faviconUrl: 'https://firebasestorage.googleapis.com/v0/b/fir-os-47863.firebasestorage.app/o/pub_files%2F1776321238933_favicon_smaller.png?alt=media&token=efecb55c-2456-4cbe-a20a-b86db54a1e55',
+
+  // -------------------------------------------------------------------------
+  // 2. THEME COLORS
+  // -------------------------------------------------------------------------
+  colors: {
+    // --- DARK MODE ---
+    dark: {
+      background: '#07070f',     // Main background color
+      backgroundSecondary: '#0a0a18', // Gradient blending background color
+      foreground: '#f0eeff',     // Primary text color
+
+      accent: '#a78bfa',         // Main branding color (Purple)
+
+      panelBg: 'rgba(167, 139, 250, 0.05)',     // Card/Panel background
+      panelBorder: 'rgba(167, 139, 250, 0.15)', // Card/Panel borders
+
+      buttonGradient: ['#6d28d9', '#a78bfa'], // [Start, End]
+      secondaryButton: {
+        bg: 'rgba(255, 255, 255, 0.05)',
+        border: 'rgba(255, 255, 255, 0.1)',
+        text: '#f0eeff'
+      },
+      buttonHoverGradient: ['#7c3aed', '#c4b5fd'], // [Start, End]
+      glowColor: 'rgba(167, 139, 250, 0.40)', // Component shadow glow
+      notificationIconColor: '#a78bfa',
+      textGradient: ['#f0eeff', '#c4b5fd', '#a78bfa'], // Can add up to 6 colors
+      selectionBg: 'rgba(167, 139, 250, 0.40)',
+      selectionText: '#ffffff',
+    },
+
+    // --- LIGHT MODE ---
+    light: {
+      background: '#fcfaff',     // Main background color
+      backgroundSecondary: '#f7f3ff', // Gradient blending background color
+      foreground: '#1e1b4b',     // Primary text color
+
+      accent: '#7c3aed',         // Main branding color (Purple)
+      panelBg: 'rgba(255, 255, 255, 0.70)',   // Card/Panel background
+      panelBorder: 'rgba(124, 58, 237, 0.08)', // Card/Panel borders
+
+      buttonGradient: ['#5b21b6', '#a78bfa'], // [Start, End]
+      secondaryButton: {
+        bg: 'rgba(0, 0, 0, 0.03)',
+        border: 'rgba(0, 0, 0, 0.06)',
+        text: '#1e1b4b'
+      },
+      buttonHoverGradient: ['#6d28d9', '#a78bfa'], // [Start, End]
+      glowColor: 'rgba(124, 58, 237, 0.30)',
+      notificationIconColor: '#7c3aed',
+      textGradient: ['#2e1065', '#6d28d9', '#cdc1ff'], // [Start, Middle, End]
+      selectionBg: 'rgba(124, 58, 237, 0.30)',
+      selectionText: '#ffffff',
+    }
+  },
+
+  // -------------------------------------------------------------------------
+  // 3. FONT STYLES & TYPOGRAPHY
+  // -------------------------------------------------------------------------
+  fontFamily: 'Inter',
+
+  // -------------------------------------------------------------------------
+  // 6. COMPONENT STYLING & BORDER RADII (GLOBAL)
+  // -------------------------------------------------------------------------
+  cornerRounding: 'default' as 'default' | 'custom',
+  cornerRadii: {
+    buttonRadius: 0.75,     // 12px (xl)
+    inputRadius: 0.75,      // Form inputs
+    cardRadius: 1.5,        // 24px (2xl, 3xl)
+    modalRadius: 2.5,       // Global popups and main internal boxes
+  }
+};

package/src/index.css

@@ -0,0 +1,403 @@
+@import "tailwindcss";
+
+@theme {
+  --color-background: var(--bg-color);
+  --color-foreground: var(--fg-color);
+  --color-primary: var(--primary-color);
+  --color-primary-glow: var(--primary-glow);
+  --color-accent: var(--accent-color);
+
+  --radius-lg: var(--btn-radius, 0.75rem);
+  --radius-xl: var(--input-radius, 0.75rem);
+  --radius-2xl: var(--card-radius, 1.5rem);
+  --radius-3xl: var(--modal-radius, 2rem);
+}
+
+/* Hide number input spinners globally */
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
+@layer base {
+  :root {
+    color-scheme: dark;
+    /* DEFAULT: Dark Theme (Firebase OS) */
+    --bg-color: #07070f;
+    --bg-secondary-color: #0a0a18;
+    --bg-gradient: linear-gradient(135deg, var(--bg-color) 0%, var(--bg-secondary-color) 100%);
+    --bg-decorator-1: color-mix(in srgb, var(--accent-color) 12%, transparent);
+    --bg-decorator-2: color-mix(in srgb, var(--accent-color) 7%, transparent);
+
+    --fg-color: #f0eeff;
+    --primary-color: #1a1a2e;
+    --primary-glow: color-mix(in srgb, var(--accent-color) 25%, transparent);
+    --primary-glow-rgb: 140, 90, 255;
+    --accent-color: #a78bfa;
+    /* violet-400 */
+    --accent-deep: #7c3aed;
+    /* violet-600 */
+
+    --panel-bg: rgba(20, 15, 40, 0.45);
+    --panel-border: color-mix(in srgb, var(--accent-color) 15%, transparent);
+
+    --button-bg: linear-gradient(135deg, #6d28d9 0%, #a78bfa 100%);
+    --button-fg: #ffffff;
+    --button-hover: linear-gradient(135deg, #7c3aed 0%, #c4b5fd 100%);
+
+    --text-gradient: linear-gradient(135deg, #f0eeff 0%, #c4b5fd 40%, #a78bfa 100%);
+  }
+
+  [data-theme='light'] {
+    color-scheme: light;
+    --bg-color: #fcfaff;
+    --bg-secondary-color: #f7f3ff;
+    --bg-gradient: linear-gradient(135deg, var(--bg-color) 0%, var(--bg-secondary-color) 100%);
+    --bg-decorator-1: color-mix(in srgb, var(--accent-color) 6%, transparent);
+    --bg-decorator-2: color-mix(in srgb, var(--accent-color) 4%, transparent);
+
+    --fg-color: #1e1b4b;
+    --primary-color: #ffffff;
+    --primary-glow: color-mix(in srgb, var(--accent-color) 12%, transparent);
+    --primary-glow-rgb: 124, 58, 237;
+    --accent-color: #7c3aed;
+    /* violet-600 */
+    --accent-deep: #6d28d9;
+    /* violet-700 */
+
+    --panel-bg: rgba(255, 255, 255, 0.7);
+    --panel-border: color-mix(in srgb, var(--accent-color) 8%, transparent);
+
+    --button-bg: linear-gradient(135deg, #5b21b6 0%, #a78bfa 100%);
+    --button-fg: #ffffff;
+    --button-hover: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);
+
+    --text-gradient: linear-gradient(135deg, #2e1065 0%, #6d28d9 65%, #cdc1ff 100%);
+  }
+}
+
+body {
+  font-family: var(--font-family, 'Inter', system-ui, sans-serif);
+  font-size: 1rem;
+  line-height: var(--leading-normal, 1.5);
+  background: var(--bg-gradient);
+  color: var(--fg-color);
+  min-height: 100vh;
+  margin: 0;
+  overflow-x: hidden;
+}
+
+::selection {
+  background: var(--selection-bg, rgba(167, 139, 250, 0.4));
+  color: var(--selection-text, #ffffff);
+}
+
+h1,
+.text-5xl,
+.text-6xl,
+.text-7xl {
+  font-weight: var(--weight-h1, 800) !important;
+}
+
+h2,
+.text-3xl,
+.text-4xl {
+  font-weight: var(--weight-h2, 700) !important;
+}
+
+h3,
+.text-xl,
+.text-2xl {
+  font-weight: var(--weight-h3, 700) !important;
+}
+
+/* Animations & Glows */
+@keyframes float {
+  0% {
+    transform: translateY(0px);
+  }
+
+  50% {
+    transform: translateY(-8px);
+  }
+
+  100% {
+    transform: translateY(0px);
+  }
+}
+
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@layer utilities {
+  .glass-panel {
+    background: var(--panel-bg);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid var(--panel-border);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .glass-panel:hover {
+    border-color: var(--accent-color);
+    box-shadow: 0 8px 30px var(--glow-color, var(--primary-glow));
+  }
+
+  .glow-focus:focus-within {
+    box-shadow: 0 0 25px var(--glow-color, var(--primary-glow));
+    border-color: var(--accent-color);
+    transform: translateY(-2px);
+  }
+
+  .glow-hover {
+    transition: all 0.4s ease;
+  }
+
+  .glow-hover:hover {
+    box-shadow: 0 0 30px var(--glow-color, var(--primary-glow));
+    border-color: var(--accent-color);
+    transform: translateY(-2px);
+  }
+
+  input:focus,
+  textarea:focus,
+  select:focus {
+    box-shadow: 0 0 15px var(--glow-color, var(--primary-glow)) !important;
+    border-color: var(--accent-color) !important;
+    outline: none;
+  }
+
+  input.no-glow:focus,
+  textarea.no-glow:focus {
+    box-shadow: none !important;
+    border-color: transparent !important;
+    background-color: transparent !important;
+  }
+
+  .animate-float {
+    animation: float 6s ease-in-out infinite;
+  }
+
+  .bg-decorator-1 {
+    background: var(--bg-decorator-1);
+  }
+
+  .bg-decorator-2 {
+    background: var(--bg-decorator-2);
+  }
+
+  .btn-primary {
+    background: var(--button-bg);
+    color: var(--button-fg);
+    border-radius: var(--btn-radius, 0.75rem) !important;
+    transition: all 0.4s ease;
+  }
+
+  .btn-primary:hover {
+    background: var(--button-hover-bg, var(--button-hover));
+    box-shadow: 0 0 30px var(--glow-color, var(--primary-glow));
+    transform: translateY(-2px);
+  }
+
+  .btn-secondary {
+    background: var(--btn-sec-bg);
+    border: none;
+    box-shadow: inset 0 0 0 1px var(--btn-sec-border);
+    color: var(--btn-sec-text);
+    border-radius: var(--btn-radius, 0.75rem) !important;
+    transition: all 0.4s ease;
+  }
+
+  .btn-secondary:hover {
+    box-shadow: inset 0 0 0 1px var(--btn-sec-border), 0 0 20px var(--glow-color, var(--primary-glow));
+    transform: translateY(-2px);
+  }
+
+  .text-accent {
+    color: var(--accent-color);
+  }
+
+  .text-notification-icon {
+    color: var(--notification-icon-color);
+  }
+
+  .border-accent {
+    border-color: var(--accent-color);
+  }
+
+  .text-gradient {
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+    background-image: var(--text-gradient);
+  }
+
+  .accent-gradient {
+    background: linear-gradient(135deg, #6d28d9 0%, #a78bfa 100%);
+  }
+
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .styled-scrollbars-mini::-webkit-scrollbar {
+    height: 6px;
+    width: 6px;
+  }
+
+  .styled-scrollbars-mini::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .styled-scrollbars-mini::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--accent-color) 20%, transparent);
+    border-radius: 10px;
+  }
+
+  .styled-scrollbars-mini::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in srgb, var(--accent-color) 40%, transparent);
+  }
+
+  .styled-scrollbars-mini {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in srgb, var(--accent-color) 20%, transparent) transparent;
+  }
+}
+
+.react-international-phone {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.react-international-phone-input {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+  outline: none !important;
+  box-shadow: none !important;
+  color: var(--fg-color) !important;
+}
+
+.react-international-phone-input:focus,
+.react-international-phone-input:active,
+.react-international-phone-input:focus-visible,
+.react-international-phone-input:focus-within {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+  outline: none !important;
+  box-shadow: none !important;
+  color: var(--fg-color) !important;
+  -webkit-appearance: none !important;
+}
+
+.react-international-phone-country-selector {
+  position: relative !important;
+  overflow: visible !important;
+}
+
+.react-international-phone-country-selector-button {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  color: var(--fg-color) !important;
+  outline: none !important;
+}
+
+.react-international-phone-country-selector-button:focus,
+.react-international-phone-country-selector-button:active,
+.react-international-phone-country-selector-button:hover {
+  background: rgba(0, 0, 0, 0.02) !important;
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+.react-international-phone-country-selector-dropdown {
+  z-index: 2147483647 !important;
+  background: color-mix(in srgb, var(--bg-color) 95%, transparent) !important;
+  backdrop-filter: blur(20px) !important;
+  -webkit-backdrop-filter: blur(20px) !important;
+  border-radius: 1rem !important;
+  border: 1px solid var(--panel-border) !important;
+  box-shadow: 0 40px 80px -15px rgba(0, 0, 0, 0.5) !important;
+  color: var(--fg-color) !important;
+  max-height: 400px !important;
+  overflow-y: auto !important;
+  position: absolute !important;
+  top: calc(100% + 4px) !important;
+  left: 0 !important;
+}
+
+/* Scrollbar styling for dropdown */
+.react-international-phone-country-selector-dropdown::-webkit-scrollbar {
+  width: 6px !important;
+  height: 6px !important;
+}
+
+.react-international-phone-country-selector-dropdown::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--accent-color) 30%, transparent) !important;
+  border-radius: 4px !important;
+}
+
+.react-international-phone-country-selector-dropdown::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--accent-color) 60%, transparent) !important;
+}
+
+.react-international-phone-country-selector-dropdown * {
+  color: inherit !important;
+  outline: none !important;
+}
+
+.react-international-phone-country-selector-dropdown__list {
+  max-height: 380px !important;
+  overflow-y: auto !important;
+}
+
+.react-international-phone-country-selector-dropdown__list::-webkit-scrollbar {
+  width: 6px !important;
+}
+
+.react-international-phone-country-selector-dropdown__list::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--accent-color) 30%, transparent) !important;
+  border-radius: 4px !important;
+}
+
+.react-international-phone-country-selector-dropdown__list-item {
+  color: var(--fg-color) !important;
+  background: transparent !important;
+  border: 1px solid transparent !important;
+  border-radius: 0.5rem !important;
+  margin: 0.25rem !important;
+}
+
+.react-international-phone-country-selector-dropdown__list-item:hover,
+.react-international-phone-country-selector-dropdown__list-item--focused {
+  background-color: color-mix(in srgb, var(--fg-color) 5%, transparent) !important;
+  border-color: color-mix(in srgb, var(--accent-color) 20%, transparent) !important;
+}
+
+.react-international-phone-country-selector-dropdown__list-item-dial-code {
+  color: color-mix(in srgb, var(--fg-color) 50%, transparent) !important;
+  font-weight: 500 !important;
+}
+
+.react-international-phone-country-selector-dropdown__list-item-country-name {
+  color: var(--fg-color) !important;
+  font-weight: 600 !important;
+}