blocks-dusted 0.1.12 → 0.1.13

package/templates/blocks/DD-PayloadAIAssistant/config.ts

@@ -0,0 +1,37 @@
+import type { Block, Field } from 'payload'
+import { sourceDefaults } from './source-defaults'
+// Presentation-only schema for plugin options. Not registered in Payload collections.
+export const PayloadAIAssistantPreview: Block = {
+  slug: 'payload-ai-assistant',
+  labels: { singular: 'Payload AI Assistant — Plugin Reference', plural: 'Plugin References' },
+  fields: [
+    {
+      type: 'collapsible',
+      label: 'Plugin options (reference only)',
+      admin: {
+        description:
+          'These are source plugin defaults, not an installed or active configuration. The frontend is a static interface; AI, MCP and microphone actions are disabled.',
+      },
+      fields: [
+        ...Object.entries(sourceDefaults).map(([name, value]): Field => {
+          const common = { name, label: name, defaultValue: value }
+          if (typeof value === 'boolean')
+            return { ...common, type: 'checkbox', defaultValue: value }
+          if (typeof value === 'number') return { ...common, type: 'number', defaultValue: value }
+          if (name === 'aiProvider')
+            return { ...common, type: 'select', defaultValue: value, options: ['openai', 'gemini'] }
+          return { ...common, type: 'text', defaultValue: value }
+        }),
+        {
+          name: 'resolveMcpApiKey',
+          type: 'textarea',
+          label: 'resolveMcpApiKey',
+          admin: {
+            description:
+              'Optional server callback: ({ req, user }) => string | null | Promise<string | null>. No callback or credential is supplied in this demo.',
+          },
+        },
+      ],
+    },
+  ],
+}

package/templates/blocks/DD-PayloadAIAssistant/demo.css

