@ahmedrowaihi/pdf-forge-preview 1.0.0-canary.0

package/src/components/toolbar/toolbar-button.tsx

@@ -0,0 +1,52 @@
+import { motion } from 'framer-motion';
+import { cn } from '../../utils';
+import { Tooltip } from '../tooltip';
+
+interface ToolbarButtonProps extends React.ComponentProps<'button'> {
+  children: React.ReactNode;
+  active?: boolean;
+  tooltip?: React.ReactNode;
+  delayDuration?: number;
+}
+
+export const ToolbarButton = ({
+  children,
+  className,
+  active,
+  tooltip,
+  delayDuration = 500,
+  ...props
+}: ToolbarButtonProps) => {
+  return (
+    <Tooltip.Provider>
+      <Tooltip delayDuration={delayDuration}>
+        <Tooltip.Trigger asChild>
+          <button
+            type="button"
+            {...props}
+            className={cn(
+              'h-full w-fit font-regular flex text-sm text-slate-10 items-center align-middle justify-center px-1 gap-2 relative',
+              'hover:text-slate-12 transition-colors',
+              active && 'data-[state=active]:text-cyan-11',
+              className,
+            )}
+          >
+            {children}
+            {active ? (
+              <motion.span
+                className="-bottom-px absolute rounded-xs left-0 w-full bg-cyan-11 h-px"
+                layoutId="active-toolbar-button"
+                transition={{
+                  type: 'spring',
+                  bounce: 0.2,
+                  duration: 0.6,
+                }}
+              />
+            ) : null}
+          </button>
+        </Tooltip.Trigger>
+        {tooltip ? <Tooltip.Content>{tooltip}</Tooltip.Content> : null}
+      </Tooltip>
+    </Tooltip.Provider>
+  );
+};

package/src/components/toolbar/use-cached-state.ts

@@ -0,0 +1,36 @@
+import { useSyncExternalStore } from 'react';
+
+export const useCachedState = <T>(key: string) => {
+  let value: T | undefined;
+  if (
+    'localStorage' in global &&
+    typeof global.localStorage.getItem === 'function'
+  ) {
+    const storedValue = global.localStorage.getItem(key);
+    if (storedValue !== null && storedValue !== 'undefined') {
+      try {
+        value = JSON.parse(storedValue) as T;
+      } catch (_exception) {
+        console.warn(
+          'Failed to load stored value for',
+          key,
+          'with value',
+          storedValue,
+        );
+      }
+    }
+  }
+
+  return [
+    useSyncExternalStore(
+      () => () => {},
+      () => value,
+      () => undefined,
+    ),
+    function setValue(newValue: T | undefined) {
+      if ('localStorage' in global) {
+        global.localStorage.setItem(key, JSON.stringify(newValue));
+      }
+    },
+  ] as const;
+};

package/src/components/toolbar.tsx

