create-starlight-cms 0.9.0

package/template/src/admin/components/tiptap-ui-primitive/textarea/textarea.scss

@@ -0,0 +1,42 @@
+:root {
+  --tt-textarea-placeholder: var(--tt-gray-light-a-400);
+  --tt-textarea-border: var(--tt-gray-light-a-200);
+  --tt-textarea-border-focus: var(--tt-gray-light-a-300);
+}
+
+.dark {
+  --tt-textarea-placeholder: var(--tt-gray-dark-a-400);
+  --tt-textarea-border: var(--tt-gray-dark-a-200);
+  --tt-textarea-border-focus: var(--tt-gray-dark-a-300);
+}
+
+.tiptap-textarea {
+  display: flex;
+  width: 100%;
+  min-height: 4rem;
+  padding: 0.5rem 0.625rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--tt-textarea-border);
+  background: transparent;
+  font-size: 1rem;
+  field-sizing: content;
+  outline: none;
+  transition:
+    color,
+    background-color,
+    border-color 150ms;
+}
+
+.tiptap-textarea::placeholder {
+  color: var(--tt-textarea-placeholder);
+}
+
+.tiptap-textarea:focus-visible {
+  border-color: var(--tt-textarea-border-focus);
+}
+
+@media (min-width: 768px) {
+  .tiptap-textarea {
+    font-size: 0.875rem;
+  }
+}

package/template/src/admin/components/tiptap-ui-primitive/textarea/textarea.tsx

@@ -0,0 +1,16 @@
+"use client"
+
+import { cn } from "@/lib/tiptap-utils"
+import "./textarea.scss"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn("textarea", className)}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/template/src/admin/components/tiptap-ui-primitive/toolbar/index.tsx

@@ -0,0 +1 @@
+export * from "./toolbar"

package/template/src/admin/components/tiptap-ui-primitive/toolbar/toolbar.scss

@@ -0,0 +1,98 @@
+:root {
+  --tt-toolbar-height: 2.75rem;
+  --tt-safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  --tt-toolbar-bg-color: var(--white);
+  --tt-toolbar-border-color: var(--tt-gray-light-a-100);
+}
+
+.dark {
+  --tt-toolbar-bg-color: var(--black);
+  --tt-toolbar-border-color: var(--tt-gray-dark-a-50);
+}
+
+.tiptap-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+
+  &-group {
+    display: flex;
+    align-items: center;
+    gap: 0.125rem;
+
+    &:empty {
+      display: none;
+    }
+
+    &:empty + .tiptap-separator,
+    .tiptap-separator + &:empty {
+      display: none;
+    }
+  }
+
+  &[data-variant="fixed"] {
+    position: sticky;
+    top: 0;
+    z-index: 50;
+    width: 100%;
+    min-height: var(--tt-toolbar-height);
+    background: var(--tt-toolbar-bg-color);
+    border-bottom: 1px solid var(--tt-toolbar-border-color);
+    padding: 0 0.5rem;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    @media (max-width: 480px) {
+      position: absolute;
+      top: auto;
+      height: calc(var(--tt-toolbar-height) + var(--tt-safe-area-bottom));
+      border-top: 1px solid var(--tt-toolbar-border-color);
+      border-bottom: none;
+      padding: 0 0.5rem var(--tt-safe-area-bottom);
+      flex-wrap: nowrap;
+      justify-content: flex-start;
+
+      .tiptap-toolbar-group {
+        flex: 0 0 auto;
+      }
+    }
+  }
+
+  &[data-variant="floating"] {
+    --tt-toolbar-padding: 0.125rem;
+    --tt-toolbar-border-width: 1px;
+
+    padding: 0.188rem;
+    border-radius: calc(
+      var(--tt-toolbar-padding) + var(--tt-radius-lg) +
+        var(--tt-toolbar-border-width)
+    );
+    border: var(--tt-toolbar-border-width) solid var(--tt-toolbar-border-color);
+    background-color: var(--tt-toolbar-bg-color);
+    box-shadow: var(--tt-shadow-elevated-md);
+    outline: none;
+    overflow: hidden;
+
+    &[data-plain="true"] {
+      padding: 0;
+      border-radius: 0;
+      border: none;
+      box-shadow: none;
+      background-color: transparent;
+    }
+
+    @media screen and (max-width: 480px) {
+      width: 100%;
+      border-radius: 0;
+      border: none;
+      box-shadow: none;
+    }
+  }
+}