@@ -0,0 +1,125 @@
+.ai-assistant-page {
+  max-width: 1120px;
+  margin: auto;
+  padding: 70px 24px 80px;
+}
+.ai-assistant-page__intro {
+  position: static;
+  max-width: 760px;
+  margin-bottom: 28px;
+}
+.ai-assistant-page h1 {
+  font-size: clamp(30px, 5vw, 48px);
+  line-height: 1.15;
+  margin: 12px 0;
+}
+.ai-assistant-page__intro p {
+  font-size: 15px;
+  line-height: 1.7;
+  opacity: 0.75;
+}
+.ai-assistant-page__intro a {
+  display: inline-block;
+  margin-top: 16px;
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+.ai-assistant-demo {
+  --theme-elevation-250: #9d92af;
+  --accent: #a697cf;
+  --theme-text: #f5f5f5;
+  --border-color-50: #ffffff15;
+  --color-base-950: #17141b;
+  max-width: 920px;
+  margin: auto;
+}
+.ai-assistant-demo__status {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 12px 0;
+  font-size: 12px;
+  color: #b6a5cc;
+}
+.ai-assistant-demo .payload-ai-assistant__modal {
+  position: relative;
+  width: 100%;
+  height: 650px;
+  max-height: none;
+}
+.ai-assistant-demo .payload-ai-assistant__topbar {
+  position: relative;
+  min-height: 130px;
+  padding-right: 200px;
+}
+.ai-assistant-demo .payload-ai-assistant__topbar h2 {
+  font-size: 20px;
+}
+.ai-assistant-demo .ai-assistant-demo__note {
+  color: #c8b0f0;
+}
+.ai-assistant-demo .payload-ai-assistant__close {
+  position: absolute;
+  right: 12px;
+  top: 12px;
+  z-index: 1;
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.ai-assistant-demo .payload-ai-assistant__composer textarea {
+  min-width: 0;
+  width: 100%;
+}
+.ai-assistant-demo .payload-ai-assistant__mic-button {
+  display: grid;
+  place-items: center;
+}
+.ai-assistant-demo .payload-ai-assistant__author {
+  opacity: 0.5;
+}
+@media (max-width: 600px) {
+  .ai-assistant-page {
+    padding: 40px 16px;
+  }
+  .ai-assistant-demo .payload-ai-assistant__modal {
+    height: 670px;
+  }
+  .ai-assistant-demo .payload-ai-assistant__topbar {
+    padding: 20px 90px 20px 18px;
+    min-height: 150px;
+  }
+  .ai-assistant-demo .payload-ai-assistant__dustedBot {
+    width: 80px;
+    height: 120px;
+    opacity: 0.5;
+  }
+  .ai-assistant-demo .dustedBotSVG {
+    right: -35px;
+  }
+  .ai-assistant-demo .payload-ai-assistant__composer {
+    grid-template-columns: 1fr;
+    margin: 0 12px 24px;
+  }
+  .ai-assistant-demo .payload-ai-assistant__composer-actions {
+    justify-content: flex-end;
+  }
+  .ai-assistant-demo .payload-ai-assistant__messages {
+    padding: 20px 18px;
+    margin-top: 0;
+  }
+}
+
+.ai-assistant-page {
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+}
+.ai-assistant-demo {
+  width: 100%;
+  min-width: 0;
+}
+.ai-assistant-demo .payload-ai-assistant__modal {
+  min-width: 0;
+  grid-template-columns: minmax(0, 1fr);
+}

package/templates/blocks/DD-PayloadAIAssistant/manifest.json

@@ -0,0 +1,93 @@
+{
+  "type": "block",
+  "name": "DD-PayloadAIAssistant",
+  "label": "Payload AI Assistant",
+  "sourceName": "DD-PayloadAIAssistant",
+  "portableName": "DD-PayloadAIAssistant",
+  "slug": "payload-ai-assistant",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/Dusted-Payload-Blocks",
+    "originalPath": "CLI-TestGround/dusted-blocks-demo/src/blocks/DD-PayloadAIAssistant",
+    "originalSlug": "payload-ai-assistant",
+    "originalConfigExport": "PayloadAIAssistantPreview",
+    "originalComponentExport": "PayloadAIAssistantDemo",
+    "originalInterfaceName": "PayloadAIAssistantPreview"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-PayloadAIAssistant/Component.tsx"
+    },
+    {
+      "from": "DustedBot.tsx",
+      "to": "src/blocks/DD-PayloadAIAssistant/DustedBot.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-PayloadAIAssistant/config.ts"
+    },
+    {
+      "from": "demo.css",
+      "to": "src/blocks/DD-PayloadAIAssistant/demo.css"
+    },
+    {
+      "from": "source-defaults.ts",
+      "to": "src/blocks/DD-PayloadAIAssistant/source-defaults.ts"
+    },
+    {
+      "from": "styles.ts",
+      "to": "src/blocks/DD-PayloadAIAssistant/styles.ts"
+    }
+  ],
+  "dependencies": [
+    "lucide-react"
+  ],
+  "sharedFiles": [],
+  "requiredProjectFiles": [],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register PayloadAIAssistantPreview in Pages/Posts block arrays if automatic registration was skipped.",
+    "Register payload-ai-assistant in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "manualSteps": [
+    "Register PayloadAIAssistantPreview in Pages/Posts block arrays if automatic registration was skipped.",
+    "Register payload-ai-assistant in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can register PayloadAIAssistantPreview from @/blocks/DD-PayloadAIAssistant/config."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register payload-ai-assistant with component export PayloadAIAssistantDemo."
+    }
+  },
+  "notes": [
+    "Promoted from the verified Dusted Blocks demo implementation.",
+    "Installer preserves existing destination files and reports project requirements before writing."
+  ],
+  "exportName": "PayloadAIAssistantPreview",
+  "componentExportName": "PayloadAIAssistantDemo",
+  "interfaceName": "PayloadAIAssistantPreview"
+}

package/templates/blocks/DD-PayloadAIAssistant/source-defaults.ts

@@ -0,0 +1,17 @@
+// Literal defaults from source-plugin.ts.txt. Reference data only; never install the plugin.
+export const sourceDefaults = {
+  aiProvider: 'openai' as const,
+  adminUserCollection: 'users',
+  assistantActionPath:
+    '@/plugins/payload-dashboard-ai-assistant/components/AdminAIAssistantAction#AdminAIAssistantAction',
+  auditCollectionSlug: 'payload-ai-assistant-audit-logs',
+  auditLogs: true,
+  enabled: true,
+  endpointPath: '/payload-ai-assistant/chat' as const,
+  geminiBaseUrl: 'https://generativelanguage.googleapis.com/v1beta/openai',
+  geminiModel: 'gemini-3.8-flash',
+  maxMessages: 12,
+  mcpApiKeyFieldName: 'payloadMcpApiKey',
+  mcpEndpoint: '/api/mcp',
+  openAIModel: 'gpt-4.1-mini',
+}

package/templates/blocks/DD-PayloadAIAssistant/styles.ts

