@aphexcms/cms-core 0.1.0 → 0.1.3

package/src/components/admin/fields/StringField.svelte

@@ -1,40 +0,0 @@
-<script lang="ts">
-	import { Input } from '@aphex/ui/shadcn/input';
-	import type { Field } from '../../../types/schemas.js';
-
-	interface Props {
-		field: Field;
-		value: any;
-		onUpdate: (value: any) => void;
-		validationClasses?: string;
-		onBlur?: (event: any) => void;
-		onFocus?: (event: any) => void;
-		readonly?: boolean;
-	}
-
-	let {
-		field,
-		value,
-		onUpdate,
-		validationClasses,
-		onBlur,
-		onFocus,
-		readonly = false
-	}: Props = $props();
-
-	function handleInputChange(event: Event) {
-		const target = event.target as HTMLInputElement;
-		onUpdate(target.value);
-	}
-</script>
-
-<Input
-	id={field.name}
-	value={value || ''}
-	placeholder={field.title}
-	oninput={handleInputChange}
-	onblur={onBlur}
-	onfocus={onFocus}
-	class={validationClasses}
-	disabled={readonly}
-/>

package/src/components/admin/fields/TextareaField.svelte

@@ -1,40 +0,0 @@
-<script lang="ts">
-	import { Textarea } from '@aphex/ui/shadcn/textarea';
-	import type { Field } from '../../../types/schemas.js';
-
-	interface Props {
-		field: Field;
-		value: any;
-		onUpdate: (value: any) => void;
-		validationClasses?: string;
-		onBlur?: (event: any) => void;
-		onFocus?: (event: any) => void;
-		readonly?: boolean;
-	}
-
-	let {
-		field,
-		value,
-		onUpdate,
-		validationClasses,
-		onBlur,
-		onFocus,
-		readonly = false
-	}: Props = $props();
-
-	function handleInputChange(event: Event) {
-		const target = event.target as HTMLTextAreaElement;
-		onUpdate(target.value);
-	}
-</script>
-
-<Textarea
-	id={field.name}
-	value={value || ''}
-	placeholder={field.title}
-	oninput={handleInputChange}
-	onblur={onBlur}
-	onfocus={onFocus}
-	class="min-h-[100px] {validationClasses}"
-	disabled={readonly}
-/>

package/src/components/fields/index.ts

@@ -1,9 +0,0 @@
-// Field components re-export
-export { default as StringField } from '../admin/fields/StringField.svelte';
-export { default as TextareaField } from '../admin/fields/TextareaField.svelte';
-export { default as NumberField } from '../admin/fields/NumberField.svelte';
-export { default as BooleanField } from '../admin/fields/BooleanField.svelte';
-export { default as SlugField } from '../admin/fields/SlugField.svelte';
-export { default as ImageField } from '../admin/fields/ImageField.svelte';
-export { default as ArrayField } from '../admin/fields/ArrayField.svelte';
-export { default as ReferenceField } from '../admin/fields/ReferenceField.svelte';

package/src/components/index.ts

@@ -1,16 +0,0 @@
-// Aphex CMS Components
-// All admin interface components -- is this being used?
-
-// Main admin app
-export { default as AdminApp } from './AdminApp.svelte';
-
-// Sidebar
-export { default as Sidebar } from './layout/Sidebar.svelte';
-
-// Admin components (will be migrated from your current structure)
-export { default as DocumentEditor } from './admin/DocumentEditor.svelte';
-export { default as DocumentTypesList } from './admin/DocumentTypesList.svelte';
-export { default as SchemaField } from './admin/SchemaField.svelte';
-
-// Field components
-export * from './fields/index.js';

package/src/components/layout/OrganizationSwitcher.svelte

