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

package/src/components/icons/icon-monitor.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconMonitor = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ ...props }, forwardedRef) => (
+    <IconBase ref={forwardedRef} {...props}>
+      <path
+        d="M9.75 15.25H17.25C18.3546 15.25 19.25 14.3546 19.25 13.25V6.75C19.25 5.64543 18.3546 4.75 17.25 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V13.25C4.75 14.3546 5.64543 15.25 6.75 15.25H9.75ZM9.75 15.25C9.75 15.25 10 18.25 8 19.25H16C14 18.25 14.25 15.25 14.25 15.25"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+    </IconBase>
+  ),
+);
+
+IconMonitor.displayName = 'IconMonitor';

package/src/components/icons/icon-moon.tsx

@@ -0,0 +1,16 @@
+import type { IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconMoon = ({ ...props }: IconProps) => (
+  <IconBase {...props}>
+    <path
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"
+    />
+  </IconBase>
+);
+
+IconMoon.displayName = 'IconMoon';

package/src/components/icons/icon-phone.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconPhone = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ ...props }, forwardedRef) => (
+    <IconBase ref={forwardedRef} {...props}>
+      <path
+        d="M6.75 6.75C6.75 5.64543 7.64543 4.75 8.75 4.75H15.25C16.3546 4.75 17.25 5.64543 17.25 6.75V17.25C17.25 18.3546 16.3546 19.25 15.25 19.25H8.75C7.64543 19.25 6.75 18.3546 6.75 17.25V6.75Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M12.25 16.75H11.75"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+    </IconBase>
+  ),
+);
+
+IconPhone.displayName = 'IconPhone';

package/src/components/icons/icon-reload.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconReload = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ ...props }, forwardedRef) => (
+    <IconBase ref={forwardedRef} {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.9354 12C17.9354 9.01537 15.5828 6.05264 11.9202 6.05264C8.96229 6.05264 7.50033 8.21724 6.87735 9.36841H8.72625C9.02024 9.36841 9.25858 9.60406 9.25858 9.89473C9.25858 10.1854 9.02024 10.421 8.72625 10.421H5.53232C5.23833 10.421 5 10.1854 5 9.89473V6.73684C5 6.44617 5.23833 6.21052 5.53232 6.21052C5.82631 6.21052 6.06465 6.44617 6.06465 6.73684V8.64548C6.81471 7.33819 8.54959 5 11.9202 5C16.2456 5 19 8.51094 19 12C19 15.4891 16.2456 19 11.9202 19C9.8507 19 8.12769 18.1904 6.9009 16.9562C6.24405 16.2954 5.73107 15.5148 5.38132 14.6744C5.26942 14.4057 5.39911 14.0981 5.67098 13.9875C5.94285 13.8768 6.25395 14.0051 6.36583 14.2738C6.66482 14.9921 7.10262 15.6574 7.66023 16.2183C8.69486 17.2593 10.1475 17.9474 11.9202 17.9474C15.5828 17.9474 17.9354 14.9846 17.9354 12Z"
+        fill="currentColor"
+      />
+    </IconBase>
+  ),
+);
+
+IconReload.displayName = 'IconReload';

package/src/components/icons/icon-source.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconSource = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ ...props }, forwardedRef) => (
+    <IconBase ref={forwardedRef} {...props}>
+      <path
+        d="M17.4 15L21 11.5L17.4 8M6.6 8L3 11.5L6.6 15M14.25 4.5L9.75 18.5"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+    </IconBase>
+  ),
+);
+
+IconSource.displayName = 'IconSource';

package/src/components/icons/icon-stamp.tsx

