@fayz-ai/saas 0.1.6

package/src/shell/components/settings/index.ts

@@ -0,0 +1,10 @@
+export { SettingsPage } from './SettingsPage'
+export { CompanySettings } from './CompanySettings'
+export { UserProfile } from './UserProfile'
+export { SecuritySettings } from './SecuritySettings'
+export { BrandingSettings } from './BrandingSettings'
+export { LocationsOverview } from './LocationsOverview'
+export { HolidaysSettings } from './HolidaysSettings'
+export type { Holiday } from './HolidaysSettings'
+export { FieldRulesSettings } from './FieldRulesSettings'
+export { ConnectedFieldRulesSettings } from './ConnectedFieldRulesSettings'

package/src/shell/config/index.ts

@@ -0,0 +1,6 @@
+export { createTheme, applyTheme, getSystemPreference, resolveTheme, lightTheme, darkTheme } from './theme'
+export type { ThemeTokens, SemanticColors, UIPerceptionTokens, SaasTheme, ThemeRadius, ThemeDensity, ThemeShadow, ThemeFont, CreateThemeOptions } from './theme'
+export { ROLES, PERMISSIONS, hasPermission, requireRole } from './permissions'
+export type { Permission } from './permissions'
+export { default as saasPreset } from './tailwind-preset'
+export { default as saasCoreTailwindPreset } from './tailwind-preset'

package/src/shell/config/permissions.ts

@@ -0,0 +1,31 @@
+import type { MemberRole } from '../types/tenant'
+
+export type Permission =
+  | 'manage_team'
+  | 'manage_billing'
+  | 'manage_settings'
+  | 'view_analytics'
+  | 'manage_content'
+  | 'view_content'
+
+export const ROLES: MemberRole[] = ['owner', 'admin', 'manager', 'staff', 'viewer']
+
+export const PERMISSIONS: Record<MemberRole, Permission[]> = {
+  owner: ['manage_team', 'manage_billing', 'manage_settings', 'view_analytics', 'manage_content', 'view_content'],
+  admin: ['manage_team', 'manage_billing', 'manage_settings', 'view_analytics', 'manage_content', 'view_content'],
+  manager: ['view_analytics', 'manage_content', 'view_content'],
+  staff: ['manage_content', 'view_content'],
+  viewer: ['view_content'],
+}
+
+export function hasPermission(role: MemberRole, permission: Permission): boolean {
+  const allowed = PERMISSIONS[role]
+  return allowed ? allowed.includes(permission) : false
+}
+
+export function requireRole(currentRole: MemberRole, minimumRole: MemberRole): boolean {
+  const currentIndex = ROLES.indexOf(currentRole)
+  const minimumIndex = ROLES.indexOf(minimumRole)
+  if (currentIndex === -1 || minimumIndex === -1) return false
+  return currentIndex <= minimumIndex
+}

package/src/shell/config/tailwind-preset.ts

