camox 0.14.2 → 0.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. package/dist/components/AuthGate.js +6 -0
  2. package/dist/core/components/AddBlockControlBar.js +30 -26
  3. package/dist/core/components/lexical/InlineContentEditable.js +19 -15
  4. package/dist/core/components/lexical/InlineLexicalEditor.js +62 -42
  5. package/dist/core/components/lexical/SelectionBroadcaster.js +25 -21
  6. package/dist/core/components/lexical/SidebarLexicalEditor.js +33 -21
  7. package/dist/core/createBlock.js +524 -488
  8. package/dist/core/createLayout.js +40 -28
  9. package/dist/core/hooks/useFieldSelection.js +12 -8
  10. package/dist/core/hooks/useIsEditable.js +6 -0
  11. package/dist/core/hooks/useOverlayMessage.js +19 -15
  12. package/dist/core/lib/contentType.d.ts +8 -8
  13. package/dist/core/lib/contentType.js +63 -0
  14. package/dist/features/content/CamoxContent.js +92 -88
  15. package/dist/features/content/components/AssetCard.js +46 -42
  16. package/dist/features/content/components/AssetCardSkeleton.js +8 -4
  17. package/dist/features/content/components/ContentSidebar.js +8 -4
  18. package/dist/features/content/components/UploadDropZone.js +31 -27
  19. package/dist/features/content/components/UploadProgressDrawer.js +98 -90
  20. package/dist/features/preview/CamoxPreview.js +162 -146
  21. package/dist/features/preview/components/AddBlockSheet.js +105 -101
  22. package/dist/features/preview/components/AgentChatSheet.js +74 -21
  23. package/dist/features/preview/components/AssetFieldEditor.js +98 -90
  24. package/dist/features/preview/components/AssetLightbox.js +21 -17
  25. package/dist/features/preview/components/AssetPickerGrid.js +84 -80
  26. package/dist/features/preview/components/BlockActionsPopover.js +35 -31
  27. package/dist/features/preview/components/BlockErrorBoundary.js +12 -8
  28. package/dist/features/preview/components/CreatePageModal.js +1 -1
  29. package/dist/features/preview/components/DebouncedFieldEditor.js +41 -37
  30. package/dist/features/preview/components/EditPageModal.js +114 -98
  31. package/dist/features/preview/components/FieldOverlayStyles.js +8 -4
  32. package/dist/features/preview/components/FieldToolbar.js +95 -54
  33. package/dist/features/preview/components/Frame.js +50 -46
  34. package/dist/features/preview/components/ItemFieldsEditor.js +81 -79
  35. package/dist/features/preview/components/LinkFieldEditor.js +138 -134
  36. package/dist/features/preview/components/MultipleAssetFieldEditor.js +105 -97
  37. package/dist/features/preview/components/OverlayTracker.js +19 -15
  38. package/dist/features/preview/components/Overlays.js +27 -23
  39. package/dist/features/preview/components/PageContentSheet.js +54 -4
  40. package/dist/features/preview/components/PageLocationFieldset.js +113 -109
  41. package/dist/features/preview/components/PagePicker.js +1 -1
  42. package/dist/features/preview/components/PageTree.js +443 -399
  43. package/dist/features/preview/components/PeekedBlock.js +69 -65
  44. package/dist/features/preview/components/PreviewPanel.js +64 -52
  45. package/dist/features/preview/components/PreviewSideSheet.js +25 -16
  46. package/dist/features/preview/components/PreviewToolbar.js +127 -123
  47. package/dist/features/preview/components/RepeatableItemsList.js +176 -171
  48. package/dist/features/preview/components/ShikiMarkdown.js +18 -14
  49. package/dist/features/preview/components/UnlinkAssetButton.js +74 -70
  50. package/dist/features/preview/components/useRepeatableItemActions.js +266 -0
  51. package/dist/features/preview/components/useUpdateBlockPosition.js +13 -9
  52. package/dist/features/provider/CamoxProvider.js +60 -52
  53. package/dist/features/provider/components/CamoxAppContext.js +10 -6
  54. package/dist/features/provider/components/CommandPalette.js +77 -69
  55. package/dist/features/provider/useAdminShortcuts.js +11 -7
  56. package/dist/features/routes/pageRoute.js +8 -4
  57. package/dist/features/studio/CamoxStudio.js +23 -19
  58. package/dist/features/studio/components/EnvironmentMenu.js +32 -28
  59. package/dist/features/studio/components/Navbar.js +62 -54
  60. package/dist/features/studio/components/ProjectMenu.js +131 -123
  61. package/dist/features/studio/components/UserButton.js +15 -11
  62. package/dist/features/studio/useTheme.js +82 -42
  63. package/dist/features/vite/definitionsSync.js +5 -5
  64. package/dist/features/vite/skillGeneration.js +43 -8
  65. package/dist/features/vite/vite.d.ts +1 -1
  66. package/dist/features/vite/vite.js +20 -2
  67. package/dist/hooks/use-marquee-selection.js +36 -32
  68. package/dist/lib/auth.js +49 -22
  69. package/dist/lib/normalized-data.js +55 -47
  70. package/dist/lib/use-project-room.js +22 -18
  71. package/dist/studio.css +1 -1
  72. package/package.json +10 -11
  73. package/skills/camox-block/SKILL.md +4 -0
  74. package/skills/camox-cli/SKILL.md +142 -0
  75. package/skills/camox-layout/SKILL.md +4 -0
