@kine-design/core 0.0.1-beta.10 → 0.0.1-beta.11

package/compositions/editor/types.ts

@@ -1,147 +0,0 @@
-/**
- * @description Editor composition types
- * @author kine-design
- * @date 2026/5/22
- * @version v1.0.0
- *
- * Type definitions for the rich text editor composable.
- */
-import type { Editor } from '@tiptap/core';
-import type { ShallowRef, Ref, ComputedRef } from 'vue';
-
-/**
- * Toolbar feature toggle. Each key controls visibility of a toolbar group.
- * All default to true when omitted.
- */
-export interface EditorToolbarConfig {
-  bold?: boolean;
-  italic?: boolean;
-  strike?: boolean;
-  code?: boolean;
-  heading?: boolean;
-  bulletList?: boolean;
-  orderedList?: boolean;
-  blockquote?: boolean;
-  codeBlock?: boolean;
-  link?: boolean;
-  image?: boolean;
-  textAlign?: boolean;
-  undo?: boolean;
-}
-
-/**
- * Extension-level configuration that is forwarded to individual tiptap extensions.
- */
-export interface EditorExtensionConfig {
-  link?: {
-    openOnClick?: boolean;
-    HTMLAttributes?: Record<string, string>;
-  };
-  image?: {
-    allowBase64?: boolean;
-    HTMLAttributes?: Record<string, string>;
-  };
-  placeholder?: {
-    text?: string;
-  };
-}
-
-/**
- * Top-level editor configuration passed via props.
- */
-export interface EditorConfig {
-  toolbar?: EditorToolbarConfig;
-  extensions?: EditorExtensionConfig;
-}
-
-/**
- * Options accepted by the useEditor composable.
- */
-export interface UseEditorOptions {
-  /** Initial HTML or plain-text content */
-  content?: string;
-  /** When true the editor is not editable */
-  readonly?: boolean;
-  /** Placeholder text shown when the editor is empty */
-  placeholder?: string;
-  /** Feature configuration */
-  config?: EditorConfig;
-  /** Callback fired when content changes (HTML string) */
-  onUpdate?: (html: string) => void;
-  /** Callback fired when the editor is ready */
-  onReady?: () => void;
-  /** Callback fired on focus */
-  onFocus?: () => void;
-  /** Callback fired on blur */
-  onBlur?: () => void;
-}
-
-/**
- * Toolbar action functions returned by the composable.
- */
-export interface EditorToolbarActions {
-  toggleBold: () => void;
-  toggleItalic: () => void;
-  toggleStrike: () => void;
-  toggleCode: () => void;
-  setParagraph: () => void;
-  setHeading: (level: 1 | 2 | 3) => void;
-  toggleBulletList: () => void;
-  toggleOrderedList: () => void;
-  toggleBlockquote: () => void;
-  toggleCodeBlock: () => void;
-  setLink: (href: string) => void;
-  unsetLink: () => void;
-  setImage: (src: string, alt?: string) => void;
-  setTextAlign: (alignment: 'left' | 'center' | 'right') => void;
-  undo: () => void;
-  redo: () => void;
-  focus: () => void;
-  blur: () => void;
-  clear: () => void;
-}
-
-/**
- * Active-state flags for toolbar highlighting.
- */
-export interface EditorActiveState {
-  bold: boolean;
-  italic: boolean;
-  strike: boolean;
-  code: boolean;
-  paragraph: boolean;
-  heading1: boolean;
-  heading2: boolean;
-  heading3: boolean;
-  bulletList: boolean;
-  orderedList: boolean;
-  blockquote: boolean;
-  codeBlock: boolean;
-  link: boolean;
-}
-
-/**
- * Return type of the useEditor composable.
- */
-export interface UseEditorReturn {
-  /** The raw tiptap Editor instance (may be null before creation) */
-  editor: ShallowRef<Editor | undefined>;
-  /** Whether the editor has been created and is ready */
-  isReady: Ref<boolean>;
-  /** Toolbar action methods */
-  actions: ComputedRef<EditorToolbarActions | null>;
-  /** Active formatting state */
-  activeState: ComputedRef<EditorActiveState>;
-  /** Update editor content programmatically */
-  setContent: (html: string) => void;
-  /** Toggle the editable state */
-  setEditable: (editable: boolean) => void;
-  /** Get current content as HTML */
-  getHTML: () => string;
-  /** Get current content as plain text */
-  getText: () => string;
-  /** Whether undo is available */
-  canUndo: ComputedRef<boolean>;
-  /** Whether redo is available */
-  canRedo: ComputedRef<boolean>;
-}