@@ -0,0 +1,306 @@
+export const adminAIAssistantStyles = String.raw`
+.payload-ai-assistant__action {
+  border: 1px solid var(--theme-elevation-200);
+  background: var(--theme-elevation-100);
+  color: var(--theme-text);
+  min-width: 38px;
+  height: 2.2rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all .3s;
+}
+
+.payload-ai-assistant__action:hover {
+  transform: translateY(-1px);
+  filter: grayscale(0) brightness(1);
+  background: var(--theme-elevation-100);
+  border-color: var(--theme-elevation-400);
+  box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.35);
+  transition: all .3s;
+}
+
+@supports (corner-shape: squircle) {
+  .payload-ai-assistant__action {
+    border-radius: 2rem;
+    corner-shape: squircle;
+  }
+}
+
+@supports not (corner-shape: squircle) {
+  .payload-ai-assistant__action {
+    border-radius: 6px;
+  }
+}
+
+.payload-ai-assistant__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: #000000b5;
+  backdrop-filter: blur(4px);
+  height: 100vh;
+}
+
+.payload-ai-assistant__modal {
+  display: grid;
+  grid-template-rows: auto 1fr auto auto;
+  width: min(920px, calc(100vw - 32px));
+  height: min(760px, calc(100vh - 32px));
+  border: 1px solid #2a2a2a;
+  border-radius: 8px;
+  background: radial-gradient(circle at top center, #050505, #161422);
+  backdrop-filter: blur(16px);
+  color: #f5f5f5;
+  box-shadow: 0 24px 80px rgb(0 0 0 / 45%);
+  overflow: clip;
+}
+
+.payload-ai-assistant__topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 18px 22px;
+  border-bottom: 1px solid #242424;
+}
+
+.payload-ai-assistant__topbar h2 {
+  margin: 0;
+  font-size: 18px;
+  line-height: 1.2;
+}
+
+.payload-ai-assistant__topbar p {
+  margin: 4px 0 0;
+  color: #a5a5a5;
+  font-size: 13px;
+}
+
+.payload-ai-assistant__close {
+  width: 32px;
+  height: 32px;
+  border: 0;
+  border-radius: 6px;
+  background: #242424;
+  color: #f5f5f5;
+  font-size: 2rem;
+  padding-bottom: 0.5rem;
+  cursor: pointer;
+}
+
+.payload-ai-assistant__close:hover {
+    background: var(--accent);
+    color: #8100ff !important;
+    filter: drop-shadow(2px 4px 6px black);
+    text-shadow: 0 0 black;
+}
+
+.payload-ai-assistant__messages {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  overflow-y: auto;
+  padding: 28px 24px;
+  margin-top: 2rem;
+}
+
+.payload-ai-assistant__message {
+  max-width: 78%;
+  white-space: pre-wrap;
+  line-height: 1.5;
+  font-size: 15px;
+}
+
+.payload-ai-assistant__message--user {
+  align-self: flex-end;
+  padding: 13px 17px;
+  border-radius: 2rem 4rem 0 2rem;
+  background: #2929295c;
+  color: yellowgreen;
+  corner-shape: squircle;
+}
+
+.payload-ai-assistant__message--assistant {
+  align-self: flex-start;
+  color: #f4f4f4;
+}
+
+.payload-ai-assistant__typing {
+  color: #a5a5a5;
+}
+
+.payload-ai-assistant__error {
+  margin: 0 24px 12px;
+  padding: 10px 12px;
+  border: 1px solid #7f1d1d;
+  border-radius: 6px;
+  background: #2a1212;
+  color: #fecaca;
+  font-size: 13px;
+  width: 100%;
+  max-width: 67rem;
+  display: flex;
+  flex-wrap: wrap;
+  overflow: auto;
+}
+
+.payload-ai-assistant__composer {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 12px;
+  align-items: end;
+  margin: 0 24px 24px;
+  padding: 13px;
+  border: 1px solid #2c2c2c;
+  border-radius: 2rem;
+  corner-shape: squircle;
+  background: #171717;
+  box-shadow: var(--shadow-xl);
+}
+
+.payload-ai-assistant__composer-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  scale: 0.9;
+}
+
+.payload-ai-assistant__mic-button {
+  min-width: 42px !important;
+}
+
+.payload-ai-assistant__mic-button[data-recording='true'] {
+  opacity: 1;
+}
+
+.payload-ai-assistant__composer textarea {
+  min-height: 48px;
+  max-height: 170px;
+  resize: vertical;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: #f5f5f5;
+  font: inherit;
+  font-size: medium;
+}
+
+.payload-ai-assistant__composer:focus-within {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+  --shadow-2xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--shadow-2xl);
+}
+
+.payload-ai-assistant__composer textarea::placeholder {
+  color: #8f8f8f;
+}
+
+.payload-ai-assistant__composer button {
+  min-width: 64px;
+  height: 42px;
+  border: 0;
+  border-radius: 2rem;
+  corner-shape: squircle;
+  background: #2f2f2f;
+  color: #f5f5f5;
+  font-size: 18px;
+  cursor: pointer;
+  --shadow-xl: 0 10px 20px -5px rgba(0, 0, 0, 0.1), 0 4px 20px -5px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-xl);
+  transition: all .3s;
+}
+
+.payload-ai-assistant__composer button:hover {
+  background: var(--accent);
+  color: #8100ff !important;
+  filter:brightness(0.9);
+  --shadow-2xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--shadow-2xl);
+  transition: all .3s;
+}
+
+.payload-ai-assistant__composer button:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+@media (max-width: 768px) {
+  .payload-ai-assistant__action {
+    margin-right: 1rem;
+  }
+
+  .payload-ai-assistant__overlay {
+    padding: 8px;
+  }
+
+  .payload-ai-assistant__modal {
+    width: 100%;
+    height: 100%;
+  }
+
+  .payload-ai-assistant__message {
+    max-width: 92%;
+  }
+}
+
+.payload-ai-assistant__author {
+  display: flex;
+  float: right;
+  position: relative;
+  right: 0;
+  margin-top: -1rem;
+  margin-left: auto;
+  padding: 0 1rem 1rem;
+  font-size: smaller;
+  opacity: 0.1;
+}
+
+.dustedBotSVG-58,
+.dustedBotSVG-59,
+.dustedBotSVG-60,
+.dustedBotSVG-61,
+.dustedBotSVG-62,
+.dustedBotSVG-63,
+.dustedBotSVG-64,
+.dustedBotSVG-65,
+.dustedBotSVG-66,
+.dustedBotSVG-67,
+.dustedBotSVG-68,
+.dustedBotSVG-69,
+.dustedBotSVG-70,
+.dustedBotSVG-71,
+.dustedBotSVG-72 {
+  fill: darkgray;
+}
+
+.payload-ai-assistant__dustedBot {
+    position: absolute;
+    overflow: hidden;
+    max-width: 14rem;
+    width: 100%;
+    height: 8rem;
+    right: 0;
+    top: 0;
+    pointer-events: none;
+    z-index: 0;
+    mix-blend-mode: exclusion;
+    border-bottom: 1px solid var(--border-color-50);
+    background: var(--color-base-950);
+    backdrop-filter: blur(10px);
+    box-shadow: var(--shadow-xl);
+    scale: 0.95;
+    transform-origin: top right;
+}
+
+.dustedBotSVG {
+  position: absolute;
+  height: 10rem;
+  top: 1rem;
+  right: 0;
+}
+`

package/templates/blocks/DD-Pricing/Component.tsx

@@ -144,7 +144,6 @@ export function DDPricing({
       className="studio-pricing-block px-6 pb-20 pt-32 text-stone-700 dark:text-stone-50"
     >
       <div className="mx-auto max-w-3xl text-center">
-        #BlockName-DDPricing
         {eyebrow && (
           <p className="mb-4 text-xs font-semibold uppercase tracking-[0.28em] text-stone-700 dark:text-stone-500">
             {eyebrow}
@@ -214,7 +213,7 @@ export function DDPricing({
                     ? 'dark:border-white dark:bg-stone-50/50'
                     : 'border-stone-200 dark:border-stone-800 bg-stone-50/50 dark:bg-stone-900/50'
                 }`}
-                style={{ cornerShape: 'squircle' } as React.CSSProperties}
+                style={{ borderRadius: '2rem', cornerShape: 'squircle' } as React.CSSProperties}
               >
                 {tier.badge && (
                   <div className="absolute -top-3 left-1/2 -translate-x-1/2">
@@ -271,7 +270,7 @@ export function DDPricing({
                         ? 'border border-indigo-700 bg-indigo-800 text-stone-200 hover:bg-indigo-700'
                         : 'bg-indigo-50 text-indigo-900 hover:bg-indigo-100'
                   }`}
-                  style={{ cornerShape: 'squircle' } as React.CSSProperties}
+                  style={{ borderRadius: '2rem', cornerShape: 'squircle' } as React.CSSProperties}
                 >
                   {tier.cta ?? 'Get Started'}
                 </Link>