@@ -1,218 +0,0 @@
-<script lang="ts">
-	import { organizations } from '../../api/index.js';
-	import { invalidateAll, goto } from '$app/navigation';
-	import { page } from '$app/state';
-	import { SvelteURLSearchParams } from 'svelte/reactivity';
-	import {
-		DropdownMenu,
-		DropdownMenuContent,
-		DropdownMenuItem,
-		DropdownMenuLabel,
-		DropdownMenuSeparator,
-		DropdownMenuTrigger
-	} from '@aphex/ui/shadcn/dropdown-menu';
-	import {
-		SidebarMenu,
-		SidebarMenuItem,
-		SidebarMenuButton,
-		useSidebar
-	} from '@aphex/ui/shadcn/sidebar';
-	import type { SidebarOrganization } from '../../types/sidebar.js';
-
-	type Props = {
-		organizations?: SidebarOrganization[];
-		activeOrganization?: SidebarOrganization;
-		canCreateOrganization?: boolean;
-		onOpenChange?: (open: boolean) => void;
-	};
-
-	let {
-		organizations: orgs = [],
-		activeOrganization,
-		canCreateOrganization = false,
-		onOpenChange
-	}: Props = $props();
-
-	const sidebar = useSidebar();
-
-	let isSwitching = $state(false);
-
-	// Set initial orgId in URL if not present
-	$effect(() => {
-		if (activeOrganization && !page.url.searchParams.has('orgId')) {
-			const params = new SvelteURLSearchParams(page.url.searchParams);
-			params.set('orgId', activeOrganization.id);
-			goto(`${page.url.pathname}?${params.toString()}`, { replaceState: true });
-		}
-	});
-
-	async function handleSwitchOrganization(org: SidebarOrganization) {
-		if (org.id === activeOrganization?.id) return;
-
-		isSwitching = true;
-		try {
-			// Switch organization on the server
-			await organizations.switch({ organizationId: org.id });
-
-			// Update URL with new orgId and clear editor state
-			const params = new SvelteURLSearchParams();
-			params.set('orgId', org.id);
-
-			// Preserve docType if present, but clear editor-specific params
-			const currentDocType = page.url.searchParams.get('docType');
-			if (currentDocType) {
-				params.set('docType', currentDocType);
-			}
-
-			await goto(`${page.url.pathname}?${params.toString()}`, { replaceState: false });
-
-			// Invalidate all data to refetch with new organization context
-			await invalidateAll();
-		} catch (error) {
-			console.error('Failed to switch organization:', error);
-			// TODO: Show error toast
-		} finally {
-			isSwitching = false;
-		}
-	}
-
-	function getOrganizationInitials(name: string): string {
-		return name
-			.split(' ')
-			.map((word) => word[0])
-			.join('')
-			.toUpperCase()
-			.slice(0, 2);
-	}
-
-	function getRoleLabel(role: string): string {
-		return role.charAt(0).toUpperCase() + role.slice(1);
-	}
-</script>
-
-<SidebarMenu>
-	<SidebarMenuItem>
-		<DropdownMenu {onOpenChange}>
-			<DropdownMenuTrigger>
-				{#snippet child({ props })}
-					<SidebarMenuButton
-						{...props}
-						size="lg"
-						class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-						disabled={isSwitching}
-					>
-						{#if activeOrganization}
-							<div
-								class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg text-sm font-semibold"
-							>
-								{getOrganizationInitials(activeOrganization.name)}
-							</div>
-							<div class="grid flex-1 text-left text-sm leading-tight">
-								<span class="truncate font-medium">
-									{activeOrganization.name}
-								</span>
-								<span class="text-muted-foreground truncate text-xs">
-									{getRoleLabel(activeOrganization.role)}
-								</span>
-							</div>
-						{:else}
-							<div
-								class="bg-muted flex aspect-square size-8 items-center justify-center rounded-lg"
-							>
-								<span class="text-muted-foreground text-xs">?</span>
-							</div>
-							<span class="text-muted-foreground">No organization</span>
-						{/if}
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							width="16"
-							height="16"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							class="ml-auto"
-						>
-							<path d="m7 15 5 5 5-5" />
-							<path d="m7 9 5-5 5 5" />
-						</svg>
-					</SidebarMenuButton>
-				{/snippet}
-			</DropdownMenuTrigger>
-			<DropdownMenuContent
-				class="w-[--bits-dropdown-menu-anchor-width] min-w-56 rounded-lg"
-				align="start"
-				side={sidebar.isMobile ? 'bottom' : 'right'}
-				sideOffset={4}
-			>
-				<DropdownMenuLabel class="text-muted-foreground text-xs">Organizations</DropdownMenuLabel>
-				{#each orgs as org, index (org.id)}
-					<DropdownMenuItem
-						onSelect={() => handleSwitchOrganization(org)}
-						class="gap-2 p-2"
-						disabled={isSwitching || org.id === activeOrganization?.id}
-					>
-						<div
-							class="flex size-6 items-center justify-center rounded-md border text-xs font-semibold"
-						>
-							{getOrganizationInitials(org.name)}
-						</div>
-						<div class="flex flex-1 flex-col">
-							<span class="text-sm">{org.name}</span>
-							<span class="text-muted-foreground text-xs">{getRoleLabel(org.role)}</span>
-						</div>
-						{#if org.id === activeOrganization?.id}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								width="16"
-								height="16"
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								class="text-primary"
-							>
-								<path d="M20 6 9 17l-5-5" />
-							</svg>
-						{/if}
-					</DropdownMenuItem>
-				{/each}
-				<DropdownMenuSeparator />
-				<DropdownMenuItem onSelect={() => goto('/admin/organizations')} class="gap-2 p-2">
-					<button class="text-muted-foreground font-medium">View all organizations</button>
-				</DropdownMenuItem>
-				{#if canCreateOrganization}
-					<DropdownMenuSeparator />
-					<DropdownMenuItem class="gap-2 p-2">
-						<div class="flex size-6 items-center justify-center rounded-md border bg-transparent">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								width="16"
-								height="16"
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							>
-								<path d="M5 12h14" />
-								<path d="M12 5v14" />
-							</svg>
-						</div>
-						<button
-							class="text-muted-foreground font-medium"
-							onclick={() => {
-								goto('/admin/organizations?action=create');
-							}}>Create organization</button
-						>
-					</DropdownMenuItem>
-				{/if}
-			</DropdownMenuContent>
-		</DropdownMenu>
-	</SidebarMenuItem>
-</SidebarMenu>

package/src/components/layout/Sidebar.svelte

@@ -1,88 +0,0 @@
-<script lang="ts">
-	import { SidebarProvider, SidebarInset, SidebarTrigger } from '@aphex/ui/shadcn/sidebar';
-	import { Separator } from '@aphex/ui/shadcn/separator';
-	import { Button } from '@aphex/ui/shadcn/button';
-	import { ModeWatcher } from 'mode-watcher';
-	import { Sun, Moon } from 'lucide-svelte';
-	import { toggleMode } from 'mode-watcher';
-	import { page } from '$app/state';
-	import type { SidebarData } from '../../types/sidebar.js';
-	import AppSidebar from './sidebar/AppSidebar.svelte';
-	import { activeTabState } from '$lib/stores/activeTab.svelte.js';
-
-	type Props = {
-		data: SidebarData;
-		onSignOut?: () => void | Promise<void>;
-		children: any;
-		enableGraphiQL?: boolean;
-	};
-
-	let { data, onSignOut, children, enableGraphiQL = false }: Props = $props();
-
-	// Only show tabs on the main /admin page
-	const showTabs = $derived(page.url.pathname === '/admin');
-</script>
-
-<ModeWatcher />
-<SidebarProvider class="h-screen">
-	<AppSidebar {data} {onSignOut} />
-	<SidebarInset class="flex h-full flex-col">
-		<header
-			class="flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12"
-		>
-			<div class="flex w-full items-center px-4" class:justify-between={showTabs}>
-				<!-- Left: Trigger and Separator -->
-				<div class="flex items-center gap-2">
-					<SidebarTrigger class="-ml-1" />
-					<Separator orientation="vertical" class="mr-2 h-4" />
-				</div>
-
-				<!-- Center: Structure/Vision Tabs (only on /admin page) -->
-				{#if showTabs && activeTabState}
-					<div
-						class="bg-muted text-muted-foreground mx-auto inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]"
-					>
-						<button
-							onclick={() => {
-								if (activeTabState) activeTabState.value = 'structure';
-							}}
-							class="{activeTabState.value === 'structure'
-								? 'bg-background text-foreground shadow'
-								: 'text-muted-foreground'} ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-						>
-							Structure
-						</button>
-						{#if enableGraphiQL}
-							<button
-								onclick={() => {
-									if (activeTabState) activeTabState.value = 'vision';
-								}}
-								class="{activeTabState.value === 'vision'
-									? 'bg-background text-foreground shadow'
-									: 'text-muted-foreground'} ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-							>
-								Vision
-							</button>
-						{/if}
-					</div>
-				{/if}
-
-				<!-- Right: Theme Toggle -->
-				<div class:ml-auto={!showTabs}>
-					<Button onclick={toggleMode} variant="outline" size="icon">
-						<Sun
-							class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
-						/>
-						<Moon
-							class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
-						/>
-						<span class="sr-only">Toggle theme</span>
-					</Button>
-				</div>
-			</div>
-		</header>
-		<main class="flex flex-1 flex-col overflow-hidden pt-0">
-			{@render children()}
-		</main>
-	</SidebarInset>
-</SidebarProvider>

package/src/components/layout/sidebar/AppSidebar.svelte

@@ -1,63 +0,0 @@
-<script lang="ts">
-	import {
-		Sidebar,
-		SidebarContent,
-		SidebarFooter,
-		SidebarHeader,
-		SidebarRail
-	} from '@aphex/ui/shadcn/sidebar';
-	import OrganizationSwitcher from '../OrganizationSwitcher.svelte';
-	import NavMain from './NavMain.svelte';
-	import NavUser from './NavUser.svelte';
-	import type { SidebarData } from '../../../types/sidebar.js';
-	import type { ComponentProps } from 'svelte';
-
-	type Props = ComponentProps<typeof Sidebar> & {
-		data: SidebarData;
-		onSignOut?: () => void | Promise<void>;
-	};
-
-	let { data, onSignOut, ...restProps }: Props = $props();
-
-	// Convert navItems to the format expected by NavMain
-	const navMainItems = $derived(
-		data?.navItems?.map((item) => ({
-			title: item.label,
-			url: item.href,
-			icon: undefined, // We'll keep icons simple for now
-			isActive: false
-		})) || [
-			{
-				title: 'Content',
-				url: '/admin',
-				icon: undefined,
-				isActive: false
-			}
-		]
-	);
-</script>
-
-<Sidebar collapsible="icon" {...restProps}>
-	<SidebarHeader>
-		<!-- Organization Switcher -->
-		{#if data?.organizations && data.organizations.length > 0}
-			<OrganizationSwitcher
-				organizations={data.organizations}
-				activeOrganization={data.activeOrganization}
-				canCreateOrganization={data.user?.role === 'super_admin'}
-			/>
-		{/if}
-	</SidebarHeader>
-
-	<SidebarContent>
-		<NavMain items={navMainItems} />
-	</SidebarContent>
-
-	<SidebarFooter>
-		{#if data?.user}
-			<NavUser user={data.user} {onSignOut} />
-		{/if}
-	</SidebarFooter>
-
-	<SidebarRail />
-</Sidebar>

package/src/components/layout/sidebar/NavMain.svelte

@@ -1,95 +0,0 @@
-<script lang="ts">
-	import { goto } from '$app/navigation';
-	import { page } from '$app/state';
-	import * as Collapsible from '@aphex/ui/shadcn/collapsible';
-	import {
-		SidebarGroup,
-		SidebarGroupLabel,
-		SidebarMenu,
-		SidebarMenuItem,
-		SidebarMenuButton,
-		SidebarMenuSub,
-		SidebarMenuSubItem,
-		SidebarMenuSubButton
-	} from '@aphex/ui/shadcn/sidebar';
-	import { ChevronRight, type Icon as IconType } from 'lucide-svelte';
-
-	type NavItem = {
-		title: string;
-		url: string;
-		icon?: typeof IconType;
-		isActive?: boolean;
-		items?: {
-			title: string;
-			url: string;
-		}[];
-	};
-
-	type Props = {
-		items: NavItem[];
-		label?: string;
-	};
-
-	let { items, label = 'Content' }: Props = $props();
-
-	let currentPath = $derived(page.url.pathname);
-</script>
-
-<SidebarGroup>
-	<SidebarGroupLabel>{label}</SidebarGroupLabel>
-	<SidebarMenu>
-		{#each items as item (item.title)}
-			{#if item.items && item.items.length > 0}
-				<Collapsible.Root open={item.isActive} class="group/collapsible">
-					{#snippet child({ props })}
-						<SidebarMenuItem {...props}>
-							<Collapsible.Trigger>
-								{#snippet child({ props })}
-									<SidebarMenuButton {...props} tooltipContent={item.title}>
-										{#if item.icon}
-											{@const Icon = item.icon}
-											<Icon class="h-4 w-4" />
-										{/if}
-										<span>{item.title}</span>
-										<ChevronRight
-											class="ml-auto h-4 w-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
-										/>
-									</SidebarMenuButton>
-								{/snippet}
-							</Collapsible.Trigger>
-							<Collapsible.Content>
-								<SidebarMenuSub>
-									{#each item.items as subItem (subItem.title)}
-										<SidebarMenuSubItem>
-											<SidebarMenuSubButton>
-												{#snippet child({ props })}
-													<a href={subItem.url} {...props}>
-														<span>{subItem.title}</span>
-													</a>
-												{/snippet}
-											</SidebarMenuSubButton>
-										</SidebarMenuSubItem>
-									{/each}
-								</SidebarMenuSub>
-							</Collapsible.Content>
-						</SidebarMenuItem>
-					{/snippet}
-				</Collapsible.Root>
-			{:else}
-				<SidebarMenuItem>
-					<SidebarMenuButton
-						onclick={() => goto(item.url)}
-						isActive={currentPath.startsWith(item.url)}
-						tooltipContent={item.title}
-					>
-						{#if item.icon}
-							{@const Icon = item.icon}
-							<Icon class="h-4 w-4" />
-						{/if}
-						<span>{item.title}</span>
-					</SidebarMenuButton>
-				</SidebarMenuItem>
-			{/if}
-		{/each}
-	</SidebarMenu>
-</SidebarGroup>

package/src/components/layout/sidebar/NavSecondary.svelte

@@ -1,69 +0,0 @@
-<script lang="ts">
-	import {
-		SidebarGroup,
-		SidebarGroupContent,
-		SidebarMenu,
-		SidebarMenuItem,
-		SidebarMenuButton
-	} from '@aphex/ui/shadcn/sidebar';
-	import { Sun, Moon } from 'lucide-svelte';
-	import { toggleMode } from 'mode-watcher';
-
-	type Props = {
-		enableGraphiQL?: boolean;
-		activeTab?: 'structure' | 'vision';
-		onTabChange?: (tab: 'structure' | 'vision') => void;
-	};
-
-	let { enableGraphiQL = false, activeTab = $bindable('structure'), onTabChange }: Props = $props();
-
-	function handleTabClick(tab: 'structure' | 'vision') {
-		activeTab = tab;
-		if (onTabChange) {
-			onTabChange(tab);
-		}
-	}
-</script>
-
-<SidebarGroup class="mt-auto">
-	<SidebarGroupContent>
-		<SidebarMenu>
-			<!-- Structure Tab -->
-			<SidebarMenuItem>
-				<SidebarMenuButton
-					onclick={() => handleTabClick('structure')}
-					isActive={activeTab === 'structure'}
-					tooltipContent="Structure"
-					size="sm"
-				>
-					<span>Structure</span>
-				</SidebarMenuButton>
-			</SidebarMenuItem>
-
-			<!-- Vision Tab (if GraphiQL is enabled) -->
-			{#if enableGraphiQL}
-				<SidebarMenuItem>
-					<SidebarMenuButton
-						onclick={() => handleTabClick('vision')}
-						isActive={activeTab === 'vision'}
-						tooltipContent="Vision"
-						size="sm"
-					>
-						<span>Vision</span>
-					</SidebarMenuButton>
-				</SidebarMenuItem>
-			{/if}
-
-			<!-- Theme Toggle -->
-			<SidebarMenuItem>
-				<SidebarMenuButton onclick={toggleMode} tooltipContent="Toggle theme" size="sm">
-					<Sun class="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-					<Moon
-						class="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
-					/>
-					<span>Theme</span>
-				</SidebarMenuButton>
-			</SidebarMenuItem>
-		</SidebarMenu>
-	</SidebarGroupContent>
-</SidebarGroup>