@@ -0,0 +1,164 @@
+import type { Config } from 'tailwindcss'
+
+const saasPreset: Partial<Config> = {
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        success: {
+          DEFAULT: 'hsl(var(--success))',
+          foreground: 'hsl(var(--success-foreground))',
+        },
+        warning: {
+          DEFAULT: 'hsl(var(--warning))',
+          foreground: 'hsl(var(--warning-foreground))',
+        },
+        info: {
+          DEFAULT: 'hsl(var(--info))',
+          foreground: 'hsl(var(--info-foreground))',
+        },
+        magic: {
+          DEFAULT: 'hsl(var(--magic))',
+          foreground: 'hsl(var(--magic-foreground))',
+        },
+        'info-soft': {
+          DEFAULT: 'hsl(var(--info-soft))',
+          foreground: 'hsl(var(--info-soft-foreground))',
+        },
+        'success-soft': {
+          DEFAULT: 'hsl(var(--success-soft))',
+          foreground: 'hsl(var(--success-soft-foreground))',
+        },
+        'warning-soft': {
+          DEFAULT: 'hsl(var(--warning-soft))',
+          foreground: 'hsl(var(--warning-soft-foreground))',
+        },
+        'destructive-soft': {
+          DEFAULT: 'hsl(var(--destructive-soft))',
+          foreground: 'hsl(var(--destructive-soft-foreground))',
+        },
+        'magic-soft': {
+          DEFAULT: 'hsl(var(--magic-soft))',
+          foreground: 'hsl(var(--magic-soft-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        // Layout surface tokens
+        sidebar: {
+          DEFAULT: 'hsl(var(--sidebar))',
+          foreground: 'hsl(var(--sidebar-foreground))',
+          border: 'hsl(var(--sidebar-border))',
+          accent: 'hsl(var(--sidebar-accent))',
+          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+          muted: 'hsl(var(--sidebar-muted))',
+        },
+        content: 'hsl(var(--content))',
+      },
+      borderRadius: {
+        button: 'var(--button-radius)',
+        card: 'var(--card-radius)',
+        input: 'var(--input-radius)',
+        modal: 'var(--modal-radius)',
+      },
+      fontFamily: {
+        sans: ['var(--font-family)'],
+        mono: ['var(--font-family-mono)'],
+      },
+      boxShadow: {
+        sm: 'var(--shadow-sm)',
+        md: 'var(--shadow-md)',
+        lg: 'var(--shadow-lg)',
+        button: 'var(--shadow-button)',
+        'button-primary': 'var(--shadow-button-primary)',
+        'button-inset': 'var(--shadow-button-inset)',
+      },
+      keyframes: {
+        'fade-in': {
+          from: { opacity: '0' },
+          to: { opacity: '1' },
+        },
+        'fade-out': {
+          from: { opacity: '1' },
+          to: { opacity: '0' },
+        },
+        'zoom-in': {
+          from: { transform: 'scale(0.95)', opacity: '0' },
+          to: { transform: 'scale(1)', opacity: '1' },
+        },
+        'zoom-out': {
+          from: { transform: 'scale(1)', opacity: '1' },
+          to: { transform: 'scale(0.95)', opacity: '0' },
+        },
+        'slide-in-from-top': {
+          from: { transform: 'translateY(-4px)', opacity: '0' },
+          to: { transform: 'translateY(0)', opacity: '1' },
+        },
+        'slide-in-from-bottom': {
+          from: { transform: 'translateY(4px)', opacity: '0' },
+          to: { transform: 'translateY(0)', opacity: '1' },
+        },
+        'slide-out-to-top': {
+          from: { transform: 'translateY(0)', opacity: '1' },
+          to: { transform: 'translateY(-4px)', opacity: '0' },
+        },
+        'page-in': {
+          from: { opacity: '0', transform: 'translateY(6px)' },
+          to: { opacity: '1', transform: 'translateY(0)' },
+        },
+        'slide-in-from-right': {
+          from: { transform: 'translateX(100%)' },
+          to: { transform: 'translateX(0)' },
+        },
+        'slide-out-to-right': {
+          from: { transform: 'translateX(0)' },
+          to: { transform: 'translateX(100%)' },
+        },
+      },
+      animation: {
+        'fade-in': 'fade-in 200ms ease-out',
+        'fade-out': 'fade-out 150ms ease-in',
+        'zoom-in': 'zoom-in 200ms ease-out',
+        'zoom-out': 'zoom-out 150ms ease-in',
+        'slide-in-from-top': 'slide-in-from-top 200ms ease-out',
+        'slide-in-from-bottom': 'slide-in-from-bottom 200ms ease-out',
+        'slide-out-to-top': 'slide-out-to-top 150ms ease-in',
+        'slide-in-from-right': 'slide-in-from-right 250ms cubic-bezier(0.16, 1, 0.3, 1)',
+        'slide-out-to-right': 'slide-out-to-right 200ms ease-in',
+        'page-in': 'page-in 250ms ease-out',
+      },
+    },
+  },
+}
+
+export default saasPreset

