@flamingo-stack/openframe-frontend-core 0.0.305 → 0.0.306

package/dist/utils/seo-title.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Single source of truth for the `seo_title` length budget.
+ *
+ * The `seo_title` is rendered as the page `<title>` VERBATIM — no brand suffix is
+ * appended to it (the `| <Brand>` suffix is kept only on the default/actual-title
+ * fallback). So this is the full rendered-title budget; search engines truncate
+ * page titles around 60 chars.
+ *
+ * This number lives in exactly ONE place. Consumers:
+ *   - `SEOEditorPreview` — input `maxLength` + the too-long alert.
+ *   - the hub — imports it (via `@flamingo-stack/openframe-frontend-core/utils`)
+ *     for the AI generation prompt guidance and the DB CHECK value.
+ */
+export declare const SEO_TITLE_MAX_LENGTH = 60;
+//# sourceMappingURL=seo-title.d.ts.map

package/dist/utils/seo-title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"seo-title.d.ts","sourceRoot":"","sources":["../../src/utils/seo-title.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,oBAAoB,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.305",
+  "version": "0.0.306",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/features/seo-editor-preview.tsx

@@ -6,6 +6,9 @@ import { ConfidenceBadge } from '../features';
 import { Globe, ExternalLink, Upload, X, Loader2, Sparkles } from 'lucide-react';
 import { cn } from '../../utils';
 import Image from '../../embed-shims/next-image';
+// SSOT for the field cap (server-safe constant). The seo_title renders as the
+// page <title> verbatim (no brand suffix), so this is the full ~60-char budget.
+import { SEO_TITLE_MAX_LENGTH } from '../../utils/seo-title';
 
 export interface SEOEditorPreviewProps {
   // SEO fields - must be strings (not undefined)
@@ -68,6 +71,10 @@ export function SEOEditorPreview({
   const [isUploading, setIsUploading] = useState(false);
   const [fileInputRef, setFileInputRef] = useState<HTMLInputElement | null>(null);
 
+  // SEO title length state — alerts the editor when the title would render too long.
+  const seoTitleLength = (seoTitle || '').length;
+  const seoTitleTooLong = seoTitleLength > SEO_TITLE_MAX_LENGTH;
+
   // Use fallback values if OG fields are empty
   const displayTitle = seoTitle.trim() || title || 'Untitled';
   const displayDescription = seoDescription.trim() || summary || 'No description';
@@ -124,9 +131,26 @@ export function SEOEditorPreview({
             value={seoTitle || ''}
             onChange={(e) => onSeoTitleChange(e.target.value)}
             disabled={disabled}
+            maxLength={SEO_TITLE_MAX_LENGTH}
+            invalid={seoTitleTooLong}
             placeholder="Enter SEO meta title..."
             className="bg-ods-bg border-ods-border text-ods-text-primary"
           />
+          <div className="flex items-center justify-between gap-2">
+            <span className="text-[11px] text-ods-error font-['DM_Sans']">
+              {seoTitleTooLong
+                ? `Too long — search engines may truncate this title (keep it ≤ ${SEO_TITLE_MAX_LENGTH})`
+                : ''}
+            </span>
+            <span
+              className={cn(
+                "text-[11px] font-['DM_Sans'] tabular-nums shrink-0",
+                seoTitleTooLong ? 'text-ods-error font-semibold' : 'text-ods-text-secondary'
+              )}
+            >
+              {seoTitleLength}/{SEO_TITLE_MAX_LENGTH}
+            </span>
+          </div>
           {!seoTitle && title && (
             <p className="text-[11px] text-ods-accent font-['DM_Sans']">
               Auto-populated from title

package/src/utils/index.ts

@@ -26,6 +26,9 @@ export {
 } from './ods-color-utils'
 export { delay, generateRandomString, truncateString, deepClone, getSlackCommunityJoinUrl, serializeJsonLd } from './common'
 export { getBaseUrl } from '../utils/cn'
+// SEO title length budget — server-safe constant (SSOT). Consumed by the hub
+// (prompt guidance + DB check value) and by SEOEditorPreview (input maxLength).
+export { SEO_TITLE_MAX_LENGTH } from './seo-title'
 
 export * from './platform-config'
 export * from './os-platforms'

package/src/utils/seo-title.ts

@@ -0,0 +1,14 @@
+/**
+ * Single source of truth for the `seo_title` length budget.
+ *
+ * The `seo_title` is rendered as the page `<title>` VERBATIM — no brand suffix is
+ * appended to it (the `| <Brand>` suffix is kept only on the default/actual-title
+ * fallback). So this is the full rendered-title budget; search engines truncate
+ * page titles around 60 chars.
+ *
+ * This number lives in exactly ONE place. Consumers:
+ *   - `SEOEditorPreview` — input `maxLength` + the too-long alert.
+ *   - the hub — imports it (via `@flamingo-stack/openframe-frontend-core/utils`)
+ *     for the AI generation prompt guidance and the DB CHECK value.
+ */
+export const SEO_TITLE_MAX_LENGTH = 60;