package/template/src/admin/components/tiptap-ui-primitive/toolbar/toolbar.tsx

@@ -0,0 +1,203 @@
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react"
+import { Separator } from "@/components/tiptap-ui-primitive/separator"
+import "@/components/tiptap-ui-primitive/toolbar/toolbar.scss"
+import { cn } from "@/lib/tiptap-utils"
+import { useMenuNavigation } from "@/hooks/use-menu-navigation"
+import { useComposedRef } from "@/hooks/use-composed-ref"
+
+type BaseProps = React.HTMLAttributes<HTMLDivElement>
+
+interface ToolbarProps extends BaseProps {
+  variant?: "floating" | "fixed"
+}
+
+const useToolbarNavigation = (
+  toolbarRef: React.RefObject<HTMLDivElement | null>
+) => {
+  const [items, setItems] = useState<HTMLElement[]>([])
+  const initialContainerTabIndexRef = useRef<number | null | undefined>(
+    undefined
+  )
+
+  const collectItems = useCallback(() => {
+    if (!toolbarRef.current) return []
+    return Array.from(
+      toolbarRef.current.querySelectorAll<HTMLElement>(
+        'button:not([disabled]), [role="button"]:not([disabled]), [tabindex="0"]:not([disabled])'
+      )
+    )
+  }, [toolbarRef])
+
+  useEffect(() => {
+    const toolbar = toolbarRef.current
+    if (!toolbar) return
+
+    if (initialContainerTabIndexRef.current === undefined) {
+      initialContainerTabIndexRef.current =
+        toolbar.hasAttribute("tabindex") && toolbar.tabIndex >= 0
+          ? toolbar.tabIndex
+          : null
+    }
+
+    const updateItems = () => setItems(collectItems())
+
+    updateItems()
+    const observer = new MutationObserver(updateItems)
+    observer.observe(toolbar, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["disabled"],
+    })
+
+    return () => observer.disconnect()
+  }, [collectItems, toolbarRef])
+
+  const { selectedIndex, setSelectedIndex } = useMenuNavigation<HTMLElement>({
+    containerRef: toolbarRef,
+    items,
+    orientation: "horizontal",
+    onSelect: (el) => el.click(),
+    autoSelectFirstItem: false,
+    loopOnTab: false,
+  })
+
+  useEffect(() => {
+    const toolbar = toolbarRef.current
+    if (!toolbar) return
+
+    const handleFocus = (e: FocusEvent) => {
+      const target = e.target as HTMLElement
+      if (toolbar.contains(target)) {
+        target.setAttribute("data-focus-visible", "true")
+        const itemIndex = items.indexOf(target)
+        if (itemIndex >= 0) setSelectedIndex(itemIndex)
+      }
+    }
+
+    const handleBlur = (e: FocusEvent) => {
+      const target = e.target as HTMLElement
+      if (toolbar.contains(target)) target.removeAttribute("data-focus-visible")
+
+      const nextTarget = e.relatedTarget
+      const NodeConstructor = toolbar.ownerDocument.defaultView?.Node
+      const leavesToolbar =
+        !nextTarget ||
+        !NodeConstructor ||
+        !(nextTarget instanceof NodeConstructor) ||
+        !toolbar.contains(nextTarget)
+
+      if (leavesToolbar && initialContainerTabIndexRef.current != null) {
+        queueMicrotask(() => {
+          if (
+            toolbar.isConnected &&
+            !toolbar.contains(toolbar.ownerDocument.activeElement)
+          ) {
+            toolbar.tabIndex = initialContainerTabIndexRef.current!
+            setSelectedIndex(-1)
+          }
+        })
+      }
+    }
+
+    toolbar.addEventListener("focus", handleFocus, true)
+    toolbar.addEventListener("blur", handleBlur, true)
+
+    return () => {
+      toolbar.removeEventListener("focus", handleFocus, true)
+      toolbar.removeEventListener("blur", handleBlur, true)
+    }
+  }, [items, setSelectedIndex, toolbarRef])
+
+  useEffect(() => {
+    if (!items.length) return
+
+    const toolbar = toolbarRef.current
+    if (!toolbar) return
+
+    const initialContainerTabIndex = initialContainerTabIndexRef.current
+    const currentIndex = selectedIndex ?? -1
+
+    if (initialContainerTabIndex != null) {
+      items.forEach((item) => {
+        item.tabIndex = -1
+      })
+
+      if (currentIndex >= 0 && items[currentIndex]) {
+        toolbar.tabIndex = -1
+        if (toolbar.contains(toolbar.ownerDocument.activeElement)) {
+          items[currentIndex].focus()
+        }
+      } else {
+        toolbar.tabIndex = initialContainerTabIndex
+      }
+      return
+    }
+
+    const existingTabStop = items.findIndex((item) => item.tabIndex === 0)
+    const activeIndex =
+      currentIndex >= 0 && items[currentIndex]
+        ? currentIndex
+        : existingTabStop >= 0
+          ? existingTabStop
+          : 0
+
+    items.forEach((item, index) => {
+      item.tabIndex = index === activeIndex ? 0 : -1
+    })
+
+    // Only restore focus while it is inside the toolbar. The item list also
+    // refreshes when focus legitimately lives elsewhere (e.g. a popover
+    // opened from the toolbar autofocused its input), and stealing focus
+    // back would dismiss such overlays.
+    if (
+      currentIndex >= 0 &&
+      toolbar.contains(toolbar.ownerDocument.activeElement)
+    ) {
+      items[activeIndex]?.focus()
+    }
+  }, [selectedIndex, items, toolbarRef])
+}
+
+export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
+  ({ children, className, variant = "fixed", ...props }, ref) => {
+    const toolbarRef = useRef<HTMLDivElement>(null)
+    const composedRef = useComposedRef(toolbarRef, ref)
+    useToolbarNavigation(toolbarRef)
+
+    return (
+      <div
+        ref={composedRef}
+        role="toolbar"
+        aria-label="toolbar"
+        data-variant={variant}
+        className={cn("tiptap-toolbar", className)}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+Toolbar.displayName = "Toolbar"
+
+export const ToolbarGroup = forwardRef<HTMLDivElement, BaseProps>(
+  ({ children, className, ...props }, ref) => (
+    <div
+      ref={ref}
+      role="group"
+      className={cn("tiptap-toolbar-group", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+)
+ToolbarGroup.displayName = "ToolbarGroup"
+
+export const ToolbarSeparator = forwardRef<HTMLDivElement, BaseProps>(
+  ({ ...props }, ref) => (
+    <Separator ref={ref} orientation="vertical" decorative {...props} />
+  )
+)
+ToolbarSeparator.displayName = "ToolbarSeparator"

package/template/src/admin/components/tiptap-ui-primitive/tooltip/index.tsx

@@ -0,0 +1 @@
+export * from "./tooltip"

package/template/src/admin/components/tiptap-ui-primitive/tooltip/tooltip.scss

@@ -0,0 +1,43 @@
+.tiptap-tooltip {
+  --tt-tooltip-bg: var(--tt-gray-light-900);
+  --tt-tooltip-text: var(--white);
+  --tt-kbd: var(--tt-gray-dark-a-400);
+
+  .dark & {
+    --tt-tooltip-bg: var(--white);
+    --tt-tooltip-text: var(--tt-gray-light-600);
+    --tt-kbd: var(--tt-gray-light-a-400);
+  }
+}
+
+.tiptap-tooltip {
+  z-index: 50;
+  overflow: hidden;
+  border-radius: var(--tt-radius-md, 0.375rem);
+  background-color: var(--tt-tooltip-bg);
+  padding: 0.375rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--tt-tooltip-text);
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  text-align: center;
+
+  kbd {
+    display: inline-block;
+    text-align: center;
+    vertical-align: baseline;
+    font-family:
+      ui-sans-serif,
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      "Helvetica Neue",
+      Arial,
+      "Noto Sans",
+      sans-serif;
+    text-transform: capitalize;
+    color: var(--tt-kbd);
+  }
+}

package/template/src/admin/components/tiptap-ui-primitive/tooltip/tooltip.tsx

@@ -0,0 +1,241 @@
+"use client"
+
+import {
+  cloneElement,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useContext,
+  useMemo,
+  useState,
+  version,
+} from "react"
+import {
+  useFloating,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  useHover,
+  useFocus,
+  useDismiss,
+  useRole,
+  useInteractions,
+  useMergeRefs,
+  FloatingPortal,
+  type Placement,
+  type UseFloatingReturn,
+  type ReferenceType,
+  FloatingDelayGroup,
+} from "@floating-ui/react"
+import "@/components/tiptap-ui-primitive/tooltip/tooltip.scss"
+
+interface TooltipProviderProps {
+  children: React.ReactNode
+  initialOpen?: boolean
+  placement?: Placement
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  delay?: number
+  closeDelay?: number
+  timeout?: number
+  useDelayGroup?: boolean
+}
+
+interface TooltipTriggerProps extends Omit<
+  React.HTMLProps<HTMLElement>,
+  "ref"
+> {
+  asChild?: boolean
+  children: React.ReactNode
+}
+
+interface TooltipContentProps extends Omit<
+  React.HTMLProps<HTMLDivElement>,
+  "ref"
+> {
+  children?: React.ReactNode
+  portal?: boolean
+  portalProps?: Omit<React.ComponentProps<typeof FloatingPortal>, "children">
+}
+
+interface TooltipContextValue extends UseFloatingReturn<ReferenceType> {
+  open: boolean
+  setOpen: (open: boolean) => void
+  getReferenceProps: (
+    userProps?: React.HTMLProps<HTMLElement>
+  ) => Record<string, unknown>
+  getFloatingProps: (
+    userProps?: React.HTMLProps<HTMLDivElement>
+  ) => Record<string, unknown>
+}
+
+function useTooltip({
+  initialOpen = false,
+  placement = "top",
+  open: controlledOpen,
+  onOpenChange: setControlledOpen,
+  delay = 600,
+  closeDelay = 0,
+}: Omit<TooltipProviderProps, "children"> = {}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState<boolean>(initialOpen)
+
+  const open = controlledOpen ?? uncontrolledOpen
+  const setOpen = setControlledOpen ?? setUncontrolledOpen
+
+  const data = useFloating({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(4),
+      flip({
+        crossAxis: placement.includes("-"),
+        fallbackAxisSideDirection: "start",
+        padding: 4,
+      }),
+      shift({ padding: 4 }),
+    ],
+  })
+
+  const context = data.context
+
+  const hover = useHover(context, {
+    mouseOnly: true,
+    move: false,
+    restMs: delay,
+    enabled: controlledOpen == null,
+    delay: {
+      close: closeDelay,
+    },
+  })
+  const focus = useFocus(context, {
+    enabled: controlledOpen == null,
+  })
+  const dismiss = useDismiss(context)
+  const role = useRole(context, { role: "tooltip" })
+
+  const interactions = useInteractions([hover, focus, dismiss, role])
+
+  return useMemo(
+    () => ({
+      open,
+      setOpen,
+      ...interactions,
+      ...data,
+    }),
+    [open, setOpen, interactions, data]
+  )
+}
+
+const TooltipContext = createContext<TooltipContextValue | null>(null)
+
+function useTooltipContext() {
+  const context = useContext(TooltipContext)
+
+  if (context == null) {
+    throw new Error("Tooltip components must be wrapped in <TooltipProvider />")
+  }
+
+  return context
+}
+
+export function Tooltip({ children, ...props }: TooltipProviderProps) {
+  const tooltip = useTooltip(props)
+
+  if (!props.useDelayGroup) {
+    return (
+      <TooltipContext.Provider value={tooltip}>
+        {children}
+      </TooltipContext.Provider>
+    )
+  }
+
+  return (
+    <FloatingDelayGroup
+      delay={{ open: props.delay ?? 0, close: props.closeDelay ?? 0 }}
+      timeoutMs={props.timeout}
+    >
+      <TooltipContext.Provider value={tooltip}>
+        {children}
+      </TooltipContext.Provider>
+    </FloatingDelayGroup>
+  )
+}
+
+export const TooltipTrigger = forwardRef<HTMLElement, TooltipTriggerProps>(
+  function TooltipTrigger({ children, asChild = false, ...props }, propRef) {
+    const context = useTooltipContext()
+    const childrenRef = isValidElement(children)
+      ? parseInt(version, 10) >= 19
+        ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (children as { props: { ref?: React.Ref<any> } }).props.ref
+        : // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (children as any).ref
+      : undefined
+    const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef])
+
+    if (asChild && isValidElement(children)) {
+      const dataAttributes = {
+        "data-tooltip-state": context.open ? "open" : "closed",
+      }
+
+      return cloneElement(
+        children,
+        context.getReferenceProps({
+          ref,
+          ...props,
+          ...(typeof children.props === "object" ? children.props : {}),
+          ...dataAttributes,
+        })
+      )
+    }
+
+    return (
+      <button
+        ref={ref}
+        data-tooltip-state={context.open ? "open" : "closed"}
+        {...context.getReferenceProps(props)}
+      >
+        {children}
+      </button>
+    )
+  }
+)
+
+export const TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(
+  function TooltipContent(
+    { style, children, portal = true, portalProps = {}, ...props },
+    propRef
+  ) {
+    const context = useTooltipContext()
+    const ref = useMergeRefs([context.refs.setFloating, propRef])
+
+    if (!context.open) return null
+
+    const content = (
+      <div
+        ref={ref}
+        style={{
+          ...context.floatingStyles,
+          ...style,
+        }}
+        {...context.getFloatingProps(props)}
+        className="tiptap-tooltip"
+      >
+        {children}
+      </div>
+    )
+
+    if (portal) {
+      return <FloatingPortal {...portalProps}>{content}</FloatingPortal>
+    }
+
+    return content
+  }
+)
+
+Tooltip.displayName = "Tooltip"
+TooltipTrigger.displayName = "TooltipTrigger"
+TooltipContent.displayName = "TooltipContent"

package/template/src/admin/hooks/use-composed-ref.ts

@@ -0,0 +1,46 @@
+"use client"
+
+import { useCallback, useRef } from "react"
+
+// basically Exclude<React.ClassAttributes<T>["ref"], string>
+type UserRef<T> =
+  ((instance: T | null) => void) | React.RefObject<T | null> | null | undefined
+
+const updateRef = <T>(ref: NonNullable<UserRef<T>>, value: T | null) => {
+  if (typeof ref === "function") {
+    ref(value)
+  } else if (ref && typeof ref === "object" && "current" in ref) {
+    // Safe assignment without MutableRefObject
+    const mutableRef = ref as { current: T | null }
+    mutableRef.current = value
+  }
+}
+
+export const useComposedRef = <T extends HTMLElement>(
+  libRef: React.RefObject<T | null>,
+  userRef: UserRef<T>
+) => {
+  const prevUserRef = useRef<UserRef<T>>(null)
+
+  return useCallback(
+    (instance: T | null) => {
+      if (libRef && "current" in libRef) {
+        const mutableLibRef = libRef as { current: T | null }
+        mutableLibRef.current = instance
+      }
+
+      if (prevUserRef.current) {
+        updateRef(prevUserRef.current, null)
+      }
+
+      prevUserRef.current = userRef
+
+      if (userRef) {
+        updateRef(userRef, instance)
+      }
+    },
+    [libRef, userRef]
+  )
+}
+
+export default useComposedRef