@docyrus/ui-pro-ai-assistant 0.0.2 → 0.0.3

package/src/internal/plate-editor/plate-ui/toc-node-static.tsx

@@ -1,142 +0,0 @@
-
-import { BaseTocPlugin, type Heading, isHeading } from '@platejs/toc';
-import { cva } from 'class-variance-authority';
-import {
-  KEYS, NodeApi, type SlateEditor, type TElement
-} from 'platejs';
-import { SlateElement, type SlateElementProps } from 'platejs/static';
-
-import { Button } from './button';
-
-const headingItemVariants = cva(
-  'block h-auto w-full cursor-pointer truncate rounded-none px-0.5 py-1.5 text-left font-medium text-muted-foreground underline decoration-[0.5px] underline-offset-4 hover:bg-accent hover:text-muted-foreground',
-  {
-    variants: {
-      depth: {
-        1: 'pl-0.5',
-        2: 'pl-[26px]',
-        3: 'pl-[50px]'
-      }
-    }
-  }
-);
-
-export function TocElementStatic(props: SlateElementProps) {
-  const { editor } = props;
-  const headingList = getHeadingList(editor);
-
-  return (
-    <SlateElement {...props} className="mb-1 p-0">
-      <div>
-        {headingList.length > 0 ? (
-          headingList.map(item => (
-            <Button
-              className={headingItemVariants({ depth: item.depth as any })}
-              key={item.title}
-              variant="ghost">
-              {item.title}
-            </Button>
-          ))
-        ) : (
-          <div className="text-gray-500 text-sm">
-            Create a heading to display the table of contents.
-          </div>
-        )}
-      </div>
-      {props.children}
-    </SlateElement>
-  );
-}
-
-const headingLevels = {
-  [KEYS.h1]: 1,
-  [KEYS.h2]: 2,
-  [KEYS.h3]: 3,
-  [KEYS.h4]: 4,
-  [KEYS.h5]: 5,
-  [KEYS.h6]: 6
-};
-
-const getHeadingList = (editor?: SlateEditor) => {
-  if (!editor) return [];
-
-  const options = editor.getOptions(BaseTocPlugin);
-
-  if (options.queryHeading) {
-    return options.queryHeading(editor);
-  }
-
-  const headingList: Heading[] = [];
-
-  const values = editor.api.nodes({
-    at: [],
-    match: (n: TElement) => isHeading(n)
-  }) as Array<[TElement, any]>;
-
-  if (!values) return [];
-
-  for (const [node, path] of values) {
-    const { type } = node as TElement;
-    const title = NodeApi.string(node);
-    const depth = headingLevels[type as keyof typeof headingLevels];
-    const id = node.id as string;
-
-    if (title) {
-      headingList.push({
-        id, depth, path, title, type
-      });
-    }
-  }
-
-  return headingList;
-};
-
-/**
- * DOCX-compatible TOC component.
- * Renders TOC items as anchor links for proper Word internal navigation.
- */
-export function TocElementDocx(props: SlateElementProps) {
-  const { editor } = props;
-  const headingList = getHeadingList(editor);
-
-  const depthIndent: Record<number, string> = {
-    1: '0',
-    2: '24pt',
-    3: '48pt'
-  };
-
-  return (
-    <SlateElement {...props}>
-      <div
-        style={{
-          marginBottom: '12pt',
-          padding: '8pt 0'
-        }}>
-        {headingList.length > 0 ? (
-          headingList.map(item => (
-            <p
-              key={item.id}
-              style={{
-                margin: '4pt 0',
-                paddingLeft: depthIndent[item.depth] || '0'
-              }}>
-              <a
-                href={`#${item.id}`}
-                style={{
-                  color: '#0066cc',
-                  textDecoration: 'underline'
-                }}>
-                {item.title}
-              </a>
-            </p>
-          ))
-        ) : (
-          <p style={{ color: '#666', fontSize: '10pt' }}>
-            Create a heading to display the table of contents.
-          </p>
-        )}
-      </div>
-      {props.children}
-    </SlateElement>
-  );
-}

package/src/internal/plate-editor/plate-ui/toc-node.tsx

