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.
- package/dist/components/AuthGate.js +6 -0
- package/dist/core/components/AddBlockControlBar.js +30 -26
- package/dist/core/components/lexical/InlineContentEditable.js +19 -15
- package/dist/core/components/lexical/InlineLexicalEditor.js +62 -42
- package/dist/core/components/lexical/SelectionBroadcaster.js +25 -21
- package/dist/core/components/lexical/SidebarLexicalEditor.js +33 -21
- package/dist/core/createBlock.js +524 -488
- package/dist/core/createLayout.js +40 -28
- package/dist/core/hooks/useFieldSelection.js +12 -8
- package/dist/core/hooks/useIsEditable.js +6 -0
- package/dist/core/hooks/useOverlayMessage.js +19 -15
- package/dist/core/lib/contentType.d.ts +8 -8
- package/dist/core/lib/contentType.js +63 -0
- package/dist/features/content/CamoxContent.js +92 -88
- package/dist/features/content/components/AssetCard.js +46 -42
- package/dist/features/content/components/AssetCardSkeleton.js +8 -4
- package/dist/features/content/components/ContentSidebar.js +8 -4
- package/dist/features/content/components/UploadDropZone.js +31 -27
- package/dist/features/content/components/UploadProgressDrawer.js +98 -90
- package/dist/features/preview/CamoxPreview.js +162 -146
- package/dist/features/preview/components/AddBlockSheet.js +105 -101
- package/dist/features/preview/components/AgentChatSheet.js +74 -21
- package/dist/features/preview/components/AssetFieldEditor.js +98 -90
- package/dist/features/preview/components/AssetLightbox.js +21 -17
- package/dist/features/preview/components/AssetPickerGrid.js +84 -80
- package/dist/features/preview/components/BlockActionsPopover.js +35 -31
- package/dist/features/preview/components/BlockErrorBoundary.js +12 -8
- package/dist/features/preview/components/CreatePageModal.js +1 -1
- package/dist/features/preview/components/DebouncedFieldEditor.js +41 -37
- package/dist/features/preview/components/EditPageModal.js +114 -98
- package/dist/features/preview/components/FieldOverlayStyles.js +8 -4
- package/dist/features/preview/components/FieldToolbar.js +95 -54
- package/dist/features/preview/components/Frame.js +50 -46
- package/dist/features/preview/components/ItemFieldsEditor.js +81 -79
- package/dist/features/preview/components/LinkFieldEditor.js +138 -134
- package/dist/features/preview/components/MultipleAssetFieldEditor.js +105 -97
- package/dist/features/preview/components/OverlayTracker.js +19 -15
- package/dist/features/preview/components/Overlays.js +27 -23
- package/dist/features/preview/components/PageContentSheet.js +54 -4
- package/dist/features/preview/components/PageLocationFieldset.js +113 -109
- package/dist/features/preview/components/PagePicker.js +1 -1
- package/dist/features/preview/components/PageTree.js +443 -399
- package/dist/features/preview/components/PeekedBlock.js +69 -65
- package/dist/features/preview/components/PreviewPanel.js +64 -52
- package/dist/features/preview/components/PreviewSideSheet.js +25 -16
- package/dist/features/preview/components/PreviewToolbar.js +127 -123
- package/dist/features/preview/components/RepeatableItemsList.js +176 -171
- package/dist/features/preview/components/ShikiMarkdown.js +18 -14
- package/dist/features/preview/components/UnlinkAssetButton.js +74 -70
- package/dist/features/preview/components/useRepeatableItemActions.js +266 -0
- package/dist/features/preview/components/useUpdateBlockPosition.js +13 -9
- package/dist/features/provider/CamoxProvider.js +60 -52
- package/dist/features/provider/components/CamoxAppContext.js +10 -6
- package/dist/features/provider/components/CommandPalette.js +77 -69
- package/dist/features/provider/useAdminShortcuts.js +11 -7
- package/dist/features/routes/pageRoute.js +8 -4
- package/dist/features/studio/CamoxStudio.js +23 -19
- package/dist/features/studio/components/EnvironmentMenu.js +32 -28
- package/dist/features/studio/components/Navbar.js +62 -54
- package/dist/features/studio/components/ProjectMenu.js +131 -123
- package/dist/features/studio/components/UserButton.js +15 -11
- package/dist/features/studio/useTheme.js +82 -42
- package/dist/features/vite/definitionsSync.js +5 -5
- package/dist/features/vite/skillGeneration.js +43 -8
- package/dist/features/vite/vite.d.ts +1 -1
- package/dist/features/vite/vite.js +20 -2
- package/dist/hooks/use-marquee-selection.js +36 -32
- package/dist/lib/auth.js +49 -22
- package/dist/lib/normalized-data.js +55 -47
- package/dist/lib/use-project-room.js +22 -18
- package/dist/studio.css +1 -1
- package/package.json +10 -11
- package/skills/camox-block/SKILL.md +4 -0
- package/skills/camox-cli/SKILL.md +142 -0
- 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`:
|