@@ -0,0 +1,182 @@
+'use client';
+
+import * as Tabs from '@radix-ui/react-tabs';
+import { LayoutGroup } from 'framer-motion';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import type { ComponentProps } from 'react';
+import * as React from 'react';
+import { usePreviewContext } from '../contexts/preview';
+import { cn } from '../utils';
+import { IconArrowDown } from './icons/icon-arrow-down';
+import { IconCheck } from './icons/icon-check';
+import { IconInfo } from './icons/icon-info';
+import { ToolbarButton } from './toolbar/toolbar-button';
+
+export type ToolbarTabValue = 'linter';
+
+export const useToolbarState = () => {
+  const searchParams = useSearchParams();
+
+  const activeTab = (searchParams.get('toolbar-panel') ?? undefined) as
+    | ToolbarTabValue
+    | undefined;
+
+  return {
+    activeTab,
+
+    toggled: activeTab !== undefined,
+  };
+};
+
+const ToolbarInner = () => {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const { activeTab, toggled } = useToolbarState();
+
+  const setActivePanelValue = (newValue: ToolbarTabValue | undefined) => {
+    const params = new URLSearchParams(searchParams);
+    if (newValue === undefined) {
+      params.delete('toolbar-panel');
+    } else {
+      params.set('toolbar-panel', newValue);
+    }
+    router.push(`${pathname}?${params.toString()}${location.hash}`);
+  };
+
+  const id = React.useId();
+
+  return (
+    <div
+      data-toggled={toggled}
+      className={cn(
+        'absolute bottom-0 left-0 right-0',
+        'border-t border-slate-6 group/toolbar text-xs text-slate-11 h-52 transition-transform',
+        'data-[toggled=false]:translate-y-42.5',
+      )}
+    >
+      <Tabs.Root
+        value={activeTab ?? ''}
+        onValueChange={(newValue) => {
+          setActivePanelValue(newValue as ToolbarTabValue);
+        }}
+        asChild
+      >
+        <div className="flex flex-col h-full">
+          <Tabs.List className="flex gap-4 px-4 border-b border-solid border-slate-6 h-10 w-full shrink-0">
+            <LayoutGroup id={`toolbar-${id}`}>
+              <Tabs.Trigger asChild value="linter">
+                <ToolbarButton active={activeTab === 'linter'}>
+                  Linter
+                </ToolbarButton>
+              </Tabs.Trigger>
+            </LayoutGroup>
+            <div className="flex gap-0.5 ml-auto">
+              <ToolbarButton
+                delayDuration={0}
+                tooltip={
+                  activeTab === 'linter'
+                    ? 'PDF-specific linting features are coming soon. This will check for page breaks, print CSS issues, font loading problems, and more.'
+                    : 'Info'
+                }
+              >
+                <IconInfo size={24} />
+              </ToolbarButton>
+              <ToolbarButton
+                tooltip="Toggle toolbar"
+                onClick={() => {
+                  if (activeTab === undefined) {
+                    setActivePanelValue('linter');
+                  } else {
+                    setActivePanelValue(undefined);
+                  }
+                }}
+              >
+                <IconArrowDown
+                  size={24}
+                  className="transition-transform group-data-[toggled=false]/toolbar:rotate-180"
+                />
+              </ToolbarButton>
+            </div>
+          </Tabs.List>
+
+          <div className="grow transition-opacity opacity-100 group-data-[toggled=false]/toolbar:opacity-0 overflow-y-auto pr-3 pl-4 pt-3">
+            <Tabs.Content value="linter">
+              <SuccessWrapper>
+                <SuccessIcon />
+                <SuccessTitle>PDF Linter Coming Soon</SuccessTitle>
+                <SuccessDescription>
+                  We're working on PDF-specific linting features that will check
+                  for page breaks, print CSS issues, font loading problems, and
+                  more. Stay tuned!
+                </SuccessDescription>
+              </SuccessWrapper>
+            </Tabs.Content>
+          </div>
+        </div>
+      </Tabs.Root>
+    </div>
+  );
+};
+
+const SuccessWrapper = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="flex flex-col items-center justify-center pt-8">
+      {children}
+    </div>
+  );
+};
+
+const SuccessIcon = () => {
+  return (
+    <div className="relative mb-8 flex items-center justify-center">
+      <div className="h-16 w-16 rounded-full bg-linear-to-br from-green-300/20 opacity-80 to-emerald-500/30 blur-md absolute m-auto left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+      <div className="h-12 w-12 rounded-full bg-linear-to-br from-green-400/80 opacity-10 to-emerald-600/80 absolute m-auto left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-lg" />
+      <div className="h-10 w-10 rounded-full bg-linear-to-br from-green-400 to-emerald-600 flex items-center justify-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-[inset_0_1px_1px_rgba(255,255,255,0.4)]">
+        <IconCheck size={24} className="text-white drop-shadow-xs" />
+      </div>
+    </div>
+  );
+};
+
+const SuccessTitle = ({
+  children,
+  className,
+  ...props
+}: ComponentProps<'h3'>) => {
+  return (
+    <h3
+      className={cn('text-slate-12 font-medium text-base mb-1', className)}
+      {...props}
+    >
+      {children}
+    </h3>
+  );
+};
+
+const SuccessDescription = ({
+  children,
+  className,
+  ...props
+}: ComponentProps<'p'>) => {
+  return (
+    <p
+      className={cn(
+        'text-slate-11 text-sm text-center max-w-[320px]',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </p>
+  );
+};
+
+export function Toolbar() {
+  const { renderedTemplateMetadata } = usePreviewContext();
+
+  if (renderedTemplateMetadata === undefined) return null;
+
+  return <ToolbarInner />;
+}

package/src/components/tooltip-content.tsx

@@ -0,0 +1,31 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
+import { cn } from '../utils';
+
+type ContentElement = React.ComponentRef<typeof TooltipPrimitive.Content>;
+type ContentProps = React.ComponentPropsWithoutRef<
+  typeof TooltipPrimitive.Content
+>;
+
+export type TooltipProps = ContentProps;
+
+export const TooltipContent = React.forwardRef<
+  ContentElement,
+  Readonly<TooltipProps>
+>(({ sideOffset = 6, children, ...props }, forwardedRef) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      {...props}
+      className={cn(
+        'z-20 rounded-md border border-slate-6 bg-black px-3 py-2 text-white text-xs',
+        'font-sans max-w-60',
+      )}
+      ref={forwardedRef}
+      sideOffset={sideOffset}
+    >
+      {children}
+    </TooltipPrimitive.Content>
+  </TooltipPrimitive.Portal>
+));
+
+TooltipContent.displayName = 'TooltipContent';

package/src/components/tooltip.tsx

@@ -0,0 +1,19 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import type * as React from 'react';
+import { TooltipContent } from './tooltip-content';
+
+type RootProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>;
+
+export type TooltipProps = RootProps;
+
+export const TooltipRoot: React.FC<Readonly<TooltipProps>> = ({
+  children,
+  ...props
+}) => <TooltipPrimitive.Root {...props}>{children}</TooltipPrimitive.Root>;
+
+export const Tooltip = Object.assign(TooltipRoot, {
+  Arrow: TooltipPrimitive.TooltipArrow,
+  Provider: TooltipPrimitive.TooltipProvider,
+  Content: TooltipContent,
+  Trigger: TooltipPrimitive.TooltipTrigger,
+});

package/src/components/topbar/active-view-toggle-group.tsx

@@ -0,0 +1,86 @@
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
+import { motion } from 'framer-motion';
+import { cn } from '../../utils';
+import { tabTransition } from '../../utils/constants';
+import { IconMonitor } from '../icons/icon-monitor';
+import { IconSource } from '../icons/icon-source';
+import { Tooltip } from '../tooltip';
+
+interface ActiveViewToggleGroupProps {
+  activeView: string;
+  setActiveView: (view: string) => void;
+}
+
+export const ActiveViewToggleGroup = ({
+  activeView,
+  setActiveView,
+}: ActiveViewToggleGroupProps) => {
+  return (
+    <ToggleGroup.Root
+      aria-label="View mode"
+      className="lg:absolute lg:left-1/2 lg:-translate-x-1/2 inline-block items-center bg-slate-2 border border-slate-6 rounded-md overflow-hidden h-[36px]"
+      onValueChange={(value) => {
+        if (value) setActiveView(value);
+      }}
+      type="single"
+      value={activeView}
+    >
+      <ToggleGroup.Item value="preview">
+        <Tooltip>
+          <Tooltip.Trigger asChild>
+            <div
+              className={cn(
+                'w-9 flex items-center py-2 transition ease-in-out duration-200 relative hover:text-slate-12',
+                {
+                  'text-slate-11': activeView !== 'preview',
+                  'text-slate-12': activeView === 'preview',
+                },
+              )}
+            >
+              {activeView === 'preview' && (
+                <motion.span
+                  animate={{ opacity: 1 }}
+                  className="absolute left-0 right-0 top-0 bottom-0 bg-slate-4"
+                  exit={{ opacity: 0 }}
+                  initial={{ opacity: 0 }}
+                  layoutId="topbar-tabs"
+                  transition={tabTransition}
+                />
+              )}
+              <IconMonitor className="m-auto" />
+            </div>
+          </Tooltip.Trigger>
+          <Tooltip.Content>Preview</Tooltip.Content>
+        </Tooltip>
+      </ToggleGroup.Item>
+      <ToggleGroup.Item value="source">
+        <Tooltip>
+          <Tooltip.Trigger asChild>
+            <div
+              className={cn(
+                'w-9 flex  py-2 transition ease-in-out duration-200 relative hover:text-slate-12',
+                {
+                  'text-slate-11': activeView !== 'source',
+                  'text-slate-12': activeView === 'source',
+                },
+              )}
+            >
+              {activeView === 'source' && (
+                <motion.span
+                  animate={{ opacity: 1 }}
+                  className="absolute left-0 right-0 top-0 bottom-0 bg-slate-4"
+                  exit={{ opacity: 0 }}
+                  initial={{ opacity: 0 }}
+                  layoutId="topbar-tabs"
+                  transition={tabTransition}
+                />
+              )}
+              <IconSource className="m-auto" />
+            </div>
+          </Tooltip.Trigger>
+          <Tooltip.Content>Code</Tooltip.Content>
+        </Tooltip>
+      </ToggleGroup.Item>
+    </ToggleGroup.Root>
+  );
+};

package/src/components/topbar/emulated-dark-mode-toggle.tsx

@@ -0,0 +1,58 @@
+import * as Toggle from '@radix-ui/react-toggle';
+import { cn } from '../../utils';
+import { IconMoon } from '../icons/icon-moon';
+import { IconSun } from '../icons/icon-sun';
+import { Tooltip } from '../tooltip';
+
+interface EmulatedDarkModeToggleProps {
+  enabled: boolean;
+  onChange: (enabled: boolean) => unknown;
+}
+
+export const EmulatedDarkModeToggle = ({
+  enabled,
+  onChange,
+}: EmulatedDarkModeToggleProps) => {
+  return (
+    <Tooltip>
+      <Tooltip.Trigger asChild>
+        <Toggle.Root
+          value="dark"
+          className={cn(
+            'relative w-9 h-9 flex items-center justify-center border border-slate-6 text-sm rounded-lg transition duration-200 ease-in-out',
+            'text-slate-11 hover:text-slate-12 aria-pressed:bg-slate-4',
+          )}
+          pressed={enabled}
+          onPressedChange={() => onChange(!enabled)}
+        >
+          <div className="relative w-5 h-5">
+            <div
+              className={cn(
+                'absolute inset-0 flex items-center justify-center transition-all duration-300 ease-in-out',
+                enabled
+                  ? 'opacity-0 scale-50 rotate-90'
+                  : 'opacity-100 scale-100 rotate-0',
+              )}
+            >
+              <IconMoon />
+            </div>
+            <div
+              className={cn(
+                'absolute inset-0 flex items-center justify-center transition-all duration-300 ease-in-out',
+                enabled
+                  ? 'opacity-100 scale-100 rotate-0'
+                  : 'opacity-0 scale-50 -rotate-90',
+              )}
+            >
+              <IconSun />
+            </div>
+          </div>
+        </Toggle.Root>
+      </Tooltip.Trigger>
+      <Tooltip.Content>
+        When enabled, inverts colors in the preview to emulate dark mode
+        rendering.
+      </Tooltip.Content>
+    </Tooltip>
+  );
+};

package/src/components/topbar/view-size-controls.tsx

@@ -0,0 +1,173 @@
+import * as Popover from '@radix-ui/react-popover';
+import * as React from 'react';
+import { cn } from '../../utils';
+import { IconArrowDown } from '../icons/icon-arrow-down';
+import { Tooltip } from '../tooltip';
+
+interface ViewDimensions {
+  width: number;
+  height: number;
+}
+
+interface ViewSizeControlsProps {
+  minWidth: number;
+  minHeight: number;
+  viewWidth: number;
+  setViewWidth: (width: number) => void;
+  viewHeight: number;
+  setViewHeight: (height: number) => void;
+}
+
+interface PresetOption {
+  name: string;
+  dimensions: ViewDimensions;
+  icon: React.ReactNode;
+}
+
+/**
+ * A4 dimensions in pixels at 96 DPI (standard web resolution)
+ * A4 = 210mm × 297mm = 8.27" × 11.69" = 794px × 1123px at 96 DPI
+ */
+const A4_WIDTH = 794;
+const A4_HEIGHT = 1123;
+
+export const VIEW_PRESETS: PresetOption[] = [
+  {
+    name: 'A4',
+    dimensions: { width: A4_WIDTH, height: A4_HEIGHT },
+    icon: (
+      <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
+        <path
+          d="M3.5 2C3.22386 2 3 2.22386 3 2.5V12.5C3 12.7761 3.22386 13 3.5 13H11.5C11.7761 13 12 12.7761 12 12.5V2.5C12 2.22386 11.7761 2 11.5 2H3.5ZM2 2.5C2 1.67157 2.67157 1 3.5 1H11.5C12.3284 1 13 1.67157 13 2.5V12.5C13 13.3284 12.3284 14 11.5 14H3.5C2.67157 14 2 13.3284 2 12.5V2.5ZM4 3.5C4 3.22386 4.22386 3 4.5 3H10.5C10.7761 3 11 3.22386 11 3.5C11 3.77614 10.7761 4 10.5 4H4.5C4.22386 4 4 3.77614 4 3.5ZM4.5 5C4.22386 5 4 5.22386 4 5.5C4 5.77614 4.22386 6 4.5 6H10.5C10.7761 6 11 5.77614 11 5.5C11 5.22386 10.7761 5 10.5 5H4.5ZM4 7.5C4 7.22386 4.22386 7 4.5 7H10.5C10.7761 7 11 7.22386 11 7.5C11 7.77614 10.7761 8 10.5 8H4.5C4.22386 8 4 7.77614 4 7.5ZM4.5 9C4.22386 9 4 9.22386 4 9.5C4 9.77614 4.22386 10 4.5 10H10.5C10.7761 10 11 9.77614 11 9.5C11 9.22386 10.7761 9 10.5 9H4.5Z"
+          fill="currentColor"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        />
+      </svg>
+    ),
+  },
+  {
+    name: 'Desktop',
+    dimensions: { width: 1024, height: 600 },
+    icon: (
+      <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
+        <path
+          d="M1 3.25C1 3.11193 1.11193 3 1.25 3H13.75C13.8881 3 14 3.11193 14 3.25V10.75C14 10.8881 13.8881 11 13.75 11H1.25C1.11193 11 1 10.8881 1 10.75V3.25ZM1.25 2C0.559643 2 0 2.55964 0 3.25V10.75C0 11.4404 0.559644 12 1.25 12H5.07341L4.82991 13.2986C4.76645 13.6371 5.02612 13.95 5.37049 13.95H9.62951C9.97389 13.95 10.2336 13.6371 10.1701 13.2986L9.92659 12H13.75C14.4404 12 15 11.4404 15 10.75V3.25C15 2.55964 14.4404 2 13.75 2H1.25ZM9.01091 12H5.98909L5.79222 13.05H9.20778L9.01091 12Z"
+          fill="currentColor"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        />
+      </svg>
+    ),
+  },
+];
+
+export const ViewSizeControls = ({
+  minWidth,
+  minHeight,
+  viewWidth,
+  viewHeight,
+  setViewWidth,
+  setViewHeight,
+}: ViewSizeControlsProps) => {
+  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+  const [internalWidth, setInternalWidth] = React.useState(viewWidth);
+  const [internalHeight, setInternalHeight] = React.useState(viewHeight);
+
+  const handlePresetSelect = (dimensions: ViewDimensions) => {
+    setViewWidth(dimensions.width);
+    setViewHeight(dimensions.height);
+  };
+
+  React.useEffect(() => {
+    setInternalWidth(viewWidth);
+    setInternalHeight(viewHeight);
+  }, [viewWidth, viewHeight]);
+
+  return (
+    <div className="relative flex h-9 w-fit overflow-hidden rounded-lg border border-slate-6 text-sm transition-colors duration-300 ease-in-out">
+      {VIEW_PRESETS.map((preset) => (
+        <Tooltip key={preset.name}>
+          <Tooltip.Trigger asChild>
+            <button
+              key={preset.name}
+              onClick={() => handlePresetSelect(preset.dimensions)}
+              className={cn(
+                'relative flex items-center justify-center w-9 transition-colors hover:text-slate-12',
+                {
+                  'bg-slate-4': viewWidth === preset.dimensions.width,
+                },
+              )}
+              type="button"
+            >
+              {preset.icon}
+            </button>
+          </Tooltip.Trigger>
+          <Tooltip.Content>{preset.name}</Tooltip.Content>
+        </Tooltip>
+      ))}
+
+      <Popover.Root open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
+        <Popover.Trigger asChild>
+          <button
+            type="button"
+            className="relative flex items-center justify-center overflow-hidden w-9 text-slate-11 text-sm leading-none outline-hidden transition-colors ease-linear focus-within:text-slate-12 hover:text-slate-12 focus:text-slate-12"
+          >
+            <span className="sr-only">View presets</span>
+            <IconArrowDown
+              className={cn(
+                'transform transition-transform duration-200 ease-[cubic-bezier(.36,.66,.6,1)]',
+                {
+                  '-rotate-180': isDropdownOpen,
+                },
+              )}
+            />
+          </button>
+        </Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Content
+            align="end"
+            className="flex min-w-48 flex-col gap-2 rounded-md border border-slate-8 border-solid bg-black px-2 py-2 text-white"
+            sideOffset={5}
+          >
+            <div className="flex w-full items-center justify-between text-sm gap-2">
+              <span className="font-medium text-slate-11 text-xs">Width</span>
+              <input
+                type="number"
+                value={internalWidth}
+                onChange={(e) => {
+                  const value = Number(e.target.value);
+
+                  setInternalWidth(value);
+
+                  if (value >= minWidth) {
+                    setViewWidth(value);
+                  }
+                }}
+                className="w-20 appearance-none rounded-lg border border-slate-6 bg-slate-5 px-1 py-1 text-sm text-slate-12 placeholder-slate-10 outline-hidden transition duration-300 ease-in-out focus:ring-1 focus:ring-slate-10"
+              />
+            </div>
+
+            <div className="flex w-full items-center justify-between text-sm gap-2">
+              <span className="font-medium text-slate-11 text-xs">Height</span>
+              <input
+                type="number"
+                value={internalHeight}
+                onChange={(e) => {
+                  const value = Number(e.target.value);
+
+                  setInternalHeight(value);
+
+                  if (value >= minHeight) {
+                    setViewHeight(value);
+                  }
+                }}
+                className="w-20 appearance-none rounded-lg border border-slate-6 bg-slate-5 px-1 py-1 text-sm text-slate-12 placeholder-slate-10 outline-hidden transition duration-300 ease-in-out focus:ring-1 focus:ring-slate-10"
+              />
+            </div>
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
+    </div>
+  );
+};