@dynect/base 0.1.0 → 0.2.0

package/src/runtime/components/ui/tiptap/TiptapTreeStructure.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+import { extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { TreeRoot } from 'reka-ui';
+import { computed, onBeforeUnmount, watchEffect } from 'vue';
+import { useTiptapContext } from '.';
+import TiptapTreeItem from './TiptapTreeItem.vue';
+import { editorNodesToTree } from './tiptapTreeUtils';
+
+const props = defineProps<{
+	editorNodes?: any[];
+	class?: HTMLAttributes['class'];
+}>();
+
+const emits = defineEmits<{
+	'select-node': [id: string];
+	'duplicate-node': [id: string];
+	'delete-node': [id: string];
+	'reorder-nodes': [params: { sourceId: string; targetId: string; position: 'before' | 'after' }];
+}>();
+
+// Get context data if props were not provided directly
+const { editorNodes: contextNodes, selectNode, deleteNode, duplicateNode, reorderNodes } = useTiptapContext();
+
+const nodes = computed(() => {
+	const rawNodes = props.editorNodes ?? contextNodes.value ?? [];
+
+	// Transform nodes to match the tree structure expected by TreeRoot
+	return editorNodesToTree(rawNodes);
+});
+
+// Handle node selection
+function handleSelectNode(id: string) {
+	if (selectNode) {
+		selectNode(id);
+	} else {
+		emits('select-node', id);
+	}
+}
+
+// Handle node duplication
+function handleDuplicateNode(id: string) {
+	if (duplicateNode) {
+		duplicateNode(id);
+	} else {
+		emits('duplicate-node', id);
+	}
+}
+
+// Handle node deletion
+function handleDeleteNode(id: string) {
+	if (deleteNode) {
+		deleteNode(id);
+	} else {
+		emits('delete-node', id);
+	}
+}
+
+// Handle node reordering
+function handleReorderNodes(params: { sourceId: string; targetId: string; position: 'before' | 'after' }) {
+	if (reorderNodes) {
+		reorderNodes(params);
+	} else {
+		emits('reorder-nodes', params);
+	}
+}
+
+// Clean up all drag and drop handlers when component is destroyed
+onBeforeUnmount(() => {
+	if (cleanupDnd && typeof cleanupDnd === 'function') {
+		cleanupDnd();
+	}
+});
+
+// Set up global drop monitoring
+let cleanupDnd: (() => void) | undefined;
+
+watchEffect((onCleanup) => {
+	const dndFunction = combine(
+		monitorForElements({
+			onDrop(args) {
+				const { location, source } = args;
+				// didn't drop on anything
+				if (!location.current.dropTargets.length) return;
+
+				const sourceId = source.data.id as string;
+				const target: any = location.current.dropTargets[0];
+				const targetId = target.data.id as string;
+
+				const instruction = extractInstruction(target.data);
+
+				if (instruction !== null) {
+					if (instruction.type === 'reorder-above') {
+						handleReorderNodes({
+							sourceId,
+							targetId,
+							position: 'before',
+						});
+					} else if (instruction.type === 'reorder-below') {
+						handleReorderNodes({
+							sourceId,
+							targetId,
+							position: 'after',
+						});
+					}
+				}
+			},
+		})
+	);
+
+	cleanupDnd = dndFunction;
+
+	onCleanup(() => {
+		if (dndFunction) {
+			dndFunction();
+		}
+	});
+});
+</script>
+
+<template>
+	<div :class="cn('tiptap-tree-structure', props.class)" data-slot="tiptap-structure">
+		<div v-if="!nodes || nodes.length === 0" class="text-muted-foreground p-2 text-sm italic">No content yet. Start writing to see document structure.</div>
+		<div v-else>
+			<TreeRoot v-slot="{ flattenItems }" class="w-full list-none select-none" :items="nodes" :get-key="(item) => item.title" multiple>
+				<TiptapTreeItem v-for="item in flattenItems" :key="item._id + item.index" :item="item" v-bind="item.bind" @select-node="handleSelectNode" @duplicate-node="handleDuplicateNode" @delete-node="handleDeleteNode" />
+			</TreeRoot>
+		</div>
+	</div>
+</template>

package/src/runtime/components/ui/tiptap/index.ts

@@ -0,0 +1,49 @@
+import type { Editor } from '@tiptap/vue-3';
+import type { ComputedRef, Ref } from 'vue';
+import { createContext } from 'reka-ui';
+
+// Define the TiptapContext type
+export interface TiptapContext {
+	editor: ComputedRef<Editor | null>;
+	editorNodes: Ref<any[]>;
+	sidebarVisible: Ref<boolean>;
+	selectedNodeId: Ref<string>;
+	toggleSidebar: () => void;
+	selectNode: (id: string) => void;
+	deleteNode: (id: string) => boolean | undefined;
+	duplicateNode: (id: string) => boolean | undefined;
+	reorderNodes: (params: { sourceId: string; targetId: string; position: 'before' | 'after' }) => boolean | undefined;
+	updateEditorNodes: () => void;
+	// Add these missing properties that are used in TiptapProvider.vue
+	canUndo: ComputedRef<boolean>;
+	canRedo: ComputedRef<boolean>;
+	metadata: ComputedRef<{
+		lastSaved: Date | null;
+		wordCount: number;
+		charCount: number;
+		readingTime: string;
+	}>;
+	updateMetadata: () => void;
+}
+
+// Create context for Tiptap components
+export const [useTiptapContext, provideTiptapContext] = createContext<TiptapContext>('TiptapEditor');
+
+export { default as TiptapContent } from './TiptapContent.vue';
+// Export all component parts
+export { default as TiptapEditor } from './TiptapEditor.vue';
+export { default as TiptapIcon } from './TiptapIcon.vue';
+export { default as TiptapKeyboardShortcuts } from './TiptapKeyboardShortcuts.vue';
+export { default as TiptapMobileToolbar } from './TiptapMobileToolbar.vue';
+export { default as TiptapProvider } from './TiptapProvider.vue';
+export { default as TiptapSlotPanel } from './TiptapSlotPanel.vue';
+export { default as TiptapStatusBar } from './TiptapStatusBar.vue';
+export { default as TiptapTableToolbar } from './TiptapTableToolbar.vue';
+export { default as TiptapToolbar } from './TiptapToolbar.vue';
+
+export { default as TiptapTreeItem } from './TiptapTreeItem.vue';
+// Export the tree-based structure components
+export { default as TiptapTreeStructure } from './TiptapTreeStructure.vue';
+
+// Re-export utilities
+export * from './tiptapTreeUtils';

package/src/runtime/components/ui/tiptap/tiptapTreeUtils.ts

@@ -0,0 +1,137 @@
+import type { Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+
+export interface TiptapTreeItem {
+	title: string;
+	name: string;
+	icon: string;
+	content?: string;
+	selected?: boolean;
+	depth?: number;
+	children?: TiptapTreeItem[];
+}
+
+export type TiptapTreeAction =
+	| {
+			type: 'instruction';
+			instruction: Instruction;
+			itemId: string;
+			targetId: string;
+	  }
+	| {
+			type: 'reorder';
+			sourceId: string;
+			targetId: string;
+			position: 'before' | 'after';
+	  };
+
+export const tiptapTree = {
+	remove(data: TiptapTreeItem[], id: string): TiptapTreeItem[] {
+		return data
+			.filter((item) => item.title !== id)
+			.map((item) => {
+				if (item.children && item.children.length > 0) {
+					return {
+						...item,
+						children: tiptapTree.remove(item.children, id),
+					};
+				}
+				return item;
+			});
+	},
+
+	insertBefore(data: TiptapTreeItem[], targetId: string, newItem: TiptapTreeItem): TiptapTreeItem[] {
+		return data.flatMap((item) => {
+			if (item.title === targetId) return [newItem, item];
+
+			if (item.children && item.children.length > 0) {
+				return {
+					...item,
+					children: tiptapTree.insertBefore(item.children, targetId, newItem),
+				};
+			}
+			return item;
+		});
+	},
+
+	insertAfter(data: TiptapTreeItem[], targetId: string, newItem: TiptapTreeItem): TiptapTreeItem[] {
+		return data.flatMap((item) => {
+			if (item.title === targetId) return [item, newItem];
+
+			if (item.children && item.children.length > 0) {
+				return {
+					...item,
+					children: tiptapTree.insertAfter(item.children, targetId, newItem),
+				};
+			}
+
+			return item;
+		});
+	},
+
+	find(data: TiptapTreeItem[], itemId: string): TiptapTreeItem | undefined {
+		for (const item of data) {
+			if (item.title === itemId) return item;
+
+			if (item.children && item.children.length > 0) {
+				const result = tiptapTree.find(item.children, itemId);
+				if (result) return result;
+			}
+		}
+
+		return undefined;
+	},
+
+	hasChildren(item: TiptapTreeItem): boolean {
+		return Array.isArray(item.children) && item.children.length > 0;
+	},
+};
+
+function moveItem(data: TiptapTreeItem[], sourceId: string, targetId: string, position: 'before' | 'after'): TiptapTreeItem[] {
+	const item = tiptapTree.find(data, sourceId);
+	if (!item || sourceId === targetId) return data;
+
+	const result = tiptapTree.remove(data, sourceId);
+	return position === 'before' ? tiptapTree.insertBefore(result, targetId, item) : tiptapTree.insertAfter(result, targetId, item);
+}
+
+export function updateTiptapTree(data: TiptapTreeItem[], action: TiptapTreeAction) {
+	if (action.type === 'instruction') {
+		const { instruction, itemId, targetId } = action;
+		if (instruction.type === 'reorder-above') return moveItem(data, itemId, targetId, 'before');
+		if (instruction.type === 'reorder-below') return moveItem(data, itemId, targetId, 'after');
+	}
+
+	if (action.type === 'reorder') {
+		return moveItem(data, action.sourceId, action.targetId, action.position);
+	}
+
+	return data;
+}
+
+// Helper function to convert flat editor nodes to tree structure
+export function editorNodesToTree(nodes: any[]): TiptapTreeItem[] {
+	if (!nodes || !Array.isArray(nodes)) return [];
+
+	return nodes.map((node) => ({
+		title: node.id,
+		name: node.name || node.id,
+		icon: node.icon || 'mdi:circle',
+		content: node.content,
+		selected: node.selected,
+		depth: node.depth || 0,
+	}));
+}
+
+export const shortcuts = [
+	{ keys: ['Ctrl', 'B'], description: 'Bold' },
+	{ keys: ['Ctrl', 'I'], description: 'Italic' },
+	{ keys: ['Ctrl', 'U'], description: 'Underline' },
+	{ keys: ['Ctrl', '`'], description: 'Code' },
+	{ keys: ['Ctrl', 'Alt', '1-6'], description: 'Heading 1-6' },
+	{ keys: ['Ctrl', 'Shift', '8'], description: 'Bullet list' },
+	{ keys: ['Ctrl', 'Shift', '9'], description: 'Ordered list' },
+	{ keys: ['Tab'], description: 'Indent' },
+	{ keys: ['Shift', 'Tab'], description: 'Outdent' },
+	{ keys: ['Ctrl', 'Z'], description: 'Undo' },
+	{ keys: ['Ctrl', 'Y'], description: 'Redo' },
+];

package/src/runtime/components/ui/toggle/Toggle.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { ToggleEmits, ToggleProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { ToggleVariants } from '.';
+import { reactiveOmit } from '@vueuse/core';
+import { Toggle, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { toggleVariants } from '.';
+
+const props = withDefaults(
+	defineProps<
+		ToggleProps & {
+			class?: HTMLAttributes['class'];
+			variant?: ToggleVariants['variant'];
+			size?: ToggleVariants['size'];
+		}
+	>(),
+	{
+		variant: 'default',
+		size: 'default',
+		disabled: false,
+	}
+);
+
+const emits = defineEmits<ToggleEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'size', 'variant');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<Toggle v-slot="slotProps" data-slot="toggle" v-bind="forwarded" :class="cn(toggleVariants({ variant, size }), props.class)">
+		<slot v-bind="slotProps" />
+	</Toggle>
+</template>

package/src/runtime/components/ui/toggle/index.ts

@@ -0,0 +1,27 @@
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+export { default as Toggle } from './Toggle.vue';
+
+export const toggleVariants = cva(
+	"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+	{
+		variants: {
+			variant: {
+				default: 'bg-transparent',
+				outline: 'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
+			},
+			size: {
+				default: 'h-9 px-2 min-w-9',
+				sm: 'h-8 px-1.5 min-w-8',
+				lg: 'h-10 px-2.5 min-w-10',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	}
+);
+
+export type ToggleVariants = VariantProps<typeof toggleVariants>;

package/src/runtime/components/ui/toggle-group/ToggleGroup.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority';
+import type { ToggleGroupRootEmits, ToggleGroupRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { toggleVariants } from '@/components/ui/toggle';
+import { reactiveOmit } from '@vueuse/core';
+import { ToggleGroupRoot, useForwardPropsEmits } from 'reka-ui';
+import { provide } from 'vue';
+import { cn } from '@/lib/utils';
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>;
+
+const props = withDefaults(
+	defineProps<
+		ToggleGroupRootProps & {
+			class?: HTMLAttributes['class'];
+			variant?: ToggleGroupVariants['variant'];
+			size?: ToggleGroupVariants['size'];
+			spacing?: number;
+		}
+	>(),
+	{
+		spacing: 0,
+	}
+);
+
+const emits = defineEmits<ToggleGroupRootEmits>();
+
+provide('toggleGroup', {
+	variant: props.variant,
+	size: props.size,
+	spacing: props.spacing,
+});
+
+const delegatedProps = reactiveOmit(props, 'class', 'size', 'variant');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<ToggleGroupRoot
+		v-slot="slotProps"
+		data-slot="toggle-group"
+		:data-size="size"
+		:data-variant="variant"
+		:data-spacing="spacing"
+		:style="{
+			'--gap': spacing,
+		}"
+		v-bind="forwarded"
+		:class="cn('group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs', props.class)"
+	>
+		<slot v-bind="slotProps" />
+	</ToggleGroupRoot>
+</template>

package/src/runtime/components/ui/toggle-group/ToggleGroupItem.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority';
+import type { ToggleGroupItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ToggleGroupItem, useForwardProps } from 'reka-ui';
+import { inject } from 'vue';
+import { cn } from '@/lib/utils';
+import { toggleVariants } from '@/components/ui/toggle';
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants> & {
+	spacing?: number;
+};
+
+const props = defineProps<
+	ToggleGroupItemProps & {
+		class?: HTMLAttributes['class'];
+		variant?: ToggleGroupVariants['variant'];
+		size?: ToggleGroupVariants['size'];
+	}
+>();
+
+const context = inject<ToggleGroupVariants>('toggleGroup');
+
+const delegatedProps = reactiveOmit(props, 'class', 'size', 'variant');
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<ToggleGroupItem
+		v-slot="slotProps"
+		data-slot="toggle-group-item"
+		:data-variant="context?.variant || variant"
+		:data-size="context?.size || size"
+		:data-spacing="context?.spacing"
+		v-bind="forwardedProps"
+		:class="
+			cn(
+				toggleVariants({
+					variant: context?.variant || variant,
+					size: context?.size || size,
+				}),
+				'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10',
+				'data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l',
+				props.class
+			)
+		"
+	>
+		<slot v-bind="slotProps" />
+	</ToggleGroupItem>
+</template>

package/src/runtime/components/ui/toggle-group/index.ts

@@ -0,0 +1,2 @@
+export { default as ToggleGroup } from './ToggleGroup.vue';
+export { default as ToggleGroupItem } from './ToggleGroupItem.vue';

package/src/runtime/components/ui/tooltip/Tooltip.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TooltipRootEmits, TooltipRootProps } from 'reka-ui';
+import { TooltipRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<TooltipRootProps>();
+const emits = defineEmits<TooltipRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+	<TooltipRoot v-slot="slotProps" data-slot="tooltip" v-bind="forwarded">
+		<slot v-bind="slotProps" />
+	</TooltipRoot>
+</template>

package/src/runtime/components/ui/tooltip/TooltipContent.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { TooltipContentEmits, TooltipContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
+	sideOffset: 4,
+});
+
+const emits = defineEmits<TooltipContentEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<TooltipPortal>
+		<TooltipContent
+			data-slot="tooltip-content"
+			v-bind="{ ...forwarded, ...$attrs }"
+			:class="
+				cn(
+					'bg-bg-dark animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 text-text-white z-50 w-fit max-w-sm rounded-xl p-2 text-center text-sm leading-5 font-medium',
+					props.class
+				)
+			"
+		>
+			<slot />
+
+			<TooltipArrow class="bg-bg-dark fill-bg-dark z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
+		</TooltipContent>
+	</TooltipPortal>
+</template>

package/src/runtime/components/ui/tooltip/TooltipProvider.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { TooltipProviderProps } from 'reka-ui';
+import { TooltipProvider } from 'reka-ui';
+
+const props = withDefaults(defineProps<TooltipProviderProps>(), {
+	delayDuration: 0,
+});
+</script>
+
+<template>
+	<TooltipProvider v-bind="props">
+		<slot />
+	</TooltipProvider>
+</template>

package/src/runtime/components/ui/tooltip/TooltipTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { TooltipTriggerProps } from 'reka-ui';
+import { TooltipTrigger } from 'reka-ui';
+
+const props = defineProps<TooltipTriggerProps>();
+</script>
+
+<template>
+	<TooltipTrigger data-slot="tooltip-trigger" v-bind="props">
+		<slot />
+	</TooltipTrigger>
+</template>

package/src/runtime/components/ui/tooltip/index.ts

@@ -0,0 +1,4 @@
+export { default as Tooltip } from './Tooltip.vue';
+export { default as TooltipContent } from './TooltipContent.vue';
+export { default as TooltipProvider } from './TooltipProvider.vue';
+export { default as TooltipTrigger } from './TooltipTrigger.vue';