@@ -0,0 +1,14 @@
+import { forwardRef } from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconStamp = forwardRef<IconElement, IconProps>((props, ref) => (
+  <IconBase {...props} ref={ref}>
+    <path
+      d="M9.122 4.388A2.25 2.25 0 0 1 11.368 2h1.31a2.25 2.25 0 0 1 2.247 2.388l-.604 9.862h4.202a2.25 2.25 0 0 1 2.25 2.25v3.25a.75.75 0 0 1-.75.75h-.5v.75a.75.75 0 0 1-.75.75h-13.5a.75.75 0 0 1-.75-.75v-.75h-.5a.75.75 0 0 1-.75-.75V16.5a2.25 2.25 0 0 1 2.25-2.25h4.203zM19.273 19v-2.5a.75.75 0 0 0-.75-.75h-13a.75.75 0 0 0-.75.75V19zM13.427 4.296a.75.75 0 0 0-.748-.796h-1.31a.75.75 0 0 0-.75.796l.61 9.954h1.589z"
+      fill="currentColor"
+    />
+  </IconBase>
+));
+
+IconStamp.displayName = 'IconStamp';

package/src/components/icons/icon-sun.tsx

@@ -0,0 +1,74 @@
+import type { IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconSun = ({ ...props }: IconProps) => (
+  <IconBase {...props}>
+    <circle
+      cx="12"
+      cy="12"
+      r="4"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M12 2v2"
+    />
+    <path
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M12 20v2"
+    />
+    <path
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="m4.93 4.93 1.41 1.41"
+    />
+    <path
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="m17.66 17.66 1.41 1.41"
+    />
+    <path
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M2 12h2"
+    />
+    <path
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M20 12h2"
+    />
+    <path
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="m6.34 17.66-1.41 1.41"
+    />
+    <path
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="m19.07 4.93-1.41 1.41"
+    />
+  </IconBase>
+);
+
+IconSun.displayName = 'IconSun';

package/src/components/icons/icon-warning.tsx

@@ -0,0 +1,31 @@
+export const IconWarning = (props: React.ComponentProps<'svg'>) => (
+  <svg
+    width="13"
+    height="12"
+    viewBox="0 0 13 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M10.8777 8.99999L6.87766 1.99999C6.79044 1.84609 6.66396 1.71808 6.51112 1.62902C6.35828 1.53997 6.18455 1.49304 6.00766 1.49304C5.83077 1.49304 5.65704 1.53997 5.5042 1.62902C5.35136 1.71808 5.22488 1.84609 5.13766 1.99999L1.13766 8.99999C1.0495 9.15267 1.00327 9.32594 1.00366 9.50224C1.00405 9.67855 1.05105 9.85161 1.13988 10.0039C1.22872 10.1562 1.35623 10.2823 1.50951 10.3694C1.66278 10.4565 1.83636 10.5016 2.01266 10.5H10.0127C10.1881 10.4998 10.3604 10.4535 10.5123 10.3656C10.6642 10.2778 10.7903 10.1515 10.8779 9.99955C10.9656 9.84756 11.0117 9.67518 11.0116 9.49973C11.0116 9.32428 10.9654 9.15193 10.8777 8.99999Z"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M6.0127 4.5V6.5"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M6.0127 8.5H6.01853"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+IconWarning.displayName = 'IconCircleWarning';

package/src/components/index.ts

@@ -0,0 +1,7 @@
+export * from './button';
+export * from './code';
+export * from './heading';
+export * from './logo';
+export * from './sidebar';
+export * from './text';
+export * from './topbar';

package/src/components/logo.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+export const Logo = () => {
+  const id = React.useId();
+  return (
+    <svg
+      fill="none"
+      height="30"
+      viewBox="0 0 180 32"
+      width="180"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{ opacity: 0.9 }}
+    >
+      <g clipPath={`url(#${id})`}>
+        <path
+          clipRule="evenodd"
+          d="M24.4558 24.4853C25.2339 23.7073 25.3805 22.6549 25.2947 21.746C25.2078 20.8254 24.8697 19.8258 24.3896 18.8287C23.957 17.9302 23.3802 16.9745 22.6821 16C23.3802 15.0255 23.957 14.0698 24.3896 13.1713C24.8697 12.1742 25.2078 11.1746 25.2947 10.254C25.3805 9.34508 25.2339 8.29273 24.4558 7.51472C23.6778 6.73671 22.6255 6.59004 21.7165 6.67584C20.796 6.76273 19.7964 7.10086 18.7993 7.58094C17.9007 8.01357 16.945 8.59036 15.9706 9.28842C14.9961 8.59036 14.0404 8.01357 13.1418 7.58094C12.1447 7.10086 11.1451 6.76273 10.2246 6.67584C9.31564 6.59004 8.26329 6.73671 7.48528 7.51472C6.70727 8.29273 6.5606 9.34508 6.6464 10.254C6.7333 11.1746 7.07142 12.1742 7.5515 13.1713C7.98414 14.0698 8.56092 15.0255 9.25898 16C8.56092 16.9745 7.98414 17.9302 7.5515 18.8287C7.07142 19.8258 6.7333 20.8254 6.6464 21.746C6.5606 22.6549 6.70727 23.7073 7.48528 24.4853C8.26329 25.2633 9.31564 25.41 10.2246 25.3242C11.1451 25.2373 12.1447 24.8991 13.1418 24.4191C14.0404 23.9864 14.9961 23.4096 15.9706 22.7116C16.945 23.4096 17.9007 23.9864 18.7993 24.4191C19.7964 24.8991 20.796 25.2373 21.7165 25.3242C22.6255 25.41 23.6778 25.2633 24.4558 24.4853ZM15.9706 20.948C16.8399 20.2684 17.724 19.4874 18.591 18.6205C19.458 17.7535 20.239 16.8693 20.9186 16C20.239 15.1307 19.458 14.2465 18.591 13.3795C17.724 12.5126 16.8399 11.7316 15.9706 11.052C15.1012 11.7316 14.2171 12.5126 13.3501 13.3795C12.4831 14.2465 11.7021 15.1307 11.0225 16C11.7021 16.8693 12.4831 17.7535 13.3501 18.6205C14.2171 19.4874 15.1012 20.2684 15.9706 20.948ZM17.1498 21.8145C17.968 21.1558 18.7885 20.4195 19.5893 19.6187C20.39 18.818 21.1264 17.9974 21.7851 17.1792C23.7187 19.9919 24.4627 22.4819 23.4576 23.487C22.4524 24.4922 19.9625 23.7482 17.1498 21.8145ZM10.156 17.1792C10.8148 17.9974 11.5511 18.818 12.3518 19.6187C13.1526 20.4195 13.9731 21.1558 14.7914 21.8145C11.9786 23.7482 9.48871 24.4922 8.48355 23.487C7.47839 22.4819 8.22238 19.9919 10.156 17.1792ZM10.156 14.8208C10.8148 14.0026 11.5511 13.182 12.3518 12.3813C13.1526 11.5805 13.9731 10.8442 14.7914 10.1855C11.9786 8.25182 9.48871 7.50783 8.48355 8.51299C7.47839 9.51815 8.22238 12.0081 10.156 14.8208ZM17.1498 10.1855C17.968 10.8442 18.7885 11.5805 19.5893 12.3813C20.39 13.182 21.1264 14.0026 21.7851 14.8208C23.7187 12.0081 24.4627 9.51815 23.4576 8.51299C22.4524 7.50783 19.9625 8.25182 17.1498 10.1855Z"
+          fill="white"
+          fillRule="evenodd"
+          stroke="white"
+          strokeWidth="0.5"
+        />
+      </g>
+      <text
+        x="36"
+        y="20"
+        fill="white"
+        fontSize="12"
+        fontFamily="system-ui, -apple-system, sans-serif"
+        fontWeight="500"
+      >
+        React PDF Forge
+      </text>
+      <defs>
+        <clipPath id={id}>
+          <rect fill="white" height="32" rx="8" width="32" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

package/src/components/resizable-wrapper.tsx

@@ -0,0 +1,269 @@
+import { Slot } from '@radix-ui/react-slot';
+import {
+  type ComponentProps,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { cn } from '../utils';
+import { VIEW_PRESETS } from './topbar/view-size-controls';
+
+type Direction = 'north' | 'south' | 'east' | 'west';
+
+type ResizableWrapperProps = {
+  width: number;
+  height: number;
+
+  maxWidth: number;
+  maxHeight: number;
+  minWidth: number;
+  minHeight: number;
+
+  onResize: (newSize: number, direction: Direction) => void;
+  onResizeEnd?: () => void;
+
+  children: React.ReactNode;
+} & Omit<ComponentProps<'div'>, 'onResize' | 'children'>;
+
+export const makeIframeDocumentBubbleEvents = (iframe: HTMLIFrameElement) => {
+  const mouseMoveBubbler = (event: MouseEvent) => {
+    const bounds = iframe.getBoundingClientRect();
+    document.dispatchEvent(
+      new MouseEvent('mousemove', {
+        ...event,
+        clientX: event.clientX + bounds.x,
+        clientY: event.clientY + bounds.y,
+      }),
+    );
+  };
+  const mouseUpBubbler = (event: MouseEvent) => {
+    document.dispatchEvent(new MouseEvent('mouseup', event));
+  };
+  iframe.contentDocument?.addEventListener('mousemove', mouseMoveBubbler);
+  iframe.contentDocument?.addEventListener('mouseup', mouseUpBubbler);
+  return () => {
+    iframe.contentDocument?.removeEventListener('mousemove', mouseMoveBubbler);
+    iframe.contentDocument?.removeEventListener('mouseup', mouseUpBubbler);
+  };
+};
+
+export const ResizableWrapper = ({
+  width,
+  height,
+  onResize,
+  onResizeEnd,
+  children,
+
+  maxHeight,
+  maxWidth,
+  minHeight,
+  minWidth,
+
+  ...rest
+}: ResizableWrapperProps) => {
+  const resizableRef = useRef<HTMLElement>(null);
+  const [isResizing, setIsResizing] = useState(false);
+  const mouseMoveListener = useRef<(event: MouseEvent) => void>(null);
+  const [direction, setDirection] = useState<Direction | null>(null);
+
+  const handleStopResizing = useCallback(() => {
+    if (mouseMoveListener.current) {
+      document.removeEventListener('mousemove', mouseMoveListener.current);
+    }
+    document.removeEventListener('mouseup', handleStopResizing);
+    setIsResizing(false);
+    setDirection(null);
+    onResizeEnd?.();
+  }, []);
+
+  const handleStartResizing = (direction: Direction) => {
+    mouseMoveListener.current = (event) => {
+      if (event.button === 0 && resizableRef.current) {
+        const isHorizontal = direction === 'east' || direction === 'west';
+
+        const mousePosition = isHorizontal ? event.clientX : event.clientY;
+        const resizableBoundingRect =
+          resizableRef.current.getBoundingClientRect();
+        const center = isHorizontal
+          ? resizableBoundingRect.x + resizableBoundingRect.width / 2
+          : resizableBoundingRect.y + resizableBoundingRect.height / 2;
+
+        const newPosition = Math.abs(mousePosition - center) * 2;
+
+        setIsResizing(true);
+        setDirection(direction);
+
+        const threshold = 12;
+
+        for (let i = 0; i < VIEW_PRESETS.length; i++) {
+          const preset = VIEW_PRESETS[i];
+
+          if (preset) {
+            if (
+              isHorizontal &&
+              newPosition > preset.dimensions.width - threshold &&
+              newPosition < preset.dimensions.width + threshold
+            ) {
+              onResize(preset.dimensions.width, direction);
+              return;
+            }
+
+            if (
+              !isHorizontal &&
+              newPosition > preset.dimensions.height - threshold &&
+              newPosition < preset.dimensions.height + threshold
+            ) {
+              onResize(preset.dimensions.height, direction);
+              return;
+            }
+          }
+        }
+
+        onResize(Math.abs(mousePosition - center) * 2, direction);
+      } else {
+        handleStopResizing();
+      }
+    };
+
+    document.addEventListener('mouseup', handleStopResizing);
+    document.addEventListener('mousemove', mouseMoveListener.current);
+  };
+
+  useEffect(() => {
+    if (!window.document) {
+      return;
+    }
+
+    return () => {
+      handleStopResizing();
+    };
+  }, []);
+
+  return (
+    <>
+      <div className="overflow-hidden absolute inset-0">
+        <div className="absolute mx-auto box-content -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">
+          {VIEW_PRESETS.map((preset) => (
+            <div
+              key={preset.name}
+              className="-translate-x-1/2 -translate-y-1/2 absolute pointer-events-none select-none"
+              style={{
+                width: preset.dimensions.width,
+                height: preset.dimensions.height,
+              }}
+            >
+              {width === preset.dimensions.width &&
+                isResizing &&
+                (direction === 'east' || direction === 'west') && (
+                  <>
+                    <div className="absolute right-0 -top-[100vw] -bottom-[100vw] border-r-2 border-cyan-5" />
+                    <div className="absolute left-0 -top-[100vw] -bottom-[100vw] border-l-2 border-cyan-5" />
+                  </>
+                )}
+
+              {height === preset.dimensions.height &&
+                isResizing &&
+                (direction === 'north' || direction === 'south') && (
+                  <>
+                    <div className="absolute top-0 -left-[100vw] -right-[100vw] border-t-2 border-cyan-5" />
+                    <div className="absolute bottom-0 -left-[100vw] -right-[100vw] border-b-2 border-cyan-5" />
+                  </>
+                )}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div
+        {...rest}
+        className={cn('relative mx-auto my-auto box-content', rest.className)}
+      >
+        <div
+          aria-label="resize-west"
+          aria-valuenow={width}
+          aria-valuemin={minWidth}
+          aria-valuemax={maxWidth}
+          className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 -left-2 cursor-w-resize p-2 [user-drag:none]"
+          onDragStart={(event) => event.preventDefault()}
+          draggable="false"
+          onMouseDown={() => {
+            handleStartResizing('west');
+          }}
+          role="slider"
+          tabIndex={0}
+        >
+          <div
+            className={cn('h-8 w-1 rounded-md bg-black/50 transition-colors', {
+              'bg-black': direction === 'west',
+            })}
+          />
+        </div>
+        <div
+          aria-label="resize-east"
+          aria-valuenow={width}
+          aria-valuemin={minWidth}
+          aria-valuemax={maxWidth}
+          onDragStart={(event) => event.preventDefault()}
+          className="translate-x-1/2 -translate-y-1/2 absolute top-1/2 -right-2 cursor-e-resize p-2 [user-drag:none]"
+          draggable="false"
+          onMouseDown={() => {
+            handleStartResizing('east');
+          }}
+          role="slider"
+          tabIndex={0}
+        >
+          <div
+            className={cn('h-8 w-1 rounded-md bg-black/50 transition-colors', {
+              'bg-black': direction === 'east',
+            })}
+          />
+        </div>
+        <div
+          aria-label="resize-north"
+          aria-valuenow={height}
+          aria-valuemin={minHeight}
+          aria-valuemax={maxHeight}
+          onDragStart={(event) => event.preventDefault()}
+          className="-translate-x-1/2 -translate-y-1/2 absolute -top-2 left-1/2 cursor-n-resize p-2 [user-drag:none]"
+          draggable="false"
+          onMouseDown={() => {
+            handleStartResizing('north');
+          }}
+          role="slider"
+          tabIndex={0}
+        >
+          <div
+            className={cn('h-1 w-8 rounded-md bg-black/50 transition-colors', {
+              'bg-black': direction === 'north',
+            })}
+          />
+        </div>
+        <div
+          aria-label="resize-south"
+          aria-valuenow={height}
+          aria-valuemin={minHeight}
+          aria-valuemax={maxHeight}
+          onDragStart={(event) => event.preventDefault()}
+          className="-translate-x-1/2 translate-y-1/2 absolute -bottom-2 left-1/2 cursor-s-resize p-2 [user-drag:none]"
+          draggable="false"
+          onMouseDown={() => {
+            handleStartResizing('south');
+          }}
+          role="slider"
+          tabIndex={0}
+        >
+          <div
+            className={cn('h-1 w-8 rounded-md bg-black/50 transition-colors', {
+              'bg-black': direction === 'south',
+            })}
+          />
+        </div>
+
+        <Slot ref={resizableRef} className={isResizing ? 'select-none' : ''}>
+          {children}
+        </Slot>
+      </div>
+    </>
+  );
+};

package/src/components/shell.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../utils';
+import { Logo } from './logo';
+import { Sidebar } from './sidebar';
+
+interface ShellProps {
+  children: React.ReactNode;
+  currentTemplateOpenSlug?: string;
+}
+
+interface ShellContextValue {
+  sidebarToggled: boolean;
+  toggleSidebar: () => void;
+}
+
+export const ShellContext = React.createContext<ShellContextValue | undefined>(
+  undefined,
+);
+
+export const Shell = ({ children, currentTemplateOpenSlug }: ShellProps) => {
+  const [sidebarToggled, setSidebarToggled] = React.useState(true);
+
+  return (
+    <ShellContext.Provider
+      value={{
+        toggleSidebar: () => setSidebarToggled((v) => !v),
+        sidebarToggled,
+      }}
+    >
+      <div
+        className={
+          'flex h-17.5 items-center justify-between border-slate-6 border-b px-6 lg:hidden'
+        }
+      >
+        <div className="flex h-17.5 items-center">
+          <Logo />
+        </div>
+        <button
+          className="flex h-6 w-6 items-center justify-center rounded-sm text-white"
+          onClick={() => {
+            setSidebarToggled((v) => !v);
+          }}
+          type="button"
+        >
+          <svg
+            fill="none"
+            height="16"
+            stroke="white"
+            viewBox="0 0 15 15"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <title>Menu</title>
+            <path
+              clipRule="evenodd"
+              d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"
+              fill="currentColor"
+              fillRule="evenodd"
+            />
+          </svg>
+        </button>
+      </div>
+      <div className="w-dvw flex h-[calc(100dvh-4.375rem)] lg:h-dvh">
+        <React.Suspense>
+          <Sidebar
+            className={cn(
+              'fixed top-17.5 left-0 z-9999 h-full max-h-full w-full max-w-full will-change-auto [transition:width_0.2s_ease-in-out]',
+              'lg:static lg:inline-block lg:z-auto lg:max-h-full lg:w-[16rem]',
+              {
+                '-translate-x-full lg:translate-x-0': sidebarToggled,
+                'lg:w-0': !sidebarToggled,
+              },
+            )}
+            currentTemplateOpenSlug={currentTemplateOpenSlug}
+          />
+        </React.Suspense>
+        <main
+          className={cn(
+            'inline-block relative overflow-hidden will-change-[width]',
+            'w-full h-full',
+            '[transition:width_0.2s_ease-in-out,transform_0.2s_ease-in-out]',
+            {
+              'lg:w-[calc(100%-16rem)]': sidebarToggled,
+              'opacity-0 lg:opacity-100': !sidebarToggled,
+            },
+          )}
+        >
+          {children}
+        </main>
+      </div>
+    </ShellContext.Provider>
+  );
+};