@@ -1,57 +0,0 @@
-import { BlockSelectionPlugin } from '@platejs/selection/react';
-import { useTocElement, useTocElementState } from '@platejs/toc/react';
-import { cva } from 'class-variance-authority';
-import { PlateElement, type PlateElementProps } from 'platejs/react';
-
-import { Button } from './button';
-
-const headingItemVariants = cva(
-  'block h-auto w-full cursor-pointer truncate rounded-none px-0.5 py-1.5 text-left font-medium text-muted-foreground underline decoration-[0.5px] underline-offset-4 hover:bg-accent hover:text-muted-foreground',
-  {
-    variants: {
-      depth: {
-        1: 'pl-0.5',
-        2: 'pl-[26px]',
-        3: 'pl-[50px]'
-      }
-    }
-  }
-);
-
-export function TocElement(props: PlateElementProps) {
-  const { editor, element } = props;
-  const state = useTocElementState();
-  const { props: btnProps } = useTocElement(state);
-  const { headingList } = state;
-
-  return (
-    <PlateElement {...props} className="my-1">
-      <div contentEditable={false}>
-        {headingList.length > 0 ? (
-          headingList.map(item => (
-            <Button
-              aria-current
-              className={headingItemVariants({ depth: item.depth as any })}
-              key={item.id}
-              onClick={e => btnProps.onClick(e, item, 'smooth')}
-              variant="ghost">
-              {item.title}
-            </Button>
-          ))
-        ) : (
-          <div
-            className="cursor-text select-none px-1 py-[3px] text-muted-foreground/80 text-sm"
-            onClick={() => {
-              editor
-                .getApi(BlockSelectionPlugin)
-                .blockSelection.set(element.id as string);
-            }}
-            role="button">
-            Add headings to display the table of contents.
-          </div>
-        )}
-      </div>
-      {props.children}
-    </PlateElement>
-  );
-}

package/src/internal/plate-editor/plate-ui/toc-sidebar.tsx

@@ -1,48 +0,0 @@
-'use client';
-
-import { useTocSideBar, useTocSideBarState } from '@platejs/toc/react';
-import { cva } from 'class-variance-authority';
-
-import { Button } from './button';
-
-const headingItemVariants = cva(
-  'block w-full cursor-pointer truncate rounded-none px-1 py-1 text-left text-muted-foreground text-sm transition-colors hover:bg-accent',
-  {
-    variants: {
-      depth: {
-        1: 'pl-1 font-medium',
-        2: 'pl-4',
-        3: 'pl-7'
-      }
-    }
-  }
-);
-
-export function TocSidebar() {
-  const state = useTocSideBarState({ open: true });
-  const { headingList } = state;
-  const { navProps } = useTocSideBar(state);
-
-  if (headingList.length === 0) return null;
-
-  return (
-    <nav {...navProps} className="sticky top-20 hidden w-[200px] shrink-0 lg:block">
-      <div className="flex flex-col gap-0.5">
-        {headingList.map((item: any) => (
-          <Button
-            className={headingItemVariants({ depth: item.depth as any })}
-            key={item.id}
-            onClick={(e) => {
-              e.preventDefault();
-              const el = document.getElementById(item.id);
-
-              el?.scrollIntoView({ behavior: 'smooth' });
-            }}
-            variant="ghost">
-            {item.title}
-          </Button>
-        ))}
-      </div>
-    </nav>
-  );
-}

package/src/internal/plate-editor/plate-ui/toggle-node-static.tsx

@@ -1,18 +0,0 @@
-
-import { ChevronRightIcon } from 'lucide-react';
-import { SlateElement, type SlateElementProps } from 'platejs/static';
-
-export function ToggleElementStatic(props: SlateElementProps) {
-  return (
-    <SlateElement {...props} className="mb-1 pl-6">
-      <div>
-        <span
-          className="absolute top-0.5 left-0 flex cursor-pointer select-none items-center justify-center rounded-sm p-px transition-bg-ease hover:bg-slate-200"
-          contentEditable={false}>
-          <ChevronRightIcon className="rotate-0 transition-transform duration-75" />
-        </span>
-        {props.children}
-      </div>
-    </SlateElement>
-  );
-}

package/src/internal/plate-editor/plate-ui/toggle-node.tsx

