@embeddables/cli 0.7.19 → 0.8.0

package/.prompts/embeddables-cli.md

@@ -154,13 +154,13 @@ export function PageName() {
 }
 ```
 
-**OptionSelector buttons pattern**: When writing TSX files with `OptionSelector` components, define the buttons as constants before the JSX, then reference them in the `buttons` prop:
+**OptionSelector buttons pattern**: When writing TSX files with `OptionSelector` components, define the buttons as constants before the JSX, then reference them in the `buttons` prop. Use `OptionSelectorButtonWithLanguages` as the type (imported from `@embeddables/cli/components`) — this type extends `OptionSelectorButton` with an optional `languages` property, so it works for buttons both with and without translations:
 
 ```tsx
 'use client'
 
 import { OptionSelector } from '@embeddables/cli/components'
-import type { OptionSelectorButton } from '@embeddables/cli/types'
+import type { OptionSelectorButtonWithLanguages as OptionSelectorButton } from '@embeddables/cli/components'
 
 const planButtons: OptionSelectorButton[] = [
   { id: 'button_plan_basic', key: 'basic', text: 'Basic Plan', description: '$9/month' },
@@ -187,6 +187,8 @@ export default function PlanPage() {
 
 This pattern improves readability and makes the buttons array easier to maintain compared to defining it inline within the JSX.
 
+**Important**: Always use `OptionSelectorButtonWithLanguages` (not `OptionSelectorButton` from `@embeddables/cli/types`) when declaring button constants. The alias `as OptionSelectorButton` keeps the code readable while ensuring the type supports the `languages` property for translations. This matches what the CLI generates when reverse-compiling.
+
 ## Styles Structure (CSS)
 
 Styles are stored in `Flow.styles` as a map of CSS selectors to style objects. The `FlowStyles` type is defined in `src/types-builder.ts`.
@@ -768,11 +770,12 @@ Add a `languages` prop to any component in your `.page.tsx` or `.location.tsx` f
 
 ### Adding Translations to OptionSelector Buttons
 
-For OptionSelector components, translations are added on each **button** object (not on the component itself). Add a `languages` property inside each button definition:
+For OptionSelector components, translations are added on each **button** object (not on the component itself). Add a `languages` property inside each button definition. The `OptionSelectorButtonWithLanguages` type (not plain `OptionSelectorButton`) is required here since it includes the `languages` property:
 
 ```tsx
 import { OptionSelector } from '@embeddables/cli/components'
-import type { OptionSelectorButton } from '@embeddables/cli/types'
+
+import type { OptionSelectorButtonWithLanguages as OptionSelectorButton } from '@embeddables/cli/components'
 
 const planButtons: OptionSelectorButton[] = [
   {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embeddables/cli",
-  "version": "0.7.19",
+  "version": "0.8.0",
   "type": "module",
   "bin": {
     "embeddables": "./bin/embeddables.mjs"
@@ -55,6 +55,7 @@
     "@supabase/supabase-js": "^2.39.0",
     "@tailwindcss/postcss": "^4.1.18",
     "autoprefixer": "^10.4.23",
+    "boxen": "^8.0.1",
     "chokidar": "^3.6.0",
     "commander": "^12.1.0",
     "cssjson": "^2.1.3",
@@ -62,6 +63,8 @@
     "express": "^4.19.2",
     "fast-glob": "^3.3.2",
     "http-proxy-middleware": "^3.0.3",
+    "log-symbols": "^7.0.1",
+    "ora": "^9.3.0",
     "picocolors": "^1.1.0",
     "postcss": "^8.5.6",
     "prompts": "^2.4.2",