package/src/shell/config/theme/dark.ts

@@ -0,0 +1,63 @@
+import type { ThemeTokens } from './tokens'
+
+// "Sail midnight" — Polaris/Shopify Admin dark companion. No upstream reference;
+// designed from the same philosophy as the light theme: neutral grayscale chrome,
+// page bg darker than cards (mirrors the light "card floats on page" hierarchy),
+// brand surface is the highest-contrast color (here near-white instead of near-black).
+export const darkTheme: ThemeTokens = {
+  name: 'dark',
+  colors: {
+    primary: '0 0% 100%',                 // #ffffff — inverted brand surface
+    primaryForeground: '0 0% 10.2%',      // #1a1a1a
+    secondary: '0 0% 18.8%',              // #303030
+    secondaryForeground: '0 0% 89%',      // #e3e3e3
+    accent: '0 0% 22.7%',                 // #3a3a3a — hover/selected one step up from card
+    accentForeground: '0 0% 100%',
+    background: '0 0% 10.2%',             // #1a1a1a — page
+    foreground: '0 0% 89%',               // #e3e3e3
+    card: '0 0% 14.9%',                   // #262626 — one step lighter than page
+    cardForeground: '0 0% 89%',
+    muted: '0 0% 18.8%',                  // #303030
+    mutedForeground: '0 0% 64.7%',        // #a5a5a5
+    border: '0 0% 22.7%',                 // #3a3a3a — hairline visible on cards
+    input: '0 0% 32.2%',                  // #525252
+    ring: '217 100% 68.4%',               // #5b9bff — brighter blue for dark
+    popover: '0 0% 18.8%',                // popovers sit above cards
+    popoverForeground: '0 0% 89%',
+    destructive: '7 100% 44.9%',          // #e51c00
+    destructiveForeground: '0 0% 100%',
+    success: '156 71% 42.5%',             // #1fb87a
+    successForeground: '0 0% 0%',
+    warning: '41 100% 65.1%',             // #ffc94d
+    warningForeground: '0 0% 10.2%',
+
+    // Sidebar matches page; active item is a raised dark pill.
+    sidebar: '0 0% 10.2%',                // #1a1a1a
+    sidebarForeground: '0 0% 89%',
+    sidebarBorder: '0 0% 16.5%',          // #2a2a2a
+    sidebarAccent: '0 0% 18.8%',          // #303030
+    sidebarAccentForeground: '0 0% 100%',
+    sidebarMuted: '0 0% 64.7%',
+    content: '0 0% 10.2%',
+  },
+  perception: {
+    buttonRadius: '0.5rem',
+    cardRadius: '0.5rem',
+    inputRadius: '0.5rem',
+    modalRadius: '1rem',
+    fontFamily: 'Inter, ui-sans-serif, system-ui, -apple-system, sans-serif',
+    fontFamilyMono: 'JetBrains Mono, ui-monospace, SFMono-Regular, monospace',
+    // Shadows on dark are stronger or they disappear.
+    shadowSm: '0 1px 0 rgba(0, 0, 0, 0.4), 0 1px 3px 0 rgba(0, 0, 0, 0.35), 0 1px 2px -1px rgba(0, 0, 0, 0.35)',
+    shadowMd: '0 1px 1px -1px rgba(0, 0, 0, 0.5), 0 4px 8px -2px rgba(0, 0, 0, 0.6)',
+    shadowLg: '0 4px 12px -2px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.4)',
+    // Bevels — top highlight strengthens on near-white primary; on dark default
+    // buttons we lean on the inset-bottom shadow for depth.
+    shadowButton:
+      'inset 0 -1px 0 rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 0 rgba(0,0,0,0.30)',
+    shadowButtonPrimary:
+      'inset 0 -1px 0 rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.40), 0 1px 1.5px rgba(0,0,0,0.40)',
+    shadowButtonInset:
+      'inset 0 2px 1px -1px rgba(0,0,0,0.50), inset 0 0 0 1px rgba(0,0,0,0.20)',
+  },
+}