@@ -1,33 +0,0 @@
-import { useToggleButton, useToggleButtonState } from '@platejs/toggle/react';
-import { ChevronRightIcon } from 'lucide-react';
-import {
-  PlateElement,
-  type PlateElementProps,
-  useElement
-} from 'platejs/react';
-
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-export function ToggleElement(props: PlateElementProps) {
-  const element = useElement();
-  const state = useToggleButtonState(element.id as string);
-  const { buttonProps, open } = useToggleButton(state);
-
-  return (
-    <PlateElement {...props} className="mb-1 pl-6">
-      <div>
-        <span
-          className="absolute top-0.5 left-0 flex cursor-pointer select-none items-center justify-center rounded-sm p-px transition-bg-ease hover:bg-slate-200"
-          contentEditable={false}
-          {...buttonProps}>
-          <ChevronRightIcon
-            className={cn(
-              'transition-transform duration-75',
-              open ? 'rotate-90' : 'rotate-0'
-            )} />
-        </span>
-        {props.children}
-      </div>
-    </PlateElement>
-  );
-}

package/src/internal/plate-editor/plate-ui/toggle-toolbar-button.tsx

@@ -1,24 +0,0 @@
-'use client';
-
-import { type ComponentProps } from 'react';
-
-import {
-  useToggleToolbarButton,
-  useToggleToolbarButtonState
-} from '@platejs/toggle/react';
-import { ListCollapseIcon } from 'lucide-react';
-
-import { ToolbarButton } from './toolbar';
-
-export function ToggleToolbarButton(
-  props: ComponentProps<typeof ToolbarButton>
-) {
-  const state = useToggleToolbarButtonState();
-  const { props: buttonProps } = useToggleToolbarButton(state);
-
-  return (
-    <ToolbarButton {...props} {...buttonProps} tooltip="Toggle">
-      <ListCollapseIcon />
-    </ToolbarButton>
-  );
-}

package/src/internal/plate-editor/plate-ui/toggle.tsx

@@ -1,3 +0,0 @@
-'use client';
-
-export { Toggle, toggleVariants } from '@docyrus/ui-pro-shared/toggle';

package/src/internal/plate-editor/plate-ui/toolbar.tsx

