includio-cms 0.1.4 → 0.5.0

package/dist/admin/components/layout/layout-renderer.svelte

@@ -0,0 +1,352 @@
+<script lang="ts">
+	import type { LayoutNode } from '../../../types/layout.js';
+	import type { Field } from '../../../types/fields.js';
+	import type { SuperForm } from 'sveltekit-superforms';
+	import { isLayoutLeaf, isLayoutBranch } from '../../../types/layout.js';
+	import FieldRenderer from '../fields/field-renderer.svelte';
+	import * as Accordion from '../../../components/ui/accordion/index.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
+	import { cn } from '../../../utils.js';
+
+	type Props = {
+		nodes: LayoutNode[];
+		fields: Field[];
+		form: SuperForm<Record<string, unknown>>;
+		focusedPath?: string | null;
+		flashingPath?: string | null;
+		depth?: number;
+	};
+
+	let {
+		nodes,
+		fields,
+		form,
+		focusedPath = null,
+		flashingPath = null,
+		depth = 0
+	}: Props = $props();
+
+	const interfaceLanguage = useInterfaceLanguage();
+
+	const fieldMap = $derived(new Map(fields.map((f) => [f.slug, f])));
+
+	// Compact field types for autoGrid
+	const compactFieldTypes = new Set(['number', 'select', 'boolean', 'date', 'datetime', 'radio']);
+
+	function isCompactField(field: Field): boolean {
+		return compactFieldTypes.has(field.type);
+	}
+
+	function isFlashing(fieldPath: string): boolean {
+		return flashingPath === fieldPath;
+	}
+
+	function getLabel(node: LayoutNode): string {
+		if ('label' in node && node.label) {
+			return getLocalizedLabel(node.label, interfaceLanguage.current) || '';
+		}
+		return '';
+	}
+</script>
+
+{#each nodes as node (node)}
+	{#if node.type === 'section'}
+		<section aria-label={getLabel(node)} class="layout-section">
+			<div class="layout-section-label">
+				{getLabel(node)}
+			</div>
+			{#if isLayoutLeaf(node)}
+				<div class="layout-fields-stack">
+					{#each node.fields as slug (slug)}
+						{@const field = fieldMap.get(slug)}
+						{#if field}
+							<div
+								data-field-path={slug}
+								class={cn(
+									'rounded-lg transition-all duration-500',
+									isFlashing(slug) && 'ring-2 ring-primary ring-offset-2 bg-primary/5 animate-in fade-in'
+								)}
+							>
+								<FieldRenderer {field} {form} path={slug} {focusedPath} {flashingPath} />
+							</div>
+						{/if}
+					{/each}
+				</div>
+			{/if}
+			{#if isLayoutBranch(node)}
+				<svelte:self
+					nodes={node.children}
+					{fields}
+					{form}
+					{focusedPath}
+					{flashingPath}
+					depth={depth + 1}
+				/>
+			{/if}
+		</section>
+
+	{:else if node.type === 'columns'}
+		<div
+			class="layout-columns"
+			style="grid-template-columns: {node.ratio};"
+		>
+			{#if isLayoutBranch(node)}
+				{#each node.children as child (child)}
+					<div class="layout-column">
+						<svelte:self
+							nodes={[child]}
+							{fields}
+							{form}
+							{focusedPath}
+							{flashingPath}
+							depth={depth + 1}
+						/>
+					</div>
+				{/each}
+			{/if}
+		</div>
+
+	{:else if node.type === 'card'}
+		<div role="group" aria-label={getLabel(node)} class="layout-card">
+			<div class="layout-card-header">
+				{getLabel(node)}
+			</div>
+			<div class="layout-card-body">
+				{#if isLayoutLeaf(node) && node.autoGrid}
+					<div class="layout-auto-grid">
+						{#each node.fields as slug (slug)}
+							{@const field = fieldMap.get(slug)}
+							{#if field}
+								<div
+									data-field-path={slug}
+									class={cn(
+										'rounded-lg transition-all duration-500',
+										!isCompactField(field) && 'auto-grid-full',
+										isFlashing(slug) && 'ring-2 ring-primary ring-offset-2 bg-primary/5 animate-in fade-in'
+									)}
+								>
+									<FieldRenderer {field} {form} path={slug} {focusedPath} {flashingPath} />
+								</div>
+							{/if}
+						{/each}
+					</div>
+				{:else if isLayoutLeaf(node)}
+					<div class="layout-fields-stack">
+						{#each node.fields as slug (slug)}
+							{@const field = fieldMap.get(slug)}
+							{#if field}
+								<div
+									data-field-path={slug}
+									class={cn(
+										'rounded-lg transition-all duration-500',
+										isFlashing(slug) && 'ring-2 ring-primary ring-offset-2 bg-primary/5 animate-in fade-in'
+									)}
+								>
+									<FieldRenderer {field} {form} path={slug} {focusedPath} {flashingPath} />
+								</div>
+							{/if}
+						{/each}
+					</div>
+				{/if}
+				{#if isLayoutBranch(node)}
+					<svelte:self
+						nodes={node.children}
+						{fields}
+						{form}
+						{focusedPath}
+						{flashingPath}
+						depth={depth + 1}
+					/>
+				{/if}
+			</div>
+		</div>
+
+	{:else if node.type === 'accordion'}
+		<div class="layout-accordion-wrapper">
+			<Accordion.Root type="single" value={node.defaultOpen ? 'item' : ''}>
+				<Accordion.Item value="item" class="border-none">
+					<Accordion.Trigger class="layout-accordion-trigger">
+						{getLabel(node)}
+					</Accordion.Trigger>
+					<Accordion.Content>
+						{#if isLayoutLeaf(node)}
+							<div class="layout-fields-stack">
+								{#each node.fields as slug (slug)}
+									{@const field = fieldMap.get(slug)}
+									{#if field}
+										<div
+											data-field-path={slug}
+											class={cn(
+												'rounded-lg transition-all duration-500',
+												isFlashing(slug) && 'ring-2 ring-primary ring-offset-2 bg-primary/5 animate-in fade-in'
+											)}
+										>
+											<FieldRenderer {field} {form} path={slug} {focusedPath} {flashingPath} />
+										</div>
+									{/if}
+								{/each}
+							</div>
+						{/if}
+						{#if isLayoutBranch(node)}
+							<svelte:self
+								nodes={node.children}
+								{fields}
+								{form}
+								{focusedPath}
+								{flashingPath}
+								depth={depth + 1}
+							/>
+						{/if}
+					</Accordion.Content>
+				</Accordion.Item>
+			</Accordion.Root>
+		</div>
+
+	{:else if node.type === 'stack'}
+		<div class="layout-stack">
+			{#if isLayoutLeaf(node)}
+				{#each node.fields as slug (slug)}
+					{@const field = fieldMap.get(slug)}
+					{#if field}
+						<div
+							data-field-path={slug}
+							class={cn(
+								'rounded-lg transition-all duration-500',
+								isFlashing(slug) && 'ring-2 ring-primary ring-offset-2 bg-primary/5 animate-in fade-in'
+							)}
+						>
+							<FieldRenderer {field} {form} path={slug} {focusedPath} {flashingPath} />
+						</div>
+					{/if}
+				{/each}
+			{/if}
+			{#if isLayoutBranch(node)}
+				<svelte:self
+					nodes={node.children}
+					{fields}
+					{form}
+					{focusedPath}
+					{flashingPath}
+					depth={depth + 1}
+				/>
+			{/if}
+		</div>
+	{/if}
+{/each}
+
+<style>
+	/* ═══════════ SECTION ═══════════ */
+	.layout-section {
+		background: var(--card);
+		border: 1px solid var(--border);
+		border-radius: 12px;
+		box-shadow: 0 1px 2px rgba(43, 37, 88, 0.04);
+		overflow: hidden;
+		margin-bottom: 20px;
+		padding: 20px 24px;
+	}
+
+	.layout-section-label {
+		display: inline-flex;
+		align-items: center;
+		gap: 5px;
+		font-size: 10px;
+		font-weight: 700;
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
+		color: var(--muted-foreground);
+		margin-bottom: 12px;
+	}
+
+	/* ═══════════ COLUMNS ═══════════ */
+	.layout-columns {
+		display: grid;
+		gap: 20px;
+		margin-bottom: 20px;
+		align-items: start;
+	}
+
+	.layout-column {
+		min-width: 0;
+	}
+
+	/* ═══════════ CARD ═══════════ */
+	.layout-card {
+		background: var(--card);
+		border: 1px solid var(--border);
+		border-radius: 12px;
+		box-shadow: 0 1px 2px rgba(43, 37, 88, 0.04);
+		overflow: hidden;
+		margin-bottom: 20px;
+	}
+
+	.layout-card-header {
+		font-size: 13px;
+		font-weight: 700;
+		color: var(--foreground);
+		padding: 12px 16px 0;
+	}
+
+	.layout-card-body {
+		padding: 10px 16px 16px;
+	}
+
+	/* ═══════════ ACCORDION ═══════════ */
+	.layout-accordion-wrapper {
+		background: var(--card);
+		border: 1px solid var(--border);
+		border-radius: 12px;
+		box-shadow: 0 1px 2px rgba(43, 37, 88, 0.04);
+		overflow: hidden;
+		margin-bottom: 20px;
+		padding: 0 16px;
+	}
+
+	.layout-accordion-wrapper :global(.layout-accordion-trigger) {
+		font-size: 13px;
+		font-weight: 700;
+	}
+
+	/* ═══════════ STACK ═══════════ */
+	.layout-stack {
+		display: flex;
+		flex-direction: column;
+		gap: 0;
+	}
+
+	/* ═══════════ FIELDS ═══════════ */
+	.layout-fields-stack {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+	}
+
+	/* ═══════════ AUTO-GRID ═══════════ */
+	.layout-auto-grid {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 14px;
+	}
+
+	.auto-grid-full {
+		grid-column: 1 / -1;
+	}
+
+	/* ═══════════ RESPONSIVE ═══════════ */
+	@media (max-width: 768px) {
+		.layout-columns {
+			grid-template-columns: 1fr !important;
+		}
+
+		.layout-auto-grid {
+			grid-template-columns: 1fr;
+		}
+	}
+
+	@media (max-width: 900px) {
+		.layout-section {
+			padding: 16px;
+		}
+	}
+</style>

package/dist/admin/components/layout/layout-renderer.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { LayoutNode } from '../../../types/layout.js';
+import type { Field } from '../../../types/fields.js';
+import type { SuperForm } from 'sveltekit-superforms';
+type Props = {
+    nodes: LayoutNode[];
+    fields: Field[];
+    form: SuperForm<Record<string, unknown>>;
+    focusedPath?: string | null;
+    flashingPath?: string | null;
+    depth?: number;
+};
+declare const LayoutRenderer: import("svelte").Component<Props, {}, "">;
+type LayoutRenderer = ReturnType<typeof LayoutRenderer>;
+export default LayoutRenderer;

package/dist/admin/components/layout/nav-breadcrumbs.svelte

@@ -6,19 +6,19 @@
 </script>
 
 <Breadcrumb.Root>
-	<Breadcrumb.List>
+	<Breadcrumb.List class="text-[13px] gap-2">
 		{#each breadcrumbs.state as crumb, i}
 			<Breadcrumb.Item>
 				{#if crumb.href && i < breadcrumbs.state.length - 1}
-					<Breadcrumb.Link class="text-base font-medium" href={crumb.href}
+					<Breadcrumb.Link class="font-medium" href={crumb.href}
 						>{crumb.label}</Breadcrumb.Link
 					>
 				{:else}
-					<Breadcrumb.Page class="text-base font-medium">{crumb.label}</Breadcrumb.Page>
+					<Breadcrumb.Page class="font-semibold max-w-60 truncate">{crumb.label}</Breadcrumb.Page>
 				{/if}
 			</Breadcrumb.Item>
 			{#if i < breadcrumbs.state.length - 1}
-				<Breadcrumb.Separator />
+				<Breadcrumb.Separator>/</Breadcrumb.Separator>
 			{/if}
 		{/each}
 	</Breadcrumb.List>

package/dist/admin/components/layout/nav-collections.svelte

@@ -14,45 +14,74 @@
 	function isActive(url: string) {
 		return page.url.pathname.startsWith(url);
 	}
+
+	async function loadCollections() {
+		const collections = await remotes.getCollections();
+		const counts = await Promise.all(
+			collections.map((c: { slug: string }) =>
+				remotes
+					.getRawEntries({ slug: c.slug, limit: 1, offset: 0 })
+					.then((r: { total: number }) => r.total)
+					.catch(() => 0)
+			)
+		);
+		return collections.map((c: any, i: number) => ({ ...c, entryCount: counts[i] }));
+	}
 </script>
 
-<Sidebar.Group class="group-data-[collapsible=icon]:hidden">
-	<Sidebar.GroupLabel>{sidebarLang[interfaceLanguage.current].collections.title}</Sidebar.GroupLabel>
-	<Sidebar.Menu>
-		{#await remotes.getCollections()}
+{#await loadCollections()}
+	<Sidebar.Group class="border-sidebar-border mt-1 border-t px-0 pt-2 pb-1">
+		<Sidebar.GroupLabel
+			>{sidebarLang[interfaceLanguage.current].collections.title}</Sidebar.GroupLabel
+		>
+		<Sidebar.Menu>
 			<div class="space-y-2 px-2">
 				<Skeleton class="h-4 w-[200px]" />
 				<Skeleton class="h-4 w-[160px]" />
 			</div>
-		{:then items}
-			{#each items as item (item)}
-				{@const name =
-					getLocalizedLabel(item.labels?.plural, interfaceLanguage.current) ?? item.slug}
-				{@const url = `/admin/collections/${item.slug}`}
-				{@const active = isActive(url)}
-				<Sidebar.MenuItem>
-					<Sidebar.MenuButton
-						class="rounded-lg transition-colors {active
-							? 'bg-primary/10 text-primary font-medium'
-							: 'hover:bg-accent'}"
-					>
-						{#snippet child({ props })}
-							<a {...props} href={url}>
-								{#if item.sidebarIcon}
-									<item.sidebarIcon
-										class="size-4 {active ? 'text-primary' : 'text-muted-foreground'}"
-									/>
-								{:else}
-									<FolderIcon
-										class="size-4 {active ? 'text-primary' : 'text-muted-foreground'}"
-									/>
-								{/if}
-								<span>{name}</span>
-							</a>
-						{/snippet}
-					</Sidebar.MenuButton>
-				</Sidebar.MenuItem>
-			{/each}
-		{/await}
-	</Sidebar.Menu>
-</Sidebar.Group>
+		</Sidebar.Menu>
+	</Sidebar.Group>
+{:then items}
+	{#if items.length > 0}
+		<Sidebar.Group class="border-sidebar-border mt-1 border-t px-0 pt-2 pb-1">
+			<Sidebar.GroupLabel class="group-data-[collapsible=icon]:hidden"
+				>{sidebarLang[interfaceLanguage.current].collections.title}</Sidebar.GroupLabel
+			>
+			<Sidebar.Menu>
+				{#each items as item (item.slug)}
+					{@const name =
+						getLocalizedLabel(item.labels?.plural, interfaceLanguage.current) ?? item.slug}
+					{@const url = `/admin/collections/${item.slug}`}
+					{@const active = isActive(url)}
+					<Sidebar.MenuItem>
+						<Sidebar.MenuButton isActive={active} tooltipContent={name}>
+							{#snippet child({ props })}
+								<a {...props} href={url}>
+									{#if item.sidebarIcon}
+										<item.sidebarIcon
+											class="size-5! shrink-0 {active ? 'text-primary' : 'text-muted-foreground'}"
+										/>
+									{:else}
+										<FolderIcon
+											class="size-5! shrink-0 {active ? 'text-primary' : 'text-muted-foreground'}"
+										/>
+									{/if}
+									<span class="flex-1 truncate {active ? 'text-primary' : 'text-muted-foreground'}"
+										>{name}</span
+									>
+									{#if item.entryCount > 0}
+										<span
+											class="bg-lavender-lighter text-primary inline-flex h-[18px] min-w-[18px] shrink-0 items-center justify-center rounded-full px-[5px] text-[10px] font-bold"
+										>
+											{item.entryCount}
+										</span>
+									{/if}
+								</a>
+							{/snippet}
+						</Sidebar.MenuButton>
+					</Sidebar.MenuItem>
+				{/each}
+			</Sidebar.Menu>
+		</Sidebar.Group>
+	{/if}
+{/await}

package/dist/admin/components/layout/nav-footer.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import HelpCircleIcon from '@tabler/icons-svelte/icons/help-circle';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { updates } from '../../../updates/index.js';
+	import { sidebarLang } from './lang.js';
+
+	const interfaceLanguage = useInterfaceLanguage();
+	const version = `v${updates[0].version}`;
+</script>
+
+<div class="border-sidebar-border border-t p-2">
+	<div
+		class="flex items-center justify-between gap-2 px-2.5 py-2 group-data-[collapsible=icon]:px-0"
+	>
+		<span
+			class="bg-muted text-text-light shrink-0 rounded-[3px] px-1.5 py-0.5 text-[10px] font-semibold group-data-[collapsible=icon]:hidden"
+		>
+			{version}
+		</span>
+		<a
+			href="/admin/help"
+			class="border-sidebar-border text-text-light hover:bg-lavender-lighter hover:text-primary hover:border-lavender inline-flex items-center gap-1.5 rounded-md border px-2.5 py-[5px] text-xs font-medium transition-colors group-data-[collapsible=icon]:border-0"
+			aria-label={sidebarLang[interfaceLanguage.current].footer.help}
+		>
+			<HelpCircleIcon class="size-4 shrink-0" />
+			<span class="group-data-[collapsible=icon]:hidden"
+				>{sidebarLang[interfaceLanguage.current].footer.help}</span
+			>
+		</a>
+	</div>
+</div>

package/dist/admin/components/layout/nav-footer.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const NavFooter: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type NavFooter = InstanceType<typeof NavFooter>;
+export default NavFooter;

package/dist/admin/components/layout/nav-forms.svelte

@@ -14,39 +14,64 @@
 	function isActive(url: string) {
 		return page.url.pathname.startsWith(url);
 	}
+
+	async function loadForms() {
+		const [forms, overview] = await Promise.all([
+			remotes.getForms(),
+			remotes.getSubmissionsOverview().catch(() => [] as any[])
+		]);
+		const countMap = new Map((overview as any[]).map((o: any) => [o.slug, o.total as number]));
+		return forms.map((f: any) => ({
+			...f,
+			submissionCount: countMap.get(f.slug) ?? 0
+		}));
+	}
 </script>
 
-<Sidebar.Group>
-	<Sidebar.GroupLabel>{sidebarLang[interfaceLanguage.current].forms.title}</Sidebar.GroupLabel>
-	<Sidebar.Menu>
-		{#await remotes.getForms()}
+{#await loadForms()}
+	<Sidebar.Group class="border-sidebar-border mt-1 border-t px-0 pt-2 pb-1">
+		<Sidebar.GroupLabel>{sidebarLang[interfaceLanguage.current].forms.title}</Sidebar.GroupLabel>
+		<Sidebar.Menu>
 			<div class="space-y-2 px-2">
 				<Skeleton class="h-4 w-[200px]" />
 				<Skeleton class="h-4 w-[160px]" />
 			</div>
-		{:then items}
-			{#each items as item (item)}
-				{@const name = getLocalizedLabel(item.label, interfaceLanguage.current) ?? item.slug}
-				{@const url = `/admin/forms/${item.slug}`}
-				{@const active = isActive(url)}
-
-				<Sidebar.MenuItem>
-					<Sidebar.MenuButton
-						class="rounded-lg transition-colors {active
-							? 'bg-primary/10 text-primary font-medium'
-							: 'hover:bg-accent'}"
-					>
-						{#snippet child({ props })}
-							<a {...props} href={url}>
-								<ClipboardIcon
-									class="size-4 {active ? 'text-primary' : 'text-muted-foreground'}"
-								/>
-								<span>{name}</span>
-							</a>
-						{/snippet}
-					</Sidebar.MenuButton>
-				</Sidebar.MenuItem>
-			{/each}
-		{/await}
-	</Sidebar.Menu>
-</Sidebar.Group>
+		</Sidebar.Menu>
+	</Sidebar.Group>
+{:then items}
+	{#if items.length > 0}
+		<Sidebar.Group class="border-sidebar-border mt-1 border-t px-0 pt-2 pb-1">
+			<Sidebar.GroupLabel class="group-data-[collapsible=icon]:hidden"
+				>{sidebarLang[interfaceLanguage.current].forms.title}</Sidebar.GroupLabel
+			>
+			<Sidebar.Menu>
+				{#each items as item (item.slug)}
+					{@const name = getLocalizedLabel(item.label, interfaceLanguage.current) ?? item.slug}
+					{@const url = `/admin/forms/${item.slug}`}
+					{@const active = isActive(url)}
+					<Sidebar.MenuItem>
+						<Sidebar.MenuButton isActive={active} tooltipContent={name}>
+							{#snippet child({ props })}
+								<a {...props} href={url}>
+									<ClipboardIcon
+										class="size-5!  shrink-0 {active ? 'text-primary' : 'text-muted-foreground'}"
+									/>
+									<span class="flex-1 {active ? 'text-primary' : 'text-muted-foreground'} truncate"
+										>{name}</span
+									>
+									{#if item.submissionCount > 0}
+										<span
+											class="bg-lavender-lighter text-primary inline-flex h-[18px] min-w-[18px] shrink-0 items-center justify-center rounded-full px-[5px] text-[10px] font-bold group-data-[collapsible=icon]:hidden"
+										>
+											{item.submissionCount}
+										</span>
+									{/if}
+								</a>
+							{/snippet}
+						</Sidebar.MenuButton>
+					</Sidebar.MenuItem>
+				{/each}
+			</Sidebar.Menu>
+		</Sidebar.Group>
+	{/if}
+{/await}