@@ -0,0 +1,142 @@
1
+ ---
2
+ name: camox-cli
3
+ description: "How to read or modify the website's content (pages and the sections inside them) via the Camox CLI. This is a Camox-powered site, so any request about its content — even when phrased generically — is a Camox operation. Use this skill whenever the user wants to add, remove, rename, reorder, or change anything visible on the site: a new page or route, a section / hero / footer / etc., the title or wording shown to visitors, what appears at a URL, the SEO title or social-share preview, the structure shared across pages, etc. Trigger broadly — on phrases like 'add a page', 'put a hero at the top', 'change the headline', 'move this section', 'what's on /about', 'fix the meta title', 'rename this route', 'why does this show up on every page' — and on similar requests even when the user doesn't say 'page', 'block', 'layout', 'CMS', 'Camox', or 'CLI'. When in doubt and the request touches site content, load this skill."
4
+ ---
5
+
6
+ # Using the Camox CLI
7
+
8
+ The Camox CLI is the right tool for any **CRUD operation on CMS content** — pages, block instances, layout assignments, meta fields. Reach for it before writing a custom script or asking the user to click through the dashboard. The `camox` binary is already installed in this project (it ships with the `camox` package).
9
+
10
+ ## When to use this skill vs. `camox-block` / `camox-layout`
11
+
12
+ This skill (`camox-cli`) is for **content** — the actual pages, the actual block instances on those pages, the wording and images visitors see. If the user wants to add a section to a specific page, change copy, reorder blocks, create a new route, swap which layout a page uses, or fix a meta title, you're editing content and you want the CLI.
13
+
14
+ The `camox-block` skill is for **block definitions** — the `.tsx` files in `src/camox/blocks/` that define what _kinds_ of blocks exist (their schema, fields, and rendering). Reach for it only when the user wants to introduce a new type of section that doesn't exist yet (e.g. "we need a pricing-table section and we've never built one"), or change the schema or rendering of an existing block type.
15
+
16
+ The `camox-layout` skill is for **layout definitions** — the `.tsx` files in `src/camox/layouts/` that define the shared shells around page content (which navbar/footer blocks wrap pages, how meta titles are built, OG images, etc.). Reach for it when the user wants a new kind of page wrapper, a different shared structure, or to change how titles or social previews are constructed. _Assigning_ an existing layout to a page is content — that's the CLI.
17
+
18
+ Rule of thumb: if the change should be visible on the live site without a code deploy, it's content → use the CLI. If it requires editing source files in `src/camox/blocks/` or `src/camox/layouts/`, it's a definition → use `camox-block` or `camox-layout`. Some requests need both (e.g. "add a pricing section the site has never had before" = define the block via `camox-block`, then create an instance on a page via the CLI).
19
+
20
+ ## Running the CLI
21
+
22
+ This project uses **{{PM_NAME}}**. Always invoke the CLI as:
23
+
24
+ ```sh
25
+ {{CAMOX_CMD}} <command> [options]
26
+ ```
27
+
28
+ For example: `{{CAMOX_CMD}} pages list`, `{{CAMOX_CMD}} blocks types`.
29
+
30
+ ## Discover commands with `--help`
31
+
32
+ The CLI surface evolves. **Don't guess command names or flags from memory — ask the CLI.** Run `--help` at the root and on every subcommand before invoking it, and treat the output as authoritative.
33
+
34
+ ```sh
35
+ # top-level: lists command groups (pages, blocks, layouts, ...)
36
+ {{CAMOX_CMD}} --help
37
+
38
+ # a group: lists its subcommands
39
+ {{CAMOX_CMD}} pages --help
40
+
41
+ # a subcommand: lists its required and optional flags
42
+ {{CAMOX_CMD}} pages create --help
43
+ ```
44
+
45
+ The CLI is organised into command groups around the resource types (pages, blocks, layouts, …). Use `--help` to discover what each group supports — the exact set of subcommands and flags is the CLI's responsibility, not this skill's.
46
+
47
+ ## Common recipes
48
+
49
+ Most content tasks fit into a small number of shapes. Use these as the entry-point template, then verify exact flags with `--help`. Always look up the page (`pages get`) before you create or move blocks — you'll need its `id` and the `id` / `type` of any sibling block you're positioning relative to.
50
+
51
+ ### Add a new block at a specific spot on a page
52
+
53
+ ```sh
54
+ # 1) Find the page and the sibling you'll position relative to.
55
+ {{CAMOX_CMD}} pages get --path /
56
+ # read the response to grab pageId and the id of the existing first block
57
+
58
+ # 2) See what fields the block type accepts.
59
+ {{CAMOX_CMD}} blocks describe --type hero
60
+
61
+ # 3) Create the new block at the desired position.
62
+ # At the very top of the page:
63
+ {{CAMOX_CMD}} blocks create --page-id 25 --type hero --content '{...}' --position first
64
+ # Or right before / after a known sibling:
65
+ {{CAMOX_CMD}} blocks create --page-id 25 --type hero --content '{...}' --before-id 174
66
+ {{CAMOX_CMD}} blocks create --page-id 25 --type hero --content '{...}' --after-id 174
67
+ # Or appended to the end (default):
68
+ {{CAMOX_CMD}} blocks create --page-id 25 --type hero --content '{...}'
69
+ ```
70
+
71
+ See **Block positioning** below for the full set of options.
72
+
73
+ ### Update copy in an existing block
74
+
75
+ ```sh
76
+ # 1) Locate the block on the page.
77
+ {{CAMOX_CMD}} pages get --path /pricing
78
+ # note the block id you want to edit
79
+
80
+ # 2) Patch only the fields you want to change — content is merged.
81
+ {{CAMOX_CMD}} blocks edit --id 314 --content '{"headline": "New headline"}'
82
+ ```
83
+
84
+ ### Create a new page using an existing layout
85
+
86
+ ```sh
87
+ # 1) List layouts and pick one.
88
+ {{CAMOX_CMD}} layouts list
89
+
90
+ # 2) Create the page under that layout.
91
+ {{CAMOX_CMD}} pages create --path-segment about --layout-id 39
92
+ # Use --parent-page-id <ID> to nest the page under another route.
93
+ ```
94
+
95
+ ## Block positioning
96
+
97
+ `blocks create` and `blocks move` accept the same set of positioning flags. **Pass at most one** — combining them is rejected. `move` requires one (use `--position last` to send a block to the end); `create` defaults to appending at the end if you pass none.
98
+
99
+ | Flag | Meaning |
100
+ | ------------------------- | -------------------------------------------------------------------- |
101
+ | `--position first` | Place at the very top of the page. |
102
+ | `--position last` | Place at the very bottom of the page (also the create-time default). |
103
+ | `--after-id <ID>` | Place immediately after the sibling block with that id. |
104
+ | `--before-id <ID>` | Place immediately before the sibling block with that id. |
105
+ | `--after-position <KEY>` | Low-level: insert after a known fractional-index key. |
106
+ | `--before-position <KEY>` | Low-level: insert before a known fractional-index key. |
107
+
108
+ Prefer the high-level flags (`--position`, `--after-id`, `--before-id`) — they read naturally and don't require you to know the fractional-index format. The `--after-position` / `--before-position` flags exist for cases where you already have a key in hand (e.g. piping output between commands).
109
+
110
+ ## The `--production` flag
111
+
112
+ By default, every command runs against the **dev environment** — a per-user, isolated copy of the CMS that the dev server reads from. Changes you make here do not affect the live site, so dev is the safe place to experiment.
113
+
114
+ Pass `--production` to target the **live CMS** instead:
115
+
116
+ ```sh
117
+ {{CAMOX_CMD}} pages list --production
118
+ {{CAMOX_CMD}} blocks edit --id <ID> --production
119
+ ```
120
+
121
+ Only use `--production` when the user has explicitly asked to operate on live content. For everything else — exploration, tentative edits, anything you'd want to be able to throw away — stay on the default dev environment.
122
+
123
+ ## Don't write slop — build understanding first
124
+
125
+ Anything you create with this CLI ends up on a real website read by real people. **Never invent generic filler copy** ("Welcome to our amazing platform", "Lorem ipsum"-grade headlines, plausible-sounding-but-fabricated stats, made-up testimonials, fake company names). That kind of content is worse than nothing — it ships, it gets indexed, and the user has to clean it up.
126
+
127
+ Before writing any block content:
128
+
129
+ 1. **Read what already exists.** Use the CLI to list pages and inspect existing blocks (`{{CAMOX_CMD}} pages list`, `{{CAMOX_CMD}} pages get …`, `{{CAMOX_CMD}} blocks describe …`, etc. — discover the exact commands via `--help`). The site's voice, product positioning, naming, and recurring claims are usually already established somewhere; mirror them. A new "About" block on a site that already has hero/feature copy should sound like a continuation of that copy, not a fresh marketing draft.
130
+ 2. **Pull real facts from the right source.** If the user gave you the content, use it verbatim. If the content describes something external (a person, company, product, paper, event, library), use web search or whatever fetch tools you have to look up actual details before writing. If you genuinely can't get a fact, ask the user — don't paper over it with a guess.
131
+ 3. **For `File` and `Embed` fields, do not guess URLs.** These point at real assets (PDFs, videos, embeds). A hallucinated URL produces a broken link or, worse, a link to someone else's content. Leave the URL field blank and tell the user the asset still needs to be supplied — the CMS will treat the empty value correctly, and `toMarkdown` will skip the line.
132
+ 4. **Same for `Image`.** Don't fabricate filenames. If you don't have a real uploaded asset to reference, leave it empty and flag it.
133
+
134
+ Short version: if you're tempted to "make something up that sounds about right", stop and either go find the real thing or hand the gap back to the user.
135
+
136
+ ## Workflow
137
+
138
+ 1. If the task matches one of the **Common recipes** above, start from that template — it's almost always the right shape.
139
+ 2. Otherwise, run `{{CAMOX_CMD}} --help` to find the right command group, then `{{CAMOX_CMD}} <group> --help` and `{{CAMOX_CMD}} <group> <command> --help` to confirm the exact flags.
140
+ 3. Before writing content, read existing pages/blocks and gather any external facts you need (see above).
141
+ 4. Run the command against dev first (no `--production`).
142
+ 5. Add `--production` only when the user has asked to touch live content.
@@ -7,6 +7,10 @@ description: "How to create and edit Camox layout definition files. Use this ski
7
7
 
8
8
  A layout wraps pages in shared structure — a navbar at the top, a footer at the bottom, consistent styling. Each page in the CMS is assigned a layout. This skill covers creating layout **definitions** — the template that describes which blocks surround page content and how to render them.
9
9
 
10
+ ## After defining the layout: load `camox-cli`
11
+
12
+ A definition only adds a new layout to the catalog — it doesn't apply it to any page, and existing pages keep whatever layout they were already assigned. If the user wanted "the about page to use the new marketing layout" or "all docs pages to use this layout", the second half of that work is reassigning pages, which happens through the CLI. Once the layout is defined and the dev server has picked it up, **load the `camox-cli` skill** to update the relevant pages' layout assignments. Don't stop after the definition unless the user explicitly only wanted to set up the layout for future pages.
13
+
10
14
  ## Quick Start
11
15
 
12
16
  A layout file lives in the app's `src/camox/layouts/` folder, is a `.tsx` file, and exports `layout`: