@inneranimalmedia/agentsam-sdk 2.6.4 → 2.6.5

package/apps/client-cms-editor/frontend/src/env.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="vite/client" />
+
+declare module '*.css?raw' {
+  const content: string;
+  export default content;
+}
+
+declare module '@inneranimalmedia/agentsam-cms-backend/routing' {
+  export function buildCmsHubPath(siteSlug?: string | null, basePath?: string): string;
+  export function buildCmsPath(options?: any, basePath?: string): string;
+  export function parseCmsRoute(pathname?: string, searchParams?: any, basePath?: string): any;
+  export function buildCmsEditorPath(options?: any, basePath?: string): string;
+}
+

package/apps/client-cms-editor/frontend/src/index.ts

@@ -0,0 +1,8 @@
+export { default as CmsEditor } from './CmsEditor';
+export { default } from './CmsEditor';
+export type { CmsEditorProps } from './CmsEditor';
+export { mountClientCmsEditor, type ClientCmsEditorBoot } from './mount.tsx';
+export { CmsAgentSurface, type CmsAgentSurfaceProps } from './CmsAgentSurface';
+export { AgentSamDrawer, type AgentSamDrawerProps } from './AgentSamDrawer';
+export * from './surfaces/index';
+

package/apps/client-cms-editor/frontend/src/lib/content-safety.ts

