@licklist/design 0.78.5-dev.92 → 0.78.5-dev.93

package/src/v2/shadcn/_reference/email/EmailPlaceholders.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { IconCopy, IconTick } from '../../../icons';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
+
+interface Placeholder {
+  key: string;
+  description: string;
+}
+
+interface EmailPlaceholdersProps {
+  placeholders: Placeholder[];
+}
+
+const EmailPlaceholders: React.FC<EmailPlaceholdersProps> = ({ placeholders }) => {
+  const [copiedKey, setCopiedKey] = useState<string | null>(null);
+
+  const handleCopy = async (key: string) => {
+    await navigator.clipboard.writeText(key);
+    setCopiedKey(key);
+    setTimeout(() => setCopiedKey(null), 2000);
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      <h2 className="text-label-primary text-lg font-semibold">Email Placeholders</h2>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-6">
+        {placeholders.map((p) => (
+          <div
+            key={p.key}
+            className="flex items-center justify-between gap-3 px-1 py-3 border-b border-border-primary"
+          >
+            <div className="flex flex-col gap-1 min-w-0">
+              <code className="text-label-primary text-xs font-mono bg-surface-action-soft px-2 py-1 rounded-md self-start">
+                {p.key}
+              </code>
+              <span className="text-label-secondary text-xs">{p.description}</span>
+            </div>
+            <Tooltip open={copiedKey === p.key ? true : undefined}>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={() => handleCopy(p.key)}
+                  className="flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-full transition-colors hover:bg-surface-action-soft"
+                  title="Copy placeholder"
+                >
+                  {copiedKey === p.key ? (
+                    <IconTick size={18} className="fill-fill-success" />
+                  ) : (
+                    <IconCopy size={18} className="fill-fill-secondary" />
+                  )}
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>
+                {copiedKey === p.key ? 'Copied!' : 'Copy'}
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default EmailPlaceholders;

package/src/v2/shadcn/_reference/email/UnlayerEmailEditor.tsx

@@ -0,0 +1,41 @@
+import React, { useRef, useCallback } from 'react';
+import EmailEditor, { EditorRef, EmailEditorProps } from 'react-email-editor';
+
+interface UnlayerEmailEditorProps {
+  onReady?: () => void;
+  editorRef?: React.MutableRefObject<EditorRef | null>;
+}
+
+const UnlayerEmailEditor: React.FC<UnlayerEmailEditorProps> = ({ onReady, editorRef }) => {
+  const internalRef = useRef<EditorRef>(null);
+  const ref = editorRef || internalRef;
+
+  const handleReady: EmailEditorProps['onReady'] = useCallback((unlayer) => {
+    onReady?.();
+  }, [onReady]);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <h2 className="text-label-primary text-lg font-semibold">Email Content</h2>
+      <div className="border border-border-primary rounded-lg overflow-hidden" style={{ minHeight: 500 }}>
+        <EmailEditor
+          ref={ref}
+          onReady={handleReady}
+          minHeight={500}
+          options={{
+            features: {
+              textEditor: {
+                spellChecker: true,
+              },
+            },
+            appearance: {
+              theme: 'modern_light',
+            },
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default UnlayerEmailEditor;

package/src/v2/shadcn/_reference/email/emailTemplateData.ts

@@ -0,0 +1,53 @@
+export const templateCategories = [
+  {
+    group: 'Booking Templates',
+    options: [
+      { value: 'booking-confirmation', title: 'Confirmation', subtitle: 'Sent after the guest has completed a booking.' },
+      { value: 'booking-reminder', title: 'Reminder', subtitle: 'Sent ahead of the visit to remind guests of their booking.' },
+      { value: 'booking-followup', title: 'Follow Up', subtitle: 'Sent after the booking to encourage reviews and repeat bookings.' },
+    ],
+  },
+  {
+    group: 'Deposit Templates',
+    options: [
+      { value: 'deposit-confirmation', title: 'Confirmation', subtitle: 'Sent if someone pays a deposit as part of their booking.' },
+      { value: 'deposit-payment-link', title: 'Payment link', subtitle: "Sent to guest's when they have an outstanding payment for their booking." },
+    ],
+  },
+  {
+    group: 'Waiver Templates',
+    options: [
+      { value: 'waiver-confirmation', title: 'Confirmation', subtitle: 'Sent to guests when they have completed their waiver.' },
+      { value: 'waiver-request', title: 'Request', subtitle: 'Sent to guests to request they complete their waiver.' },
+      { value: 'waiver-reminder', title: 'Reminder', subtitle: 'Sent to remind guests to complete their waiver.' },
+      { value: 'waiver-expired', title: 'Expired', subtitle: 'Sent to guests when their waiver has expired.' },
+    ],
+  },
+];
+
+export const emailPlaceholders = [
+  { key: '[order.id]', description: 'The Order ID from the booking confirmation.' },
+  { key: '[user.email]', description: 'The customer email address.' },
+  { key: '[order.amount]', description: 'Orders total amount.' },
+  { key: '[payment.link]', description: 'Link for outstanding payment.' },
+  { key: '[event.name]', description: 'The event or activity name.' },
+  { key: '[deposit.details]', description: 'Deposit payment details.' },
+  { key: '[event.description]', description: 'The event description.' },
+  { key: '[deposit.paid]', description: 'Amount of deposit paid.' },
+  { key: '[event.start_date]', description: 'The event start date.' },
+  { key: '[remaining.amount]', description: 'Remaining balance amount.' },
+  { key: '[venue.name]', description: 'The venue name.' },
+  { key: '[payment.due_date]', description: 'Payment due date.' },
+  { key: '[user.first_name]', description: 'Customer first name.' },
+  { key: '[user.last_name]', description: 'Customer last name.' },
+  { key: '[waiver.link]', description: 'Link to complete waiver.' },
+  { key: '[provider.name]', description: 'The provider/venue name.' },
+];
+
+export const getTemplateTypeLabel = (type: string): string => {
+  for (const cat of templateCategories) {
+    const found = cat.options.find(o => o.value === type);
+    if (found) return `${cat.group.replace(' Templates', '')} - ${found.title}`;
+  }
+  return type;
+};

package/src/v2/shadcn/_reference/emptyStateIcons.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+
+export const AnalyticsIcon = () => (
+  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" className="mb-4">
+    <path d="M6.75 5.25V17.25H18.75V18.75H5.25V5.25H6.75ZM18.2197 7.71967L19.2803 8.78033L15 13.0606L12.75 10.8112L9.53033 14.0303L8.46967 12.9697L12.75 8.68934L15 10.9388L18.2197 7.71967Z" fill="var(--fill-secondary)" />
+  </svg>
+);
+
+export const BookingTypesIcon = () => (
+  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" className="mb-4">
+    <path d="M10.9 2.1l9.899 1.415 1.414 9.9-9.192 9.192a1 1 0 0 1-1.414 0l-9.9-9.9a1 1 0 0 1 0-1.414L10.9 2.1zm.707 2.122L3.828 12l8.486 8.485 7.778-7.778-1.06-7.425-7.425-1.06zm2.12 6.364a2 2 0 1 1 2.83-2.829 2 2 0 0 1-2.83 2.829z" fill="var(--fill-secondary)" />
+  </svg>
+);
+
+export const ReportsIcon = () => (
+  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" className="mb-4">
+    <path d="M11.25 8.25H12.75V15.75H11.25V8.25ZM14.25 11.25H15.75V15.75H14.25V11.25ZM8.25 12.75H9.75V15.75H8.25V12.75ZM14.25 6H6.75V18H17.25V9H14.25V6ZM5.25 5.24385C5.25 4.83304 5.58562 4.5 5.99888 4.5H15L18.7498 8.25L18.75 18.7444C18.75 19.1617 18.4163 19.5 18.0049 19.5H5.99505C5.58357 19.5 5.25 19.1585 5.25 18.7561V5.24385Z" fill="var(--fill-secondary)" />
+  </svg>
+);
+
+export const DatesEventsIcon = () => (
+  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" className="mb-4">
+    <path d="M9.75 4.5V6H14.25V4.5H15.75V6H18.75C19.1642 6 19.5 6.33579 19.5 6.75V18.75C19.5 19.1642 19.1642 19.5 18.75 19.5H5.25C4.83579 19.5 4.5 19.1642 4.5 18.75V6.75C4.5 6.33579 4.83579 6 5.25 6H8.25V4.5H9.75ZM18 12H6V18H18V12ZM11.25 13.5V16.5H7.5V13.5H11.25ZM8.25 7.5H6V10.5H18V7.5H15.75V9H14.25V7.5H9.75V9H8.25V7.5Z" fill="var(--fill-secondary)" />
+  </svg>
+);
+
+export const LoyaltyIcon = () => (
+  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" className="mb-4">
+    <path d="M12.0005 16.695L6.71036 19.6562L7.89186 13.7099L3.44092 9.59385L9.4612 8.88004L12.0005 3.375L14.5396 8.88004L20.5599 9.59385L16.109 13.7099L17.2905 19.6562L12.0005 16.695ZM12.0005 14.976L15.1855 16.7588L14.4741 13.1788L17.1539 10.7006L13.5292 10.2708L12.0005 6.95626L10.4716 10.2708L6.84691 10.7006L9.52673 13.1788L8.81537 16.7588L12.0005 14.976Z" fill="var(--fill-secondary)" />
+  </svg>
+);
+
+export const CustomersIcon = () => (
+  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" className="mb-4">
+    <path d="M4.5 19.5C4.5 16.1863 7.18629 13.5 10.5 13.5C13.8137 13.5 16.5 16.1863 16.5 19.5H15C15 17.0147 12.9853 15 10.5 15C8.01472 15 6 17.0147 6 19.5H4.5ZM10.5 12.75C8.01375 12.75 6 10.7362 6 8.25C6 5.76375 8.01375 3.75 10.5 3.75C12.9862 3.75 15 5.76375 15 8.25C15 10.7362 12.9862 12.75 10.5 12.75ZM10.5 11.25C12.1575 11.25 13.5 9.9075 13.5 8.25C13.5 6.5925 12.1575 5.25 10.5 5.25C8.8425 5.25 7.5 6.5925 7.5 8.25C7.5 9.9075 8.8425 11.25 10.5 11.25ZM16.7128 14.0271C18.7983 14.9671 20.25 17.064 20.25 19.5H18.75C18.75 17.673 17.6612 16.1003 16.0971 15.3953L16.7128 14.0271ZM16.1972 5.55991C17.6958 6.17777 18.75 7.65271 18.75 9.375C18.75 11.5276 17.1032 13.2939 15 13.4832V11.9734C16.2725 11.7916 17.25 10.698 17.25 9.375C17.25 8.33951 16.6512 7.44452 15.7808 7.01726L16.1972 5.55991Z" fill="var(--fill-secondary)" />
+  </svg>
+);
+
+export const AffiliatesIcon = () => (
+  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" className="mb-4">
+    <path d="M16.2424 14.1213L15.1818 13.0606L16.2424 12C17.414 10.8284 17.414 8.92892 16.2424 7.75734C15.0708 6.58577 13.1713 6.58577 11.9997 7.75734L10.9391 8.81801L9.87842 7.75734L10.9391 6.69668C12.6964 4.93932 15.5457 4.93932 17.3031 6.69668C19.0604 8.45405 19.0604 11.3033 17.3031 13.0606L16.2424 14.1213ZM14.121 16.2427L13.0604 17.3033C11.3031 19.0606 8.45379 19.0606 6.69644 17.3033C4.93908 15.5459 4.93908 12.6967 6.69644 10.9393L7.7571 9.87866L8.81775 10.9393L7.7571 12C6.58552 13.1716 6.58552 15.0711 7.7571 16.2427C8.92867 17.4142 10.8282 17.4142 11.9997 16.2427L13.0604 15.1819L14.121 16.2427ZM14.121 8.81801L15.1818 9.87866L9.87842 15.1819L8.81775 14.1213L14.121 8.81801Z" fill="var(--fill-secondary)" />
+  </svg>
+);
+
+export const BookingsIcon = () => (
+  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" className="mb-4">
+    <path d="M17.2073 2.29291L15.793 3.70712L18.0859 6.00002H13.0002V8.00001H18.0859L15.793 10.2929L17.2073 11.7071L21.9144 7.00001L17.2073 2.29291ZM9.50015 7.00001C9.50015 5.6193 8.38086 4.50001 7.00015 4.50001C5.61944 4.50001 4.50015 5.6193 4.50015 7.00001C4.50015 8.38073 5.61944 9.50001 7.00015 9.50001C8.38086 9.50001 9.50015 8.38073 9.50015 7.00001ZM11.5002 7.00001C11.5002 9.4853 9.48543 11.5 7.00015 11.5C4.51487 11.5 2.50015 9.4853 2.50015 7.00001C2.50015 4.51473 4.51487 2.50001 7.00015 2.50001C9.48543 2.50001 11.5002 4.51473 11.5002 7.00001ZM5.91436 18L8.20726 20.2929L6.79304 21.7071L2.08594 17L6.79304 12.2929L8.20726 13.7071L5.91436 16H11.0002V18H5.91436ZM15.0002 19H19.0002V15H15.0002V19ZM13.0002 14C13.0002 13.4477 13.4479 13 14.0002 13H20.0002C20.5524 13 21.0002 13.4477 21.0002 14V20C21.0002 20.5523 20.5524 21 20.0002 21H14.0002C13.4479 21 13.0002 20.5523 13.0002 20V14Z" fill="var(--fill-secondary)" />
+  </svg>
+);
+
+export const CampaignsIcon = () => (
+  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" className="mb-4">
+    <path d="M10.7195 16.3629C10.7195 16.3629 15.9848 15.7286 18.7404 17.3195L19.4649 17.1254C19.865 17.0182 20.1024 16.607 19.9952 16.2069L18.8183 11.8146C19.4001 11.4863 19.7099 10.7953 19.529 10.1201C19.3481 9.44504 18.7343 9.00145 18.0663 9.00807L16.8894 4.61576C16.7822 4.21567 16.3709 3.97822 15.9708 4.08543L15.2464 4.27955C13.6554 7.03522 8.7784 9.11847 8.7784 9.11847L5.88062 9.89492C5.08042 10.1093 4.60555 10.9318 4.81996 11.732L5.98464 16.0787C6.19906 16.8789 7.02156 17.3538 7.82176 17.1394L8.54621 16.9453L10.2412 20.3734L11.6901 19.9851L10.7195 16.3629ZM10.5497 9.93369C11.0163 9.69484 11.5885 9.38415 12.197 9.01286C13.317 8.32952 14.7109 7.3523 15.7461 6.14469L18.2407 15.4544C16.7403 14.9262 15.0445 14.7769 13.733 14.7451C13.0204 14.7278 12.3694 14.7448 11.846 14.7712L10.5497 9.93369ZM6.26885 11.3438L9.16662 10.5674L10.3313 14.914L7.43353 15.6905L6.26885 11.3438Z" fill="var(--fill-secondary)" />
+  </svg>
+);
+
+export const WaiversIcon = () => (
+  <svg width="48" height="48" viewBox="0 0 32 32" fill="none" className="mb-4">
+    <path d="M19.5771 18.5563C20.9411 17.6264 22.718 17.1662 25.1523 17.4449L25.6484 17.5104L25.749 17.5309C26.2398 17.6564 26.5658 18.1363 26.4893 18.6481C26.4124 19.1602 25.9595 19.523 25.4531 19.4987L25.3516 19.4889L24.9297 19.4323C22.8719 19.1952 21.596 19.6007 20.7041 20.2086C19.7063 20.8889 19.0536 21.9054 18.3594 23.0729C17.718 24.1516 16.9733 25.5059 15.7871 26.2936C14.5585 27.1092 13.0355 27.2399 11.0518 26.5787L10.6484 26.4362L10.5547 26.3951C10.1007 26.17 9.88172 25.6328 10.0635 25.1481C10.2455 24.6636 10.7639 24.4027 11.2539 24.5319L11.3516 24.5631L11.6816 24.6803C13.2821 25.216 14.1232 24.9983 14.6816 24.6276C15.4013 24.1496 15.9073 23.2847 16.6406 22.0514C17.3213 20.9067 18.1691 19.5164 19.5771 18.5563ZM14.6758 4.54749C14.9256 4.0552 15.5271 3.85842 16.0195 4.10803L20.5703 6.41467L20.6582 6.46545C21.085 6.73909 21.2439 7.29752 21.0098 7.7594L14.4189 20.7594C14.3389 20.9171 14.2179 21.0511 14.0693 21.1471L9.81738 23.8932C9.51875 24.0861 9.14038 24.1056 8.82324 23.9449C8.50608 23.7842 8.29737 23.4669 8.27637 23.1119L7.97852 18.0592C7.96811 17.8825 8.00497 17.7053 8.08496 17.5475L14.6758 4.54749ZM9.99121 18.2106L10.1719 21.2819L12.7578 19.6129L18.7734 7.7467L16.0068 6.34436L9.99121 18.2106Z" fill="var(--fill-secondary)" />
+  </svg>
+);
+
+export const InboxIcon = () => (
+  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" className="mb-4">
+    <path d="M2.25 6.75C2.25 6.33579 2.58579 6 3 6H21C21.4142 6 21.75 6.33579 21.75 6.75V17.25C21.75 17.6642 21.4142 18 21 18H3C2.58579 18 2.25 17.6642 2.25 17.25V6.75ZM3.75 8.78304V16.5H20.25V8.78304L12.6349 13.4577C12.247 13.6968 11.753 13.6968 11.3651 13.4577L3.75 8.78304ZM19.0598 7.5H4.94022L12 11.8422L19.0598 7.5Z" fill="var(--fill-secondary)" />
+  </svg>
+);
+
+export const SentIcon = () => (
+  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" className="mb-4">
+    <path d="M3.51472 4.76473L20.4853 11.25L3.51472 17.7353L3.5 12.75H10.5V10.25H3.5L3.51472 4.76473ZM2.06558 2.65381C2.05093 2.45149 2.11491 2.25005 2.2459 2.09244C2.3769 1.93483 2.56455 1.8333 2.76736 1.80827C2.97016 1.78324 3.17559 1.83666 3.34151 1.95786L22.1582 11.0829C22.3113 11.1958 22.4242 11.3559 22.4802 11.5392C22.5362 11.7224 22.5324 11.9192 22.4693 12.1001C22.4062 12.2809 22.287 12.4365 22.13 12.5434C21.973 12.6502 21.7866 12.7025 21.5975 12.6929L4.22306 12.0929L4.2087 17.5959C4.20789 17.8175 4.12796 18.0312 3.98367 18.1988C3.83937 18.3664 3.64013 18.4768 3.42184 18.51C3.20356 18.5431 2.98041 18.4968 2.79301 18.3789C2.60561 18.2611 2.46639 18.0796 2.40111 17.8681L2.06558 2.65381Z" fill="var(--fill-secondary)" />
+  </svg>
+);
+
+export const UsersIcon = () => (
+  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" className="mb-4">
+    <path d="M4.5 19.5C4.5 16.1863 7.18629 13.5 10.5 13.5C13.8137 13.5 16.5 16.1863 16.5 19.5H15C15 17.0147 12.9853 15 10.5 15C8.01472 15 6 17.0147 6 19.5H4.5ZM10.5 12.75C8.01375 12.75 6 10.7362 6 8.25C6 5.76375 8.01375 3.75 10.5 3.75C12.9862 3.75 15 5.76375 15 8.25C15 10.7362 12.9862 12.75 10.5 12.75ZM10.5 11.25C12.1575 11.25 13.5 9.9075 13.5 8.25C13.5 6.5925 12.1575 5.25 10.5 5.25C8.8425 5.25 7.5 6.5925 7.5 8.25C7.5 9.9075 8.8425 11.25 10.5 11.25ZM16.7128 14.0271C18.7983 14.9671 20.25 17.064 20.25 19.5H18.75C18.75 17.673 17.6612 16.1003 16.0971 15.3953L16.7128 14.0271ZM16.1972 5.55991C17.6958 6.17777 18.75 7.65271 18.75 9.375C18.75 11.5276 17.1032 13.2939 15 13.4832V11.9734C16.2725 11.7916 17.25 10.698 17.25 9.375C17.25 8.33951 16.6512 7.44452 15.7808 7.01726L16.1972 5.55991Z" fill="var(--fill-secondary)" />
+  </svg>
+);
+
+export const HomeIcon = () => (
+  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" className="mb-4">
+    <path d="M17.7273 20.1182H6.27273C5.82086 20.1182 5.45455 19.7423 5.45455 19.2785V11.7207H3L11.4496 3.83661C11.7617 3.54543 12.2383 3.54543 12.5504 3.83661L21 11.7207H18.5455V19.2785C18.5455 19.7423 18.1792 20.1182 17.7273 20.1182ZM7.09091 18.4387H16.9091V10.1734L12 5.59288L7.09091 10.1734V18.4387Z" fill="var(--fill-secondary)" />
+  </svg>
+);
+
+export const CompanyIcon = () => (
+  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" className="mb-4">
+    <path d="M19.5 18.75H4.5V17.25H5.25V6C5.25 5.58579 5.58579 5.25 6 5.25H16.5C16.9142 5.25 17.25 5.58579 17.25 6V9.75H18.75V17.25H19.5V18.75ZM15.75 17.25H17.25V11.25H12.75V17.25H14.25V12.75H15.75V17.25ZM15.75 9.75V6.75H6.75V17.25H11.25V9.75H15.75ZM8.25 11.25H9.75V12.75H8.25V11.25ZM8.25 14.25H9.75V15.75H8.25V14.25ZM8.25 8.25H9.75V9.75H8.25V8.25Z" fill="var(--fill-secondary)" />
+  </svg>
+);
+
+export const PaymentsIcon = () => (
+  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" className="mb-4">
+    <path d="M18.75 6.75H5.25C4.83579 6.75 4.5 7.08579 4.5 7.5V16.5C4.5 16.9142 4.83579 17.25 5.25 17.25H18.75C19.1642 17.25 19.5 16.9142 19.5 16.5V7.5C19.5 7.08579 19.1642 6.75 18.75 6.75ZM18 15.75H6V11.25H18V15.75ZM6 9.75V8.25H18V9.75H6ZM7.5 13.5H9.75V14.25H7.5V13.5Z" fill="var(--fill-secondary)" />
+  </svg>
+);
+
+export const ZonesIcon = () => (
+  <svg width="48" height="48" viewBox="0 0 32 32" fill="none" className="mb-4">
+    <path d="M16 22.4853L20.2426 18.2426C22.5858 15.8995 22.5858 12.1005 20.2426 9.75736C17.8995 7.41421 14.1005 7.41421 11.7574 9.75736C9.41421 12.1005 9.41421 15.8995 11.7574 18.2426L16 22.4853ZM21.6569 19.6569L16 25.3137L10.3432 19.6569C7.21895 16.5327 7.21895 11.4673 10.3432 8.34315C13.4673 5.21895 18.5327 5.21895 21.6569 8.34315C24.781 11.4673 24.781 16.5327 21.6569 19.6569ZM9 26H23V28H9V26Z" fill="var(--fill-secondary)" />
+  </svg>
+);

package/src/v2/shadcn/_reference/games/MazeGame.tsx

@@ -0,0 +1,394 @@
+import React, { useEffect, useRef, useCallback, useState } from 'react';
+import { useIsMobile } from '../../hooks/use-mobile';
+
+const CELL_SIZE = 16;
+const PLAYER_SIZE = 12;
+const CHUNK_SIZE = 12;
+const VISIBLE_COLS = 20;
+const VISIBLE_ROWS = 16;
+
+interface Cell {
+  x: number;
+  y: number;
+  walls: { top: boolean; right: boolean; bottom: boolean; left: boolean };
+  visited: boolean;
+}
+
+type WallSide = 'top' | 'right' | 'bottom' | 'left';
+type Direction = 'up' | 'down' | 'left' | 'right';
+
+const generateMazeChunk = (
+  chunkX: number,
+  chunkY: number,
+  existingCells: Map<string, Cell>
+): Map<string, Cell> => {
+  const cells = new Map<string, Cell>();
+  const startX = chunkX * CHUNK_SIZE;
+  const startY = chunkY * CHUNK_SIZE;
+
+  // Create fresh cells for this chunk only
+  for (let y = startY; y < startY + CHUNK_SIZE; y++) {
+    for (let x = startX; x < startX + CHUNK_SIZE; x++) {
+      const key = `${x},${y}`;
+      if (existingCells.has(key)) {
+        // Already generated — skip entirely
+        continue;
+      }
+      cells.set(key, { x, y, walls: { top: true, right: true, bottom: true, left: true }, visited: false });
+    }
+  }
+
+  // If all cells already existed, nothing to do
+  if (cells.size === 0) return cells;
+
+  // Run DFS only on new (unvisited) cells
+  const allNewKeys = Array.from(cells.keys());
+  const firstKey = allNewKeys[0];
+  const stack: Cell[] = [];
+  const first = cells.get(firstKey)!;
+  first.visited = true;
+  stack.push(first);
+
+  const oppMap: Record<WallSide, WallSide> = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' };
+
+  while (stack.length > 0) {
+    const current = stack[stack.length - 1];
+    const neighbors: { cell: Cell; dir: WallSide }[] = [];
+    const dirs: { dx: number; dy: number; dir: WallSide }[] = [
+      { dx: 0, dy: -1, dir: 'top' },
+      { dx: 1, dy: 0, dir: 'right' },
+      { dx: 0, dy: 1, dir: 'bottom' },
+      { dx: -1, dy: 0, dir: 'left' },
+    ];
+
+    for (const { dx, dy, dir } of dirs) {
+      const nx = current.x + dx;
+      const ny = current.y + dy;
+      const key = `${nx},${ny}`;
+      const neighbor = cells.get(key);
+      if (neighbor && !neighbor.visited) {
+        neighbors.push({ cell: neighbor, dir });
+      }
+    }
+
+    if (neighbors.length > 0) {
+      const { cell: next, dir } = neighbors[Math.floor(Math.random() * neighbors.length)];
+      current.walls[dir] = false;
+      next.walls[oppMap[dir]] = false;
+      next.visited = true;
+      stack.push(next);
+    } else {
+      stack.pop();
+    }
+  }
+
+  // Open passages at chunk borders and sync with existing neighbors
+  for (let i = 0; i < CHUNK_SIZE; i++) {
+    // Right border
+    if (Math.random() < 0.3) {
+      const cell = cells.get(`${startX + CHUNK_SIZE - 1},${startY + i}`);
+      const neighborKey = `${startX + CHUNK_SIZE},${startY + i}`;
+      const neighbor = existingCells.get(neighborKey);
+      if (cell) {
+        cell.walls.right = false;
+        if (neighbor) neighbor.walls.left = false;
+      }
+    }
+    // Bottom border
+    if (Math.random() < 0.3) {
+      const cell = cells.get(`${startX + i},${startY + CHUNK_SIZE - 1}`);
+      const neighborKey = `${startX + i},${startY + CHUNK_SIZE}`;
+      const neighbor = existingCells.get(neighborKey);
+      if (cell) {
+        cell.walls.bottom = false;
+        if (neighbor) neighbor.walls.top = false;
+      }
+    }
+    // Left border
+    if (Math.random() < 0.3) {
+      const cell = cells.get(`${startX},${startY + i}`);
+      const neighborKey = `${startX - 1},${startY + i}`;
+      const neighbor = existingCells.get(neighborKey);
+      if (cell) {
+        cell.walls.left = false;
+        if (neighbor) neighbor.walls.right = false;
+      }
+    }
+    // Top border
+    if (Math.random() < 0.3) {
+      const cell = cells.get(`${startX + i},${startY}`);
+      const neighborKey = `${startX + i},${startY - 1}`;
+      const neighbor = existingCells.get(neighborKey);
+      if (cell) {
+        cell.walls.top = false;
+        if (neighbor) neighbor.walls.bottom = false;
+      }
+    }
+  }
+
+  // CRITICAL: Sync walls with any pre-existing neighbor cells.
+  // If an existing neighbor already has a wall open toward us, we must match it.
+  cells.forEach((cell) => {
+    const syncDirs: { dx: number; dy: number; wall: WallSide; oppWall: WallSide }[] = [
+      { dx: 0, dy: -1, wall: 'top', oppWall: 'bottom' },
+      { dx: 1, dy: 0, wall: 'right', oppWall: 'left' },
+      { dx: 0, dy: 1, wall: 'bottom', oppWall: 'top' },
+      { dx: -1, dy: 0, wall: 'left', oppWall: 'right' },
+    ];
+    for (const { dx, dy, wall, oppWall } of syncDirs) {
+      const neighborKey = `${cell.x + dx},${cell.y + dy}`;
+      const neighbor = existingCells.get(neighborKey);
+      if (neighbor) {
+        // If neighbor has its wall open toward us, open our wall too
+        if (!neighbor.walls[oppWall]) {
+          cell.walls[wall] = false;
+        }
+        // If we have our wall open toward neighbor, open their wall too
+        if (!cell.walls[wall]) {
+          neighbor.walls[oppWall] = false;
+        }
+      }
+    }
+  });
+
+  return cells;
+};
+
+const DPad: React.FC<{ onDirection: (dir: Direction) => void }> = ({ onDirection }) => {
+  const btnClass = "w-10 h-10 flex items-center justify-center border border-border-primary rounded-lg bg-surface-secondary text-label-primary text-base font-mono active:bg-surface-tertiary select-none touch-manipulation";
+
+  return (
+    <div className="flex flex-col items-center gap-1">
+      <button
+        className={btnClass}
+        onTouchStart={(e) => { e.preventDefault(); onDirection('up'); }}
+        onMouseDown={() => onDirection('up')}
+        type="button"
+      >↑</button>
+      <div className="flex gap-1">
+        <button
+          className={btnClass}
+          onTouchStart={(e) => { e.preventDefault(); onDirection('left'); }}
+          onMouseDown={() => onDirection('left')}
+          type="button"
+        >←</button>
+        <button
+          className={btnClass}
+          onTouchStart={(e) => { e.preventDefault(); onDirection('down'); }}
+          onMouseDown={() => onDirection('down')}
+          type="button"
+        >↓</button>
+        <button
+          className={btnClass}
+          onTouchStart={(e) => { e.preventDefault(); onDirection('right'); }}
+          onMouseDown={() => onDirection('right')}
+          type="button"
+        >→</button>
+      </div>
+    </div>
+  );
+};
+
+const MazeGame: React.FC = () => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const isMobile = useIsMobile();
+  const gameStateRef = useRef({
+    playerX: 1,
+    playerY: 1,
+    visualX: 1,
+    visualY: 1,
+    cells: new Map<string, Cell>(),
+    loadedChunks: new Set<string>(),
+    moveQueue: [] as Direction[],
+    isAnimating: false,
+  });
+  const animFrameRef = useRef<number>(0);
+  const [gameStarted, setGameStarted] = useState(false);
+
+  const ensureChunksAround = useCallback((px: number, py: number) => {
+    const state = gameStateRef.current;
+    const cx = Math.floor(px / CHUNK_SIZE);
+    const cy = Math.floor(py / CHUNK_SIZE);
+
+    for (let dy = -1; dy <= 1; dy++) {
+      for (let dx = -1; dx <= 1; dx++) {
+        const key = `${cx + dx},${cy + dy}`;
+        if (!state.loadedChunks.has(key)) {
+          state.loadedChunks.add(key);
+          const newCells = generateMazeChunk(cx + dx, cy + dy, state.cells);
+          newCells.forEach((cell, k) => {
+            state.cells.set(k, cell);
+          });
+        }
+      }
+    }
+  }, []);
+
+  const dirToWall: Record<Direction, WallSide> = { up: 'top', down: 'bottom', left: 'left', right: 'right' };
+
+  const canMoveDir = useCallback((x: number, y: number, dir: Direction): boolean => {
+    const state = gameStateRef.current;
+    const cell = state.cells.get(`${x},${y}`);
+    if (!cell) return false;
+    if (cell.walls[dirToWall[dir]]) return false;
+
+    // Also check the destination cell's opposing wall
+    const moveMap: Record<Direction, { dx: number; dy: number }> = {
+      up: { dx: 0, dy: -1 }, down: { dx: 0, dy: 1 },
+      left: { dx: -1, dy: 0 }, right: { dx: 1, dy: 0 },
+    };
+    const oppWall: Record<Direction, WallSide> = { up: 'bottom', down: 'top', left: 'right', right: 'left' };
+    const dest = state.cells.get(`${x + moveMap[dir].dx},${y + moveMap[dir].dy}`);
+    if (!dest) return false;
+    return !dest.walls[oppWall[dir]];
+  }, []);
+
+  const draw = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const state = gameStateRef.current;
+    const { visualX, visualY } = state;
+
+    const computedStyle = getComputedStyle(document.documentElement);
+    const wallColor = computedStyle.getPropertyValue('--fill-secondary').trim();
+    const playerColor = computedStyle.getPropertyValue('--fill-primary').trim();
+    const bgColor = computedStyle.getPropertyValue('--surface-primary').trim();
+
+    ctx.fillStyle = bgColor;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    const offsetX = visualX - Math.floor(VISIBLE_COLS / 2);
+    const offsetY = visualY - Math.floor(VISIBLE_ROWS / 2);
+
+    const fracX = offsetX % 1;
+    const fracY = offsetY % 1;
+    const baseX = Math.floor(offsetX);
+    const baseY = Math.floor(offsetY);
+
+    for (let vy = -2; vy <= VISIBLE_ROWS + 2; vy++) {
+      for (let vx = -2; vx <= VISIBLE_COLS + 2; vx++) {
+        const cellX = baseX + vx;
+        const cellY = baseY + vy;
+        const cell = state.cells.get(`${cellX},${cellY}`);
+        if (!cell) continue;
+
+        const sx = (vx - fracX) * CELL_SIZE;
+        const sy = (vy - fracY) * CELL_SIZE;
+
+        ctx.strokeStyle = wallColor;
+        ctx.lineWidth = 2;
+
+        if (cell.walls.top) { ctx.beginPath(); ctx.moveTo(sx, sy); ctx.lineTo(sx + CELL_SIZE, sy); ctx.stroke(); }
+        if (cell.walls.right) { ctx.beginPath(); ctx.moveTo(sx + CELL_SIZE, sy); ctx.lineTo(sx + CELL_SIZE, sy + CELL_SIZE); ctx.stroke(); }
+        if (cell.walls.bottom) { ctx.beginPath(); ctx.moveTo(sx, sy + CELL_SIZE); ctx.lineTo(sx + CELL_SIZE, sy + CELL_SIZE); ctx.stroke(); }
+        if (cell.walls.left) { ctx.beginPath(); ctx.moveTo(sx, sy); ctx.lineTo(sx, sy + CELL_SIZE); ctx.stroke(); }
+      }
+    }
+
+    const px = Math.floor(VISIBLE_COLS / 2) * CELL_SIZE + (CELL_SIZE - PLAYER_SIZE) / 2;
+    const py = Math.floor(VISIBLE_ROWS / 2) * CELL_SIZE + (CELL_SIZE - PLAYER_SIZE) / 2;
+    ctx.fillStyle = playerColor;
+    ctx.fillRect(px, py, PLAYER_SIZE, PLAYER_SIZE);
+    ctx.fillStyle = bgColor;
+    ctx.fillRect(px + 2, py + 3, 3, 3);
+    ctx.fillRect(px + PLAYER_SIZE - 5, py + 3, 3, 3);
+  }, []);
+
+  const animate = useCallback(() => {
+    const state = gameStateRef.current;
+    const lerp = 0.25;
+    const dx = state.playerX - state.visualX;
+    const dy = state.playerY - state.visualY;
+
+    if (Math.abs(dx) < 0.01 && Math.abs(dy) < 0.01) {
+      state.visualX = state.playerX;
+      state.visualY = state.playerY;
+      state.isAnimating = false;
+      draw();
+      return;
+    }
+
+    state.visualX += dx * lerp;
+    state.visualY += dy * lerp;
+    draw();
+    animFrameRef.current = requestAnimationFrame(animate);
+  }, [draw]);
+
+  const startAnimation = useCallback(() => {
+    const state = gameStateRef.current;
+    if (!state.isAnimating) {
+      state.isAnimating = true;
+      animFrameRef.current = requestAnimationFrame(animate);
+    }
+  }, [animate]);
+
+  const movePlayer = useCallback((dir: Direction) => {
+    const state = gameStateRef.current;
+    const moveMap: Record<Direction, { dx: number; dy: number }> = {
+      up: { dx: 0, dy: -1 }, down: { dx: 0, dy: 1 },
+      left: { dx: -1, dy: 0 }, right: { dx: 1, dy: 0 },
+    };
+
+    if (!gameStarted) setGameStarted(true);
+
+    if (canMoveDir(state.playerX, state.playerY, dir)) {
+      state.playerX += moveMap[dir].dx;
+      state.playerY += moveMap[dir].dy;
+      ensureChunksAround(state.playerX, state.playerY);
+      startAnimation();
+    }
+  }, [canMoveDir, ensureChunksAround, gameStarted, startAnimation]);
+
+  useEffect(() => {
+    const state = gameStateRef.current;
+    ensureChunksAround(state.playerX, state.playerY);
+    draw();
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const dirMap: Record<string, Direction> = {
+        ArrowUp: 'up', ArrowDown: 'down', ArrowLeft: 'left', ArrowRight: 'right',
+        w: 'up', s: 'down', a: 'left', d: 'right',
+        W: 'up', S: 'down', A: 'left', D: 'right',
+      };
+      const dir = dirMap[e.key];
+      if (!dir) return;
+      e.preventDefault();
+      movePlayer(dir);
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      cancelAnimationFrame(animFrameRef.current);
+    };
+  }, [draw, ensureChunksAround, movePlayer]);
+
+  return (
+    <div className="flex flex-col items-start gap-3">
+      <p className="text-[13px] leading-4 font-mono text-label-secondary">
+        {gameStarted
+          ? "Escape the maze and we'll grant you access."
+          : isMobile ? "Tap the arrows to start" : "Use arrow keys to start"
+        }
+      </p>
+      <div className="border-2 border-border-primary rounded-lg overflow-hidden relative">
+        <canvas
+          ref={canvasRef}
+          width={VISIBLE_COLS * CELL_SIZE}
+          height={VISIBLE_ROWS * CELL_SIZE}
+          className="block"
+          style={{ imageRendering: 'pixelated' }}
+        />
+      </div>
+
+      {isMobile && (
+        <DPad onDirection={movePlayer} />
+      )}
+    </div>
+  );
+};
+
+export default MazeGame;