package/compositions/editor/useEditor.ts

@@ -1,224 +0,0 @@
-/**
- * @description Headless editor composable built on tiptap
- * @author kine-design
- * @date 2026/5/22
- * @version v1.0.0
- *
- * Provides editor state, toolbar actions, and active-state tracking
- * without any rendering — the UI layer consumes this composable.
- */
-import { ref, computed, onBeforeUnmount } from 'vue';
-import { useEditor as useTiptapEditor } from '@tiptap/vue-3';
-import StarterKit from '@tiptap/starter-kit';
-import Link from '@tiptap/extension-link';
-import Image from '@tiptap/extension-image';
-import Placeholder from '@tiptap/extension-placeholder';
-import TextAlign from '@tiptap/extension-text-align';
-import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
-import { common, createLowlight } from 'lowlight';
-import type { UseEditorOptions, EditorToolbarActions, EditorActiveState } from './types';
-
-const lowlight = createLowlight(common);
-
-export function useEditor(options: UseEditorOptions = {}) {
-  const {
-    content = '',
-    readonly = false,
-    placeholder = 'Start typing...',
-    config = {},
-    onUpdate,
-    onReady,
-    onFocus,
-    onBlur,
-  } = options;
-
-  const isReady = ref(false);
-
-  // Build extension array based on config
-  const buildExtensions = () => {
-    const toolbar = config.toolbar ?? {};
-    const ext = config.extensions ?? {};
-
-    const extensions = [
-      StarterKit.configure({
-        heading: toolbar.heading !== false ? { levels: [1, 2, 3] } : false,
-        bold: toolbar.bold !== false ? {} : false,
-        italic: toolbar.italic !== false ? {} : false,
-        strike: toolbar.strike !== false ? {} : false,
-        code: toolbar.code !== false ? {} : false,
-        bulletList: toolbar.bulletList !== false ? {} : false,
-        orderedList: toolbar.orderedList !== false ? {} : false,
-        blockquote: toolbar.blockquote !== false ? {} : false,
-        // Disable the built-in code block — we use lowlight instead
-        codeBlock: false,
-      }),
-      Placeholder.configure({
-        placeholder: ext.placeholder?.text ?? placeholder,
-      }),
-    ];
-
-    // Code block with syntax highlighting
-    if (toolbar.codeBlock !== false) {
-      extensions.push(
-        CodeBlockLowlight.configure({
-          lowlight,
-          HTMLAttributes: {
-            class: 'k-editor-code-block',
-          },
-        }),
-      );
-    }
-
-    // Link extension
-    if (toolbar.link !== false) {
-      extensions.push(
-        Link.configure({
-          openOnClick: ext.link?.openOnClick ?? false,
-          HTMLAttributes: {
-            class: 'k-editor-link',
-            ...ext.link?.HTMLAttributes,
-          },
-        }),
-      );
-    }
-
-    // Image extension
-    if (toolbar.image !== false) {
-      extensions.push(
-        Image.configure({
-          inline: true,
-          allowBase64: ext.image?.allowBase64 ?? false,
-          HTMLAttributes: {
-            class: 'k-editor-image',
-            ...ext.image?.HTMLAttributes,
-          },
-        }),
-      );
-    }
-
-    // Text alignment
-    if (toolbar.textAlign !== false) {
-      extensions.push(
-        TextAlign.configure({
-          types: ['heading', 'paragraph'],
-        }),
-      );
-    }
-
-    return extensions;
-  };
-
-  // Create the tiptap editor
-  const editor = useTiptapEditor({
-    content,
-    editable: !readonly,
-    extensions: buildExtensions(),
-    onUpdate: ({ editor: e }) => {
-      onUpdate?.(e.getHTML());
-    },
-    onCreate: () => {
-      isReady.value = true;
-      onReady?.();
-    },
-    onFocus: () => {
-      onFocus?.();
-    },
-    onBlur: () => {
-      onBlur?.();
-    },
-  });
-
-  // Toolbar actions
-  const actions = computed<EditorToolbarActions | null>(() => {
-    const e = editor.value;
-    if (!e) return null;
-
-    return {
-      toggleBold: () => { e.chain().focus().toggleBold().run(); },
-      toggleItalic: () => { e.chain().focus().toggleItalic().run(); },
-      toggleStrike: () => { e.chain().focus().toggleStrike().run(); },
-      toggleCode: () => { e.chain().focus().toggleCode().run(); },
-      setParagraph: () => { e.chain().focus().setParagraph().run(); },
-      setHeading: (level: 1 | 2 | 3) => { e.chain().focus().toggleHeading({ level }).run(); },
-      toggleBulletList: () => { e.chain().focus().toggleBulletList().run(); },
-      toggleOrderedList: () => { e.chain().focus().toggleOrderedList().run(); },
-      toggleBlockquote: () => { e.chain().focus().toggleBlockquote().run(); },
-      toggleCodeBlock: () => { e.chain().focus().toggleCodeBlock().run(); },
-      setLink: (href: string) => { e.chain().focus().setLink({ href }).run(); },
-      unsetLink: () => { e.chain().focus().unsetLink().run(); },
-      setImage: (src: string, alt?: string) => { e.chain().focus().setImage({ src, alt }).run(); },
-      setTextAlign: (alignment: 'left' | 'center' | 'right') => {
-        e.chain().focus().setTextAlign(alignment).run();
-      },
-      undo: () => { e.chain().focus().undo().run(); },
-      redo: () => { e.chain().focus().redo().run(); },
-      focus: () => { e.chain().focus().run(); },
-      blur: () => { e.commands.blur(); },
-      clear: () => { e.chain().focus().clearContent().run(); },
-    };
-  });
-
-  // Active state tracking
-  const activeState = computed<EditorActiveState>(() => {
-    const e = editor.value;
-    if (!e) {
-      return {
-        bold: false, italic: false, strike: false, code: false,
-        paragraph: false, heading1: false, heading2: false, heading3: false,
-        bulletList: false, orderedList: false, blockquote: false,
-        codeBlock: false, link: false,
-      };
-    }
-    return {
-      bold: e.isActive('bold'),
-      italic: e.isActive('italic'),
-      strike: e.isActive('strike'),
-      code: e.isActive('code'),
-      paragraph: e.isActive('paragraph'),
-      heading1: e.isActive('heading', { level: 1 }),
-      heading2: e.isActive('heading', { level: 2 }),
-      heading3: e.isActive('heading', { level: 3 }),
-      bulletList: e.isActive('bulletList'),
-      orderedList: e.isActive('orderedList'),
-      blockquote: e.isActive('blockquote'),
-      codeBlock: e.isActive('codeBlock'),
-      link: e.isActive('link'),
-    };
-  });
-
-  const canUndo = computed(() => editor.value?.can().undo() ?? false);
-  const canRedo = computed(() => editor.value?.can().redo() ?? false);
-
-  // Content management
-  const setContent = (html: string) => {
-    if (!editor.value) return;
-    const current = editor.value.getHTML();
-    if (current === html) return;
-    editor.value.commands.setContent(html);
-  };
-
-  const setEditable = (editable: boolean) => {
-    editor.value?.setEditable(editable);
-  };
-
-  const getHTML = () => editor.value?.getHTML() ?? '';
-  const getText = () => editor.value?.getText() ?? '';
-
-  // Cleanup
-  onBeforeUnmount(() => {
-    editor.value?.destroy();
-  });
-
-  return {
-    editor,
-    isReady,
-    actions,
-    activeState,
-    setContent,
-    setEditable,
-    getHTML,
-    getText,
-    canUndo,
-    canRedo,
-  };
-}