@@ -0,0 +1,63 @@
+const RICH_TAGS = new Set(['B', 'STRONG', 'I', 'EM', 'U', 'BR', 'P', 'UL', 'OL', 'LI', 'H2', 'H3', 'A']);
+
+export function escapeCmsText(value: unknown) {
+  return String(value ?? '')
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;');
+}
+
+export function safeCmsAssetUrl(value: unknown) {
+  const raw = String(value ?? '').trim();
+  if (!raw) return '';
+  if (raw.startsWith('/') || raw.startsWith('./') || raw.startsWith('../') || raw.startsWith('blob:')) {
+    return raw.replaceAll("'", '%27').replace(/[\r\n]/g, '');
+  }
+  if (/^data:image\/(?:png|jpeg|jpg|gif|webp);/i.test(raw)) {
+    return raw.replaceAll("'", '%27').replace(/[\r\n]/g, '');
+  }
+  try {
+    const url = new URL(raw);
+    if (url.protocol !== 'https:' && url.protocol !== 'http:') return '';
+    return url.toString().replaceAll("'", '%27').replace(/[\r\n]/g, '');
+  } catch {
+    return '';
+  }
+}
+
+export function safeCmsCssValue(value: unknown) {
+  const raw = String(value ?? '').trim();
+  if (!raw) return '';
+  if (/[{};]/.test(raw) || /<\/?(?:style|script)/i.test(raw) || /url\s*\(/i.test(raw)) return '';
+  return raw.replace(/[\r\n]/g, ' ');
+}
+
+export function sanitizeCmsRichText(value: unknown) {
+  const raw = String(value ?? '');
+  if (!raw) return '';
+  if (typeof DOMParser === 'undefined') return escapeCmsText(raw);
+
+  const doc = new DOMParser().parseFromString(`<body>${raw}</body>`, 'text/html');
+  const walk = (node: Element) => {
+    for (const child of Array.from(node.children)) {
+      if (!RICH_TAGS.has(child.tagName)) {
+        child.replaceWith(...Array.from(child.childNodes));
+        continue;
+      }
+      const originalHref = child.tagName === 'A' ? ((child as HTMLAnchorElement).getAttribute('href') || '') : '';
+      for (const attr of Array.from(child.attributes)) child.removeAttribute(attr.name);
+      if (child.tagName === 'A') {
+        const safe = safeCmsAssetUrl(originalHref);
+        if (safe) {
+          child.setAttribute('href', safe);
+          child.setAttribute('rel', 'noopener noreferrer');
+        }
+      }
+      walk(child);
+    }
+  };
+  walk(doc.body);
+  return doc.body.innerHTML;
+}

package/apps/client-cms-editor/frontend/src/main.tsx

@@ -0,0 +1,17 @@
+import { createRoot } from 'react-dom/client';
+import { StrictMode } from 'react';
+import CmsEditor from './CmsEditor';
+import './styles/studio.css';
+
+const root = document.getElementById('root');
+if (!root) throw new Error('cms_studio_root_missing');
+
+const params = new URLSearchParams(window.location.search);
+const projectSlug = (params.get('site') || params.get('project') || 'demo').trim() || 'demo';
+const pageId = (params.get('page') || '').trim() || null;
+
+createRoot(root).render(
+  <StrictMode>
+    <CmsEditor projectSlug={projectSlug} initialPageId={pageId} />
+  </StrictMode>,
+);

package/apps/client-cms-editor/frontend/src/mount.tsx

@@ -0,0 +1,51 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import CmsEditor from './CmsEditor';
+import studioCss from './styles/studio.css?raw';
+
+export type ClientCmsEditorBoot = {
+  projectSlug: string;
+  pageId?: string | null;
+  panel?: 'pages' | 'sections' | 'templates' | 'imports' | 'theme';
+};
+
+function injectStudioCss() {
+  if (document.querySelector('style[data-client-cms-editor]')) return;
+  const style = document.createElement('style');
+  style.dataset.clientCmsEditor = 'true';
+  style.textContent = String(studioCss || '');
+  document.head.appendChild(style);
+}
+
+export function mountClientCmsEditor(
+  mountEl: HTMLElement,
+  boot: ClientCmsEditorBoot,
+  onSiteChange?: (slug: string) => void,
+) {
+  injectStudioCss();
+  const panelRaw = boot.panel || 'pages';
+  const panel =
+    panelRaw === 'sections' ||
+    panelRaw === 'templates' ||
+    panelRaw === 'imports' ||
+    panelRaw === 'theme'
+      ? panelRaw
+      : 'pages';
+
+  createRoot(mountEl).render(
+    <StrictMode>
+      <CmsEditor
+        projectSlug={boot.projectSlug}
+        initialPageId={boot.pageId || null}
+        initialPanel={panel}
+        siteCatalog={[]}
+        onSiteChange={(slug) => {
+          const url = new URL(window.location.href);
+          url.searchParams.set('site', slug);
+          window.history.replaceState({}, '', url.toString());
+          onSiteChange?.(slug);
+        }}
+      />
+    </StrictMode>,
+  );
+}

package/apps/client-cms-editor/frontend/src/styles/agentsam-drawer.css

@@ -0,0 +1,214 @@
+/* FnF AgentSam Side Assistant — docked drawer (from fuelnfreetime admin) */
+
+.agentsam-dock {
+  flex: none;
+  width: 0;
+  min-width: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  border-left: 0 solid rgba(0, 0, 0, 0.08);
+  background: rgba(255, 255, 255, 0.96);
+  transition: width 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), border-width 0.2s ease;
+  z-index: 25;
+}
+
+.agentsam-dock.is-open {
+  width: min(400px, 36vw);
+  border-left-width: 1px;
+}
+
+.agentsam-drawer {
+  display: flex;
+  flex-direction: column;
+  width: min(400px, 36vw);
+  height: 100%;
+  min-height: 0;
+  background: rgba(255, 255, 255, 0.96);
+  backdrop-filter: blur(24px) saturate(1.25);
+  -webkit-backdrop-filter: blur(24px) saturate(1.25);
+  color: #1a1a1a;
+}
+
+.agentsam-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 16px 12px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  background: rgba(255, 255, 255, 0.55);
+  flex: none;
+}
+
+.agentsam-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.agentsam-brand strong {
+  display: block;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.agentsam-brand span {
+  display: block;
+  font-size: 11px;
+  color: #6b6b6b;
+  margin-top: 1px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agentsam-mark {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  display: grid;
+  place-items: center;
+  color: #5c2d91;
+  background: linear-gradient(135deg, rgba(92, 45, 145, 0.14), rgba(255, 69, 0, 0.1));
+  border: 1px solid rgba(92, 45, 145, 0.18);
+  flex-shrink: 0;
+}
+
+.agentsam-close {
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  background: rgba(255, 255, 255, 0.7);
+  color: #4a4a4a;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+
+.agentsam-close:hover {
+  background: #fff;
+  color: #1a1a1a;
+}
+
+.agentsam-connected {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.agentsam-empty {
+  padding: 16px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: #6b6b6b;
+}
+
+.agentsam-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 0;
+}
+
+.agentsam-msg {
+  max-width: 92%;
+  padding: 10px 12px;
+  border-radius: 12px;
+  font-size: 13px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.agentsam-msg--user {
+  align-self: flex-end;
+  background: #1a1a1a;
+  color: #fff;
+  border-bottom-right-radius: 4px;
+}
+
+.agentsam-msg--assistant {
+  align-self: flex-start;
+  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-bottom-left-radius: 4px;
+}
+
+.agentsam-msg--typing {
+  opacity: 0.65;
+  font-style: italic;
+}
+
+.agentsam-compose {
+  display: flex;
+  gap: 8px;
+  align-items: flex-end;
+  padding: 12px 16px 16px;
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  background: rgba(255, 255, 255, 0.6);
+  flex: none;
+}
+
+.agentsam-compose textarea {
+  flex: 1;
+  resize: none;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 12px;
+  padding: 10px 12px;
+  font: inherit;
+  font-size: 13px;
+  background: rgba(255, 255, 255, 0.95);
+  min-height: 44px;
+  color: #1a1a1a;
+}
+
+.agentsam-compose textarea:focus {
+  outline: none;
+  border-color: rgba(92, 45, 145, 0.45);
+}
+
+.agentsam-send {
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 12px;
+  background: #1a1a1a;
+  color: #fff;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.agentsam-send:hover:not(:disabled) {
+  background: #000;
+}
+
+.agentsam-send:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.fnf-topbar-btn.is-agentsam-active {
+  background: rgba(92, 45, 145, 0.22);
+  color: #e8d4ff;
+}
+
+@media (max-width: 900px) {
+  .agentsam-dock.is-open {
+    width: min(100%, 420px);
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 200;
+    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.15);
+  }
+}