@finsweet/webflow-apps-utils 1.0.1

package/dist/ui/components/layout/Layout.svelte

@@ -0,0 +1,551 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	import { globalStore } from '../../../stores';
+	import {
+		CheckCircleOutlinedIcon,
+		WarningCircleIcon,
+		WarningCircleOutlineIcon
+	} from '../../icons';
+
+	import { Tooltip } from '../tooltip';
+	import { EditModeMessage } from './common';
+	import type { LayoutFooter, LayoutTab } from './types';
+
+	interface LayoutProps extends HTMLAttributes<HTMLDivElement> {
+		activeTab: string;
+		tabs: LayoutTab[];
+		switchTab: (tab: string) => void;
+		footer?: LayoutFooter;
+		formKey: string;
+		editMode?: boolean;
+		showFooter?: boolean;
+		showSidebar?: boolean;
+		showTabs?: boolean;
+		showPreviewBar?: boolean;
+		sidebarWidth?: string;
+		containerMode?: boolean;
+		footerSize?: 'normal' | 'large';
+		notifications?: Array<{
+			path: string;
+			success: boolean;
+			message: string;
+			showNotification: boolean;
+		}>;
+		sidebar?: Snippet;
+		main?: Snippet;
+		previewBar?: Snippet;
+	}
+
+	let {
+		activeTab,
+		tabs,
+		switchTab,
+		footer = { buttons: [] },
+		formKey,
+		editMode = false,
+		showFooter = true,
+		showSidebar = true,
+		showTabs = true,
+		showPreviewBar = true,
+		sidebarWidth = '274px',
+		containerMode = false,
+		footerSize = 'normal',
+		notifications = [],
+		sidebar,
+		main,
+		previewBar,
+		class: className = '',
+		...restProps
+	}: LayoutProps = $props();
+
+	// Derived states
+	let hasFooterButtons = $derived(footer?.buttons && footer.buttons.length > 0);
+	let containerStyles = $derived(
+		containerMode ? 'height: 100%; width: 100%;' : 'height: 100vh; width: 100vw;'
+	);
+	let footerHeight = $derived(footerSize === 'large' ? '50px' : '40px');
+
+	// Grid template areas based on visibility
+	let gridTemplateAreas = $derived(() => {
+		const areas = [];
+
+		// Handle navbar row - navbar can exist independently and spans correctly
+		if (showTabs) {
+			if (showSidebar && showPreviewBar) {
+				areas.push('"navbar preview-bar"');
+			} else if (showSidebar) {
+				areas.push('"navbar navbar"');
+			} else {
+				areas.push('"navbar"');
+			}
+		} else if (showPreviewBar && showSidebar) {
+			// If tabs are hidden but preview bar is shown with sidebar
+			areas.push('"preview-bar preview-bar"');
+		}
+
+		// Handle main content row
+		if (showSidebar) {
+			areas.push('"sidebar main"');
+		} else {
+			areas.push('"main"');
+		}
+
+		// Handle footer row
+		if (showFooter && hasFooterButtons) {
+			if (showSidebar) {
+				areas.push('"sidebar footer"');
+			} else {
+				areas.push('"footer"');
+			}
+		}
+
+		return areas.join(' ');
+	});
+
+	// Grid template columns
+	let gridTemplateColumns = $derived(showSidebar ? `${sidebarWidth} 1fr` : '1fr');
+
+	// Grid template rows
+	let gridTemplateRows = $derived(() => {
+		const rows = [];
+
+		// Add row for navbar/preview-bar if either is shown
+		if (showTabs || (showPreviewBar && showSidebar)) {
+			rows.push('40px');
+		}
+
+		rows.push('1fr'); // main content area takes remaining space
+
+		if (showFooter && hasFooterButtons) {
+			rows.push(footerHeight);
+		}
+
+		return rows.join(' ');
+	});
+
+	// Get notification for a specific tab
+	function getNotification(tabPath: string) {
+		return notifications.find((n) => n.path === tabPath);
+	}
+</script>
+
+<div
+	class="layout-grid {className}"
+	style="{containerStyles} --grid-template-areas: {gridTemplateAreas()}; --grid-template-columns: {gridTemplateColumns}; --grid-template-rows: {gridTemplateRows()};"
+	{...restProps}
+>
+	<!-- Navbar/Tab Switcher -->
+	{#if showTabs}
+		<div class="navbar" data-area="navbar">
+			{#each tabs as tab (tab.path)}
+				{@const Icon = tab.icon}
+				{@const notification = getNotification(tab.path)}
+				<button
+					class="tab"
+					class:isActive={activeTab === tab.path}
+					class:warning={notification && !notification?.success}
+					class:success={notification && notification?.success}
+					onclick={() => switchTab(tab.path)}
+				>
+					<Icon />
+					<span
+						class="tab-text"
+						style="color: {activeTab !== tab.path ? 'var(--text2)' : 'var(--actionPrimaryText)'}"
+					>
+						{tab.name}
+					</span>
+
+					{#if notification?.showNotification}
+						{#if notification?.success}
+							<span class="notification-pill success">
+								<CheckCircleOutlinedIcon />
+							</span>
+						{:else}
+							<Tooltip
+								message={notification?.message}
+								placement="right"
+								offsetVal={8}
+								position="fixed"
+								width="max-content"
+							>
+								{#snippet target()}
+									<div class="notification-pill warning-tooltip">
+										<WarningCircleOutlineIcon />
+									</div>
+								{/snippet}
+							</Tooltip>
+						{/if}
+					{/if}
+				</button>
+			{/each}
+		</div>
+	{/if}
+
+	<!-- Preview Bar -->
+	{#if showPreviewBar && showSidebar}
+		<div class="preview-bar" data-area="preview-bar">
+			{#if previewBar}
+				{@render previewBar()}
+			{:else}
+				<div class="preview-bar-content">
+					<span>Preview: {activeTab} tab content</span>
+				</div>
+			{/if}
+		</div>
+	{/if}
+
+	<!-- Sidebar -->
+	{#if showSidebar}
+		<div class="sidebar" data-area="sidebar" data-simplebar="">
+			{#if sidebar}
+				{@render sidebar()}
+			{:else}
+				<div class="sidebar-content">
+					<div class="sidebar-placeholder">
+						<h3>Sidebar Content</h3>
+						<p>Tab: {activeTab}</p>
+						<p>This is placeholder content for the sidebar area.</p>
+					</div>
+				</div>
+			{/if}
+		</div>
+	{/if}
+
+	<!-- Main Content -->
+	<div class="main-content" data-area="main">
+		{#if main}
+			<div class="main-content-container">
+				{#if $globalStore.editMode || $globalStore.repairMode}
+					<EditModeMessage />
+				{/if}
+				{@render main()}
+			</div>
+		{:else}
+			<div class="main-placeholder">
+				<h2>Main Content Area</h2>
+				<p>Active Tab: <strong>{activeTab}</strong></p>
+				<p>This is placeholder content for the main content area.</p>
+				<div class="placeholder-details">
+					<h3>Layout State:</h3>
+					<ul>
+						<li>Show Sidebar: {showSidebar}</li>
+						<li>Show Tabs: {showTabs}</li>
+						<li>Show Preview Bar: {showPreviewBar}</li>
+						<li>Show Footer: {showFooter}</li>
+						<li>Edit Mode: {editMode}</li>
+					</ul>
+				</div>
+			</div>
+		{/if}
+	</div>
+
+	<!-- Footer -->
+	{#if showFooter && hasFooterButtons}
+		<div class="footer" data-area="footer">
+			{#each footer.buttons as button (button.text)}
+				<button
+					class="footer-button footer-button--{button.variant}"
+					disabled={editMode}
+					onclick={button.onClick}
+				>
+					{#if button.icon}
+						{@const Icon = button.icon}
+						<Icon />
+					{/if}
+					{button.text}
+				</button>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.layout-grid {
+		display: grid;
+		grid-template-areas: var(--grid-template-areas);
+		grid-template-columns: var(--grid-template-columns);
+		grid-template-rows: var(--grid-template-rows);
+		overflow: hidden;
+		height: 100%;
+		width: 100%;
+	}
+
+	/* Navbar/Tab Switcher */
+	.navbar {
+		grid-area: navbar;
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		padding: 0 var(--spacing-12, 12px);
+		background: var(--background1, #1e1e1e);
+		border-bottom: 1px solid var(--border1, rgba(255, 255, 255, 0.13));
+		position: relative;
+		z-index: 50;
+		height: 40px;
+		overflow: visible;
+	}
+
+	/* Add right border to navbar when sidebar is visible to align with sidebar border */
+	.layout-grid:has(.sidebar) .navbar {
+		border-right: 1px solid var(--border1, rgba(255, 255, 255, 0.13));
+	}
+
+	.tab {
+		all: unset;
+		position: relative;
+		height: 40px;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: 8px;
+		cursor: pointer;
+		justify-content: start;
+		color: var(--text2);
+		overflow: visible;
+	}
+
+	.tab.isActive {
+		color: var(--actionPrimaryText);
+	}
+
+	.tab-text {
+		color: inherit;
+		font-family: Inter;
+		font-size: 11.5px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 16px;
+	}
+
+	.tab::after {
+		content: '';
+		position: absolute;
+		bottom: 0px;
+		left: 0;
+		right: 0;
+		height: 1px;
+		background-color: var(--yellowBorder);
+		opacity: 0;
+		transition: opacity 0.2s ease-in-out;
+		z-index: 100;
+		pointer-events: none;
+	}
+
+	.tab.warning::after {
+		background-color: var(--yellowBorder);
+	}
+
+	.tab.success::after {
+		background-color: var(--greenBorder);
+	}
+
+	.tab:hover::after {
+		opacity: 1;
+	}
+
+	.tab.isActive::after {
+		opacity: 1;
+	}
+
+	.notification-pill {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--yellow-yellow-text, #ffc700);
+		width: 16px;
+		height: 16px;
+	}
+
+	.notification-pill.success {
+		color: var(--greenBorder);
+	}
+
+	.notification-pill.warning-tooltip {
+		cursor: help;
+	}
+
+	.notification-pill.warning-tooltip:hover {
+		opacity: 0.8;
+	}
+
+	/* Preview Bar */
+	.preview-bar {
+		grid-area: preview-bar;
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		padding: 0 var(--spacing-12, 12px);
+		background: var(--background1, #1e1e1e);
+		border-bottom: 1px solid var(--border1, rgba(255, 255, 255, 0.13));
+		position: relative;
+		z-index: 9;
+		height: 40px;
+		overflow: hidden;
+	}
+
+	.preview-bar-content span {
+		color: var(--actionPrimaryText);
+		font-family: Inter;
+		font-size: 11.5px;
+		font-style: normal;
+		font-weight: 500;
+		line-height: 16px;
+	}
+
+	/* Sidebar */
+	.sidebar {
+		grid-area: sidebar;
+		background: var(--background1, #1e1e1e);
+		border-right: 1px solid var(--border1, rgba(255, 255, 255, 0.13));
+		overflow-y: auto;
+		overflow-x: hidden;
+		position: relative;
+		z-index: 2;
+		height: 100%;
+	}
+
+	.sidebar-content {
+		height: 100%;
+	}
+
+	.sidebar-placeholder {
+		padding: var(--spacing-16, 16px);
+		color: var(--text1);
+	}
+
+	.sidebar-placeholder h3 {
+		margin: 0 0 var(--spacing-12, 12px) 0;
+		font-size: 14px;
+		font-weight: 600;
+	}
+
+	.sidebar-placeholder p {
+		margin: 0 0 var(--spacing-8, 8px) 0;
+		font-size: 12px;
+		color: var(--text2);
+	}
+
+	/* Main Content */
+	.main-content {
+		grid-area: main;
+		background: var(--background1, #1e1e1e);
+		overflow-y: auto;
+		overflow-x: hidden;
+		position: relative;
+		z-index: 1;
+		height: 100%;
+	}
+
+	.main-content-container {
+		flex-grow: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		align-self: stretch;
+		padding: var(--Spacing-24, 24px);
+		gap: var(--Spacing-16, 16px);
+	}
+
+	.main-placeholder {
+		padding: var(--spacing-24, 24px);
+		color: var(--text1);
+		height: 100%;
+	}
+
+	.main-placeholder h2 {
+		margin: 0 0 var(--spacing-16, 16px) 0;
+		font-size: 18px;
+		font-weight: 600;
+		color: var(--actionPrimaryText);
+	}
+
+	.main-placeholder p {
+		margin: 0 0 var(--spacing-12, 12px) 0;
+		font-size: 14px;
+		color: var(--text1);
+	}
+
+	.placeholder-details {
+		margin-top: var(--spacing-24, 24px);
+		padding: var(--spacing-16, 16px);
+		background: var(--background2, #2a2a2a);
+		border-radius: 6px;
+		border: 1px solid var(--border1, rgba(255, 255, 255, 0.13));
+	}
+
+	.placeholder-details h3 {
+		margin: 0 0 var(--spacing-12, 12px) 0;
+		font-size: 14px;
+		font-weight: 500;
+		color: var(--text1);
+	}
+
+	.placeholder-details ul {
+		margin: 0;
+		padding-left: var(--spacing-16, 16px);
+		color: var(--text2);
+		font-size: 12px;
+	}
+
+	.placeholder-details li {
+		margin-bottom: var(--spacing-4, 4px);
+	}
+
+	/* Footer */
+	.footer {
+		grid-area: footer;
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-end;
+		align-items: center;
+		gap: var(--spacing-8, 8px);
+		padding: var(--spacing-8, 8px) var(--spacing-12, 12px);
+		background: var(--background1, #1e1e1e);
+		border-top: 1px solid var(--border1, rgba(255, 255, 255, 0.13));
+		position: relative;
+		z-index: 99;
+		height: 100%;
+		overflow: hidden;
+	}
+
+	.footer-button {
+		display: flex;
+		padding: 4px 8px;
+		justify-content: center;
+		align-items: center;
+		gap: 2px;
+		border-radius: 4px;
+		border: 1px solid var(--border-border-1, #363636);
+		background: var(--background2);
+		color: var(--text1);
+		text-align: center;
+		font-family: Inter;
+		font-size: 11px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 16px;
+		cursor: pointer;
+		transition: all 0.2s ease-in-out;
+	}
+
+	.footer-button--primary {
+		background: var(--action-action-primary-background-hover, #1280ee);
+		color: var(--actionPrimaryText);
+	}
+
+	.footer-button--secondary {
+		background: var(--background2);
+		color: var(--text1);
+	}
+
+	.footer-button:hover:not(:disabled) {
+		opacity: 0.8;
+	}
+
+	.footer-button:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+</style>

package/dist/ui/components/layout/Layout.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { LayoutFooter, LayoutTab } from './types';
+interface LayoutProps extends HTMLAttributes<HTMLDivElement> {
+    activeTab: string;
+    tabs: LayoutTab[];
+    switchTab: (tab: string) => void;
+    footer?: LayoutFooter;
+    formKey: string;
+    editMode?: boolean;
+    showFooter?: boolean;
+    showSidebar?: boolean;
+    showTabs?: boolean;
+    showPreviewBar?: boolean;
+    sidebarWidth?: string;
+    containerMode?: boolean;
+    footerSize?: 'normal' | 'large';
+    notifications?: Array<{
+        path: string;
+        success: boolean;
+        message: string;
+        showNotification: boolean;
+    }>;
+    sidebar?: Snippet;
+    main?: Snippet;
+    previewBar?: Snippet;
+}
+declare const Layout: import("svelte").Component<LayoutProps, {}, "">;
+type Layout = ReturnType<typeof Layout>;
+export default Layout;

package/dist/ui/components/layout/common/EditModeMessage.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { globalStore } from '../../../../stores';
+	import { Pencil, WarningTriangleOutlineIcon } from '../../../icons';
+	import { BRAND } from '../../../../utils';
+
+	import Notification from '../../Notification.svelte';
+
+	const isEditMode = $derived($globalStore.editMode);
+	const isRepairMode = $derived($globalStore.repairMode);
+	const title = $derived($globalStore.title);
+</script>
+
+{#if isEditMode && !isRepairMode}
+	<div class="edit-mode">
+		<Notification
+			type="warning"
+			title="You are in edit mode for {title} {BRAND.COMPONENT}."
+			message={`Make your edits and click on the "Update ${title}" button. You can review and confirm all changes before we proceed with the updates.`}
+			richtextMessage
+			defaultIcon={Pencil}
+			closeIcon={false}
+		/>
+	</div>
+{/if}
+
+{#if isRepairMode}
+	<div class="edit-mode">
+		<Notification
+			type="warning"
+			title="Component instance not found"
+			message="We have detected {BRAND.COMPONENT} as valid, but we couldn't find the associated configurations. This may be a {BRAND.COMPONENT} from another project. Click the 'Repair' button to fix it."
+			defaultIcon={WarningTriangleOutlineIcon}
+			closeIcon={false}
+		/>
+	</div>
+{/if}
+
+<style>
+	.edit-mode {
+		display: flex;
+		align-items: center;
+		align-self: stretch;
+		flex-direction: column;
+		gap: 8px;
+	}
+	.edit-mode :global(.wrapper .content) {
+		flex-direction: row;
+	}
+	.edit-mode :global(.wrapper .content:has(.message .labels)) {
+		flex-direction: column;
+	}
+	.edit-mode :global(.wrapper) {
+		align-items: start;
+		width: 100%;
+	}
+	.edit-mode :global(.wrapper svg:first-of-type) {
+		height: 15px;
+	}
+</style>

package/dist/ui/components/layout/common/EditModeMessage.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const EditModeMessage: import("svelte").Component<Record<string, never>, {}, "">;
+type EditModeMessage = ReturnType<typeof EditModeMessage>;
+export default EditModeMessage;

package/dist/ui/components/layout/common/index.d.ts

@@ -0,0 +1 @@
+export { default as EditModeMessage } from './EditModeMessage.svelte';

package/dist/ui/components/layout/common/index.js

@@ -0,0 +1 @@
+export { default as EditModeMessage } from './EditModeMessage.svelte';

package/dist/ui/components/layout/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Layout } from './Layout.svelte';
+export { default as DummyLayoutWrapper } from './ExampleLayout.svelte';
+export type { LayoutProps, LayoutTab, LayoutFooter } from './types';

package/dist/ui/components/layout/index.js

@@ -0,0 +1,2 @@
+export { default as Layout } from './Layout.svelte';
+export { default as DummyLayoutWrapper } from './ExampleLayout.svelte';

package/dist/ui/components/layout/types.d.ts

@@ -0,0 +1,59 @@
+import type { Component, Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface LayoutTab {
+    path: string;
+    name: string;
+    icon: Component;
+    isActive: boolean;
+    hidden?: boolean;
+}
+export interface LayoutFooter {
+    buttons: Array<{
+        id: string;
+        text: string;
+        variant: 'primary' | 'secondary';
+        icon?: Component;
+        onClick?: () => void;
+    }>;
+}
+export interface LayoutNotification {
+    path: string;
+    success: boolean;
+    message: string;
+    showNotification: boolean;
+}
+export interface LayoutProps extends HTMLAttributes<HTMLDivElement> {
+    activeTab: string;
+    switchTab: (tab: string) => void;
+    tabs: LayoutTab[];
+    main?: Snippet;
+    sidebar?: Snippet;
+    previewBar?: Snippet;
+    footer?: LayoutFooter;
+    formKey: string;
+    editMode?: boolean;
+    showFooter?: boolean;
+    showSidebar?: boolean;
+    showTabs?: boolean;
+    showPreviewBar?: boolean;
+    sidebarWidth?: string;
+    componentName?: string;
+    instanceName?: string;
+    containerMode?: boolean;
+    footerSize?: 'normal' | 'large';
+    notifications?: LayoutNotification[];
+}
+export interface LayoutRoute {
+    path: string;
+    name: string;
+    icon: Component;
+    hidden?: boolean;
+}
+export interface LayoutEvents {
+    tabSwitch: {
+        detail: string;
+    };
+    sidebarToggle: {
+        detail: boolean;
+    };
+}