package/compositions/index.ts

@@ -1,15 +0,0 @@
-/**
- * @description compositions barrel export
- * @author kine-design
- * @date 2026/5/22 00:00
- * @version v1.0.0
- *
- * 江湖的业务千篇一律，复杂的代码好几百行。
- */
-export * from './overlay';
-export * from './contextMenu';
-export * from './peekView';
-export * from './commandPalette';
-export * from './tooltip';
-export * from './editor';
-export * from './theme';

package/compositions/overlay/index.ts

@@ -1,14 +0,0 @@
-/**
- * @description overlay composables barrel export
- * @author kine-design
- * @date 2026/5/22 00:00
- * @version v1.0.0
- *
- * 江湖的业务千篇一律，复杂的代码好几百行。
- */
-export {
-  useOverlayStackStore,
-  useOverlayStack,
-  useOverlayItem,
-} from './useOverlayStack';
-export type { OverlayItem, OverlayType } from './useOverlayStack';

package/compositions/overlay/useOverlayStack.ts

@@ -1,146 +0,0 @@
-/**
- * @description overlay stack manager — unified z-index and ESC handling for all popups
- * @author kine-design
- * @date 2026/5/22 00:00
- * @version v1.0.0
- *
- * 江湖的业务千篇一律，复杂的代码好几百行。
- */
-import { defineStore } from 'pinia';
-import { computed, ref, onMounted, onBeforeUnmount } from 'vue';
-
-export type OverlayType = 'popover' | 'alert-dialog' | 'context-menu' | 'command-palette';
-
-export interface OverlayItem {
-  id: string;
-  type: OverlayType;
-  close: () => void;
-  zIndex: number;
-}
-
-const Z_INDEX_BASE = 100;
-
-let idCounter = 0;
-const generateId = (type: OverlayType) => `overlay-${type}-${++idCounter}`;
-
-export const useOverlayStackStore = defineStore('overlayStack', () => {
-  const overlayStack = ref<OverlayItem[]>([]);
-
-  const isEmpty = computed(() => overlayStack.value.length === 0);
-  const topItem = computed(() =>
-    overlayStack.value.length > 0
-      ? overlayStack.value[overlayStack.value.length - 1]
-      : undefined,
-  );
-
-  const push = (item: Omit<OverlayItem, 'zIndex'>) => {
-    const zIndex = overlayStack.value.length + Z_INDEX_BASE;
-    const entry: OverlayItem = { ...item, zIndex };
-    overlayStack.value.push(entry);
-    return entry;
-  };
-
-  const pop = () => {
-    const item = overlayStack.value.pop();
-    if (item) {
-      item.close();
-    }
-    return item;
-  };
-
-  const remove = (id: string) => {
-    const index = overlayStack.value.findIndex(item => item.id === id);
-    if (index !== -1) {
-      overlayStack.value.splice(index, 1);
-      recalculateZIndices();
-    }
-  };
-
-  const recalculateZIndices = () => {
-    overlayStack.value.forEach((item, index) => {
-      item.zIndex = index + Z_INDEX_BASE;
-    });
-  };
-
-  const handleEsc = (e: KeyboardEvent) => {
-    if (e.key === 'Escape' && !isEmpty.value) {
-      pop();
-    }
-  };
-
-  let listenerAttached = false;
-
-  const attachEscListener = () => {
-    if (!listenerAttached) {
-      document.addEventListener('keydown', handleEsc);
-      listenerAttached = true;
-    }
-  };
-
-  const detachEscListener = () => {
-    if (listenerAttached) {
-      document.removeEventListener('keydown', handleEsc);
-      listenerAttached = false;
-    }
-  };
-
-  return {
-    overlayStack,
-    isEmpty,
-    topItem,
-    push,
-    pop,
-    remove,
-    attachEscListener,
-    detachEscListener,
-  };
-});
-
-export function useOverlayStack() {
-  const store = useOverlayStackStore();
-
-  onMounted(() => {
-    store.attachEscListener();
-  });
-
-  onBeforeUnmount(() => {
-    store.detachEscListener();
-  });
-
-  return store;
-}
-
-export function useOverlayItem(type: OverlayType) {
-  const store = useOverlayStackStore();
-  let itemId: string | undefined;
-
-  const register = (closeFn: () => void) => {
-    const id = generateId(type);
-    const entry = store.push({ id, type, close: closeFn });
-    itemId = entry.id;
-    return entry;
-  };
-
-  const unregister = () => {
-    if (itemId) {
-      store.remove(itemId);
-      itemId = undefined;
-    }
-  };
-
-  const currentZIndex = computed(() => {
-    if (!itemId) return undefined;
-    const item = store.overlayStack.find((i: OverlayItem) => i.id === itemId);
-    return item?.zIndex;
-  });
-
-  onBeforeUnmount(() => {
-    unregister();
-  });
-
-  return {
-    register,
-    unregister,
-    currentZIndex,
-  };
-}

package/compositions/peekView/index.ts

@@ -1,10 +0,0 @@
-/**
- * @description peekView composables barrel export
- * @author kine-design
- * @date 2026/5/22
- * @version v1.0.0
- *
- * 江湖的业务千篇一律，复杂的代码好几百行。
- */
-export { usePeekView } from './usePeekView';
-export type { PeekViewMode, UsePeekViewOptions } from './usePeekView';

package/compositions/peekView/usePeekView.ts

@@ -1,99 +0,0 @@
-/**
- * @description PeekView composable — state management for non-modal peek panels
- * @author kine-design
- * @date 2026/5/22
- * @version v1.0.0
- *
- * 江湖的业务千篇一律，复杂的代码好几百行。
- */
-import { ref, onMounted } from 'vue';
-import { useOverlayStackStore } from '../overlay/useOverlayStack';
-
-export type PeekViewMode = 'side' | 'modal' | 'full';
-
-export interface UsePeekViewOptions {
-  /** Default mode when opening without explicit mode */
-  defaultMode?: PeekViewMode;
-  /** Enable URL query param sync (?peek=<id>) */
-  urlSync?: boolean;
-}
-
-export function usePeekView(options: UsePeekViewOptions = {}) {
-  const { defaultMode = 'side', urlSync = false } = options;
-
-  const isOpen = ref(false);
-  const mode = ref<PeekViewMode>(defaultMode);
-  const peekId = ref<string | undefined>(undefined);
-
-  // URL sync helpers
-  const readPeekFromUrl = (): string | undefined => {
-    if (typeof window === 'undefined') return undefined;
-    const params = new URLSearchParams(window.location.search);
-    return params.get('peek') || undefined;
-  };
-
-  const writePeekToUrl = (id: string | undefined) => {
-    if (typeof window === 'undefined') return;
-    const url = new URL(window.location.href);
-    if (id) {
-      url.searchParams.set('peek', id);
-    } else {
-      url.searchParams.delete('peek');
-    }
-    window.history.replaceState(window.history.state, '', url.toString());
-  };
-
-  const open = (id: string, openMode?: PeekViewMode) => {
-    peekId.value = id;
-    mode.value = openMode ?? defaultMode;
-    isOpen.value = true;
-    if (urlSync) {
-      writePeekToUrl(id);
-    }
-  };
-
-  const close = () => {
-    isOpen.value = false;
-    peekId.value = undefined;
-    if (urlSync) {
-      writePeekToUrl(undefined);
-    }
-  };
-
-  const setMode = (newMode: PeekViewMode) => {
-    mode.value = newMode;
-  };
-
-  // Outside click handler: close only if overlay stack is empty
-  const handleOutsideClick = (event: MouseEvent, panelEl: HTMLElement | null) => {
-    if (!isOpen.value || !panelEl) return;
-
-    const overlayStore = useOverlayStackStore();
-    if (!overlayStore.isEmpty) return;
-
-    const target = event.target as Node;
-    if (!panelEl.contains(target)) {
-      close();
-    }
-  };
-
-  // Initialize from URL on mount (if urlSync is enabled)
-  onMounted(() => {
-    if (urlSync) {
-      const urlPeekId = readPeekFromUrl();
-      if (urlPeekId) {
-        open(urlPeekId);
-      }
-    }
-  });
-
-  return {
-    isOpen,
-    mode,
-    peekId,
-    open,
-    close,
-    setMode,
-    handleOutsideClick,
-  };
-}

package/compositions/theme/index.ts

@@ -1,17 +0,0 @@
-/**
- * @description theme composables barrel export
- * @author kine-design
- * @date 2026/5/22
- * @version v1.0.0
- *
- * 江湖的业务千篇一律，复杂的代码好几百行。
- */
-export { useThemeStore } from './useTheme';
-export type {
-  ThemeDefinition,
-  ThemeTokens,
-  ThemeTokenCategory,
-  ThemeOverrides,
-  PersistedThemeState,
-} from './types';
-export { lightTheme, darkTheme, compactTheme } from './presets';