@@ -1,378 +0,0 @@
-'use client';
-
-import {
-  useEffect, useState, type ComponentProps, type ComponentPropsWithoutRef, type ElementType, type ReactNode
-} from 'react';
-
-import { type VariantProps, cva } from 'class-variance-authority';
-import { ChevronDown } from 'lucide-react';
-import { Toolbar as ToolbarPrimitive, Tooltip as TooltipPrimitive } from 'radix-ui';
-
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-import {
-  DropdownMenuLabel,
-  DropdownMenuRadioGroup,
-  DropdownMenuSeparator
-} from './dropdown-menu';
-import { Separator } from './separator';
-import { Tooltip, TooltipProvider, TooltipTrigger } from './tooltip';
-
-export function Toolbar({
-  className,
-  ...props
-}: ComponentProps<typeof ToolbarPrimitive.Root>) {
-  return (
-    <ToolbarPrimitive.Root
-      className={cn('relative flex flex-nowrap select-none items-center gap-1', className)}
-      {...props} />
-  );
-}
-
-export function ToolbarToggleGroup({
-  className,
-  ...props
-}: ComponentProps<typeof ToolbarPrimitive.ToolbarToggleGroup>) {
-  return (
-    <ToolbarPrimitive.ToolbarToggleGroup
-      className={cn('flex items-center', className)}
-      {...props} />
-  );
-}
-
-export function ToolbarLink({
-  className,
-  ...props
-}: ComponentProps<typeof ToolbarPrimitive.Link>) {
-  return (
-    <ToolbarPrimitive.Link
-      className={cn('font-medium underline underline-offset-4', className)}
-      {...props} />
-  );
-}
-
-export function ToolbarSeparator({
-  className,
-  ...props
-}: ComponentProps<typeof ToolbarPrimitive.Separator>) {
-  return (
-    <ToolbarPrimitive.Separator
-      className={cn('mx-2 my-1 w-px shrink-0 bg-border', className)}
-      {...props} />
-  );
-}
-
-// From toggleVariants
-export const toolbarButtonVariants = cva(
-  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-[color,box-shadow] hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-checked:bg-accent aria-checked:text-accent-foreground aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-  {
-    defaultVariants: {
-      size: 'default',
-      variant: 'default'
-    },
-    variants: {
-      size: {
-        default: 'h-9 min-w-9 px-2',
-        lg: 'h-10 min-w-10 px-2.5',
-        sm: 'h-8 min-w-8 px-1.5',
-        none: ''
-      },
-      variant: {
-        default: 'bg-transparent',
-        outline:
-          'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
-        media:
-          'no-focus-ring m-0 h-auto rounded-none not-last:border-r not-last:border-r-white/20 bg-black/20 px-1.5 py-1 text-white hover:bg-white/5 focus:bg-white/5 [&_svg]:size-[14px] [&_svg]:text-white'
-      }
-    }
-  }
-);
-
-const dropdownArrowVariants = cva(
-  cn(
-    'inline-flex items-center justify-center rounded-r-md font-medium text-foreground text-sm transition-colors disabled:pointer-events-none disabled:opacity-50'
-  ),
-  {
-    defaultVariants: {
-      size: 'sm',
-      variant: 'default'
-    },
-    variants: {
-      size: {
-        default: 'h-9 w-6',
-        lg: 'h-10 w-8',
-        sm: 'h-8 w-4'
-      },
-      variant: {
-        default:
-          'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',
-        outline:
-          'border border-input border-l-0 bg-transparent hover:bg-accent hover:text-accent-foreground'
-      }
-    }
-  }
-);
-
-type ToolbarButtonProps = {
-  isDropdown?: boolean;
-  pressed?: boolean;
-} & Omit<
-  ComponentPropsWithoutRef<typeof ToolbarToggleItem>,
-  'asChild' | 'value'
->
-& VariantProps<typeof toolbarButtonVariants>;
-
-export const ToolbarButton = withTooltip(({
-  children,
-  className,
-  isDropdown,
-  pressed,
-  size = 'sm',
-  variant,
-  ...props
-}: ToolbarButtonProps) => {
-  return typeof pressed === 'boolean' ? (
-    <ToolbarToggleGroup disabled={props.disabled} value="single" type="single">
-      <ToolbarToggleItem
-        className={cn(
-          toolbarButtonVariants({
-            size,
-            variant
-          }),
-          isDropdown && 'justify-between gap-1 pr-1',
-          className
-        )}
-        value={pressed ? 'single' : ''}
-        {...props}>
-        {isDropdown ? (
-          <>
-            <div className="flex flex-1 items-center gap-2 whitespace-nowrap">
-              {children}
-            </div>
-            <div>
-              <ChevronDown
-                className="size-3.5 text-muted-foreground"
-                data-icon />
-            </div>
-          </>
-        ) : (
-          children
-        )}
-      </ToolbarToggleItem>
-    </ToolbarToggleGroup>
-  ) : (
-    <ToolbarPrimitive.Button
-      className={cn(
-        toolbarButtonVariants({
-          size,
-          variant
-        }),
-        isDropdown && 'pr-1',
-        className
-      )}
-      {...props}>
-      {children}
-    </ToolbarPrimitive.Button>
-  );
-});
-
-export function ToolbarSplitButton({
-  className,
-  ...props
-}: ComponentPropsWithoutRef<typeof ToolbarButton>) {
-  return (
-    <ToolbarButton
-      className={cn('group flex gap-0 px-0 hover:bg-transparent', className)}
-      {...props} />
-  );
-}
-
-type ToolbarSplitButtonPrimaryProps = Omit<
-  ComponentPropsWithoutRef<typeof ToolbarToggleItem>,
-  'value'
->
-& VariantProps<typeof toolbarButtonVariants>;
-
-export function ToolbarSplitButtonPrimary({
-  children,
-  className,
-  size = 'sm',
-  variant,
-  ...props
-}: ToolbarSplitButtonPrimaryProps) {
-  return (
-    <span
-      className={cn(
-        toolbarButtonVariants({
-          size,
-          variant
-        }),
-        'rounded-r-none',
-        'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground',
-        className
-      )}
-      {...props}>
-      {children}
-    </span>
-  );
-}
-
-export function ToolbarSplitButtonSecondary({
-  className,
-  size,
-  variant,
-  ...props
-}: ComponentPropsWithoutRef<'span'>
-  & VariantProps<typeof dropdownArrowVariants>) {
-  return (
-    <span
-      className={cn(
-        dropdownArrowVariants({
-          size,
-          variant
-        }),
-        'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground',
-        className
-      )}
-      onClick={e => e.stopPropagation()}
-      role="button"
-      {...props}>
-      <ChevronDown className="size-3.5 text-muted-foreground" data-icon />
-    </span>
-  );
-}
-
-export function ToolbarToggleItem({
-  className,
-  size = 'sm',
-  variant,
-  ...props
-}: ComponentProps<typeof ToolbarPrimitive.ToggleItem>
-  & VariantProps<typeof toolbarButtonVariants>) {
-  return (
-    <ToolbarPrimitive.ToggleItem
-      className={cn(toolbarButtonVariants({ size, variant }), className)}
-      {...props} />
-  );
-}
-
-export function ToolbarGroup({
-  children,
-  className
-}: ComponentProps<'div'>) {
-  return (
-    <div
-      className={cn(
-        'group/toolbar-group',
-        'relative hidden has-[button]:flex flex-shrink-0',
-        className
-      )}>
-      <div className="flex items-center flex-shrink-0">{children}</div>
-
-      <div className="group-last/toolbar-group:hidden! mx-1.5 py-0.5">
-        <Separator orientation="vertical" />
-      </div>
-    </div>
-  );
-}
-
-type TooltipProps<T extends ElementType> = {
-  tooltip?: ReactNode;
-  tooltipContentProps?: Omit<
-    ComponentPropsWithoutRef<typeof TooltipContent>,
-    'children'
-  >;
-  tooltipProps?: Omit<
-    ComponentPropsWithoutRef<typeof Tooltip>,
-    'children'
-  >;
-  tooltipTriggerProps?: ComponentPropsWithoutRef<typeof TooltipTrigger>;
-} & ComponentProps<T>;
-
-function withTooltip<T extends ElementType>(Component: T) {
-  return function ExtendComponent({
-    tooltip,
-    tooltipContentProps,
-    tooltipProps,
-    tooltipTriggerProps,
-    ...props
-  }: TooltipProps<T>) {
-    const [mounted, setMounted] = useState(false);
-
-    useEffect(() => {
-      setMounted(true);
-    }, []);
-
-    const component = <Component {...(props as ComponentProps<T>)} />;
-
-    if (tooltip && mounted) {
-      return (
-        <TooltipProvider>
-          <Tooltip {...tooltipProps}>
-            <TooltipTrigger asChild {...tooltipTriggerProps}>
-              {component}
-            </TooltipTrigger>
-
-            <TooltipContent {...tooltipContentProps}>{tooltip}</TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      );
-    }
-
-    return component;
-  };
-}
-
-function TooltipContent({
-  children,
-  className,
-  sideOffset = 4,
-  ...props
-}: ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        className={cn(
-          'z-50 w-fit origin-(--radix-tooltip-content-transform-origin) text-balance rounded-md bg-primary px-3 py-1.5 text-primary-foreground text-xs',
-          className
-        )}
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        {...props}>
-        {children}
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  );
-}
-
-export function ToolbarMenuGroup({
-  children,
-  className,
-  label,
-  ...props
-}: ComponentProps<typeof DropdownMenuRadioGroup> & { label?: string }) {
-  return (
-    <>
-      <DropdownMenuSeparator
-        className={cn(
-          'hidden',
-          'mb-0 shrink-0 peer-has-[[role=menuitem]]/menu-group:block peer-has-[[role=menuitemradio]]/menu-group:block peer-has-[[role=option]]/menu-group:block'
-        )} />
-
-      <DropdownMenuRadioGroup
-        {...props}
-        className={cn(
-          'hidden',
-          'peer/menu-group group/menu-group my-1.5 has-[[role=menuitem]]:block has-[[role=menuitemradio]]:block has-[[role=option]]:block',
-          className
-        )}>
-        {label && (
-          <DropdownMenuLabel className="select-none font-semibold text-muted-foreground text-xs">
-            {label}
-          </DropdownMenuLabel>
-        )}
-        {children}
-      </DropdownMenuRadioGroup>
-    </>
-  );
-}