package/src/shell/config/theme/index.ts

@@ -0,0 +1,5 @@
+export type { ThemeTokens, SemanticColors, UIPerceptionTokens, SaasTheme, ThemeRadius, ThemeDensity, ThemeShadow, ThemeFont } from './tokens'
+export { lightTheme } from './light'
+export { darkTheme } from './dark'
+export { createTheme, applyTheme, getSystemPreference, resolveTheme } from './utils'
+export type { CreateThemeOptions } from './utils'

package/src/shell/config/theme/light.ts

@@ -0,0 +1,63 @@
+import type { ThemeTokens } from './tokens'
+
+// Polaris (Shopify Admin "Sail") light theme.
+// Page #f1f1f1, cards #ffffff, near-black brand #303030, light sidebar #ebebeb
+// with raised-white active items. Semantic accents only carry color.
+export const lightTheme: ThemeTokens = {
+  name: 'light',
+  colors: {
+    // Brand surface is near-black, not a saturated hue. Buttons get the bevel
+    // shadow below; flat color is only half the look.
+    primary: '0 0% 18.8%',                // #303030
+    primaryForeground: '0 0% 100%',       // #ffffff
+    secondary: '0 0% 96.9%',              // #f7f7f7
+    secondaryForeground: '0 0% 18.8%',    // #303030
+    accent: '0 0% 94.5%',                 // #f1f1f1 (hover/selected step)
+    accentForeground: '0 0% 18.8%',       // #303030
+    background: '0 0% 94.5%',             // #f1f1f1 — page is never white
+    foreground: '0 0% 18.8%',             // #303030
+    card: '0 0% 100%',                    // #ffffff
+    cardForeground: '0 0% 18.8%',         // #303030
+    muted: '0 0% 96.9%',                  // #f7f7f7
+    mutedForeground: '0 0% 38%',          // #616161
+    border: '0 0% 89%',                   // #e3e3e3 (hairline, not dark gray)
+    input: '0 0% 54.1%',                  // #8a8a8a — inputs need stronger border
+    ring: '214 100% 41.4%',               // #005bd3 — focus blue
+    popover: '0 0% 100%',
+    popoverForeground: '0 0% 18.8%',
+    destructive: '354 92% 41%',           // #c70a24
+    destructiveForeground: '0 0% 100%',
+    success: '167 95% 25.1%',             // #047b5d
+    successForeground: '0 0% 100%',
+    warning: '43 100% 50%',               // #ffb800
+    warningForeground: '0 0% 18.8%',
+
+    // Layout surfaces — light gray rail (Polaris "Sail"), raised white active items.
+    sidebar: '0 0% 92.2%',                // #ebebeb
+    sidebarForeground: '0 0% 18.8%',      // #303030
+    sidebarBorder: '0 0% 86.3%',          // #dcdcdc
+    sidebarAccent: '0 0% 100%',           // #ffffff — active item floats above rail
+    sidebarAccentForeground: '0 0% 18.8%',
+    sidebarMuted: '0 0% 38%',             // #616161
+    content: '0 0% 94.5%',                // #f1f1f1
+  },
+  perception: {
+    buttonRadius: '0.5rem',               // 8px (--p-border-radius-200)
+    cardRadius: '0.5rem',                 // 8px — Polaris cards are 8px, not 12px
+    inputRadius: '0.5rem',
+    modalRadius: '1rem',                  // 16px (--p-border-radius-400)
+    fontFamily: 'Inter, ui-sans-serif, system-ui, -apple-system, sans-serif',
+    fontFamilyMono: 'JetBrains Mono, ui-monospace, SFMono-Regular, monospace',
+    // Polaris hairline + a touch of bottom lift so cards visibly float on the gray page.
+    shadowSm: '0 1px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(26, 26, 26, 0.06), 0 1px 2px -1px rgba(26, 26, 26, 0.06)',
+    shadowMd: '0 1px 1px -1px rgba(26, 26, 26, 0.07), 0 4px 8px -2px rgba(26, 26, 26, 0.10)',
+    shadowLg: '0 4px 12px -2px rgba(26, 26, 26, 0.15), 0 1px 3px rgba(26, 26, 26, 0.08)',
+    // Inset bevels — Polaris signature. Buttons feel physical because of these.
+    shadowButton:
+      'inset 0 -1px 0 rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.50), 0 1px 0 rgba(0,0,0,0.05)',
+    shadowButtonPrimary:
+      'inset 0 -1px 0 rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.20), 0 1px 1.5px rgba(0,0,0,0.20)',
+    shadowButtonInset:
+      'inset 0 2px 1px -1px rgba(0,0,0,0.20), inset 0 0 0 1px rgba(0,0,0,0.05)',
+  },
+}

package/src/shell/config/theme/tokens.ts

@@ -0,0 +1,105 @@
+import type { FayzThemePresetId } from '@fayz-ai/ui'
+
+export interface ThemeTokens {
+  name: string
+  colors: SemanticColors
+  perception: UIPerceptionTokens
+}
+
+export interface SemanticColors {
+  primary: string
+  primaryForeground: string
+  secondary: string
+  secondaryForeground: string
+  accent: string
+  accentForeground: string
+  background: string
+  foreground: string
+  card: string
+  cardForeground: string
+  muted: string
+  mutedForeground: string
+  border: string
+  input: string
+  ring: string
+  popover: string
+  popoverForeground: string
+  destructive: string
+  destructiveForeground: string
+  success: string
+  successForeground: string
+  warning: string
+  warningForeground: string
+
+  // Layout surface colors
+  sidebar: string
+  sidebarForeground: string
+  sidebarBorder: string
+  sidebarAccent: string
+  sidebarAccentForeground: string
+  sidebarMuted: string
+  content: string
+}
+
+export interface UIPerceptionTokens {
+  buttonRadius: string
+  cardRadius: string
+  inputRadius: string
+  modalRadius: string
+  fontFamily: string
+  fontFamilyMono: string
+  shadowSm: string
+  shadowMd: string
+  shadowLg: string
+  shadowButton?: string
+  shadowButtonPrimary?: string
+  shadowButtonInset?: string
+  surfaceBackdropFilter?: string
+  modalBackground?: string
+  modalBorder?: string
+  modalOverlayBackground?: string
+  modalOverlayBackdropFilter?: string
+  modalShadow?: string
+  glassEdgeGradient?: string
+  glassPrimaryEdgeGradient?: string
+  glassInnerHighlight?: string
+  fieldBackground?: string
+  fieldBorder?: string
+  fieldShadow?: string
+  buttonBackground?: string
+  buttonBackgroundHover?: string
+  buttonBorder?: string
+  buttonPrimaryBackground?: string
+  buttonPrimaryBackgroundHover?: string
+  buttonPrimaryBorder?: string
+  buttonBackdropFilter?: string
+}
+
+// --- Friendly theme presets (non-technical) ---
+
+export type ThemeRadius = 'sharp' | 'soft' | 'round'
+export type ThemeDensity = 'compact' | 'comfortable' | 'spacious'
+export type ThemeShadow = 'none' | 'subtle' | 'medium' | 'bold'
+export type ThemeFont = 'system' | 'inter' | 'dm-sans' | 'poppins' | 'geist' | 'plus-jakarta' | 'outfit' | 'nunito' | 'source-sans' | 'raleway' | 'manrope'
+
+export interface SaasTheme {
+  name: string
+  preset?: FayzThemePresetId
+  brand: string
+  radius?: ThemeRadius
+  density?: ThemeDensity
+  shadow?: ThemeShadow
+  font?: ThemeFont
+  sidebar?: {
+    background: string
+    foreground: string
+    border?: string
+    accent: string
+    accentForeground: string
+    muted?: string
+  }
+  content?: {
+    background: string
+  }
+  colors?: Partial<SemanticColors>
+}