camox 0.42.0 → 0.44.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/bin/camox.mjs +9 -1
- package/dist/core/components/lexical/{GradientNode.js → HighlightNode.js} +34 -34
- package/dist/core/components/lexical/InlineLexicalEditor.js +14 -14
- package/dist/core/components/lexical/InlineStylesPlugin.js +25 -9
- package/dist/core/components/lexical/SelectionBroadcaster.js +7 -7
- package/dist/core/components/lexical/SidebarLexicalEditor.js +24 -24
- package/dist/core/components/lexical/TextLinkPopover.js +191 -208
- package/dist/core/components/lexical/editorConfig.js +2 -2
- package/dist/core/createApp.d.ts +31 -4
- package/dist/core/createApp.js +2 -1
- package/dist/core/createBlock.js +24 -10
- package/dist/core/createLayout.d.ts +16 -3
- package/dist/core/createLayout.js +15 -15
- package/dist/core/derivedRoutes.js +1 -1
- package/dist/core/dom.d.ts +17 -0
- package/dist/core/dom.js +22 -0
- package/dist/core/editing/createEditableBlock.d.ts +135 -1
- package/dist/core/editing/createEditableBlock.js +209 -74
- package/dist/core/lib/contentType.d.ts +5 -0
- package/dist/core/lib/contentType.js +11 -0
- package/dist/core/lib/fieldTypes.js +1 -0
- package/dist/core/lib/iconTypes.d.ts +13 -0
- package/dist/core/lib/icons.d.ts +6 -0
- package/dist/core/lib/icons.js +130 -0
- package/dist/core/lib/lexicalReact.js +4 -4
- package/dist/core/lib/lexicalState.js +8 -8
- package/dist/core/lib/modifierFormats.js +2 -2
- package/dist/core/lib/textLinks.js +5 -2
- package/dist/core/lib/textStyles.d.ts +3 -3
- package/dist/core/lib/textStyles.js +9 -14
- package/dist/core/pageDestinations.js +37 -0
- package/dist/features/content/components/AssetCard.js +104 -68
- package/dist/features/og/imageResponse.node.js +11 -9
- package/dist/features/preview/CamoxPreview.js +148 -146
- package/dist/features/preview/commentsEnabled.js +2 -2
- package/dist/features/preview/components/AddBlockSidebar.js +1 -1
- package/dist/features/preview/components/AssetLightbox.js +17 -6
- package/dist/features/preview/components/AttachedComments.js +224 -87
- package/dist/features/preview/components/BlockActionsPopover.js +1 -1
- package/dist/features/preview/components/CommentTargetQuote.js +22 -21
- package/dist/features/preview/components/CreatePageModal.js +4 -4
- package/dist/features/preview/components/DerivedLayoutDialog.js +36 -21
- package/dist/features/preview/components/DerivedLayoutSidebar.js +45 -26
- package/dist/features/preview/components/DerivedPageInfoSidebar.js +38 -26
- package/dist/features/preview/components/FieldOverlayStyles.js +29 -9
- package/dist/features/preview/components/FieldToolbar.js +12 -12
- package/dist/features/preview/components/IconFieldEditor.js +231 -0
- package/dist/features/preview/components/ItemFieldsEditor.js +21 -14
- package/dist/features/preview/components/LinkFieldEditor.js +212 -209
- package/dist/features/preview/components/OverlayTracker.js +1 -1
- package/dist/features/preview/components/PageEditorSidebar.js +1 -1
- package/dist/features/preview/components/PageInfoSidebar.js +28 -28
- package/dist/features/preview/components/PagePicker.js +46 -46
- package/dist/features/preview/components/PageTree.js +1 -1
- package/dist/features/preview/components/PreviewPanel.js +1 -1
- package/dist/features/preview/components/PreviewToolbar.js +224 -225
- package/dist/features/preview/components/PublicationRow.js +8 -4
- package/dist/features/preview/components/SendFeedbackDialog.js +83 -0
- package/dist/features/preview/components/useRepeatableItemActions.js +1 -1
- package/dist/features/preview/overlayHighlights.js +54 -0
- package/dist/features/preview/previewCommentsStore.js +54 -34
- package/dist/features/preview/previewSelection.js +28 -23
- package/dist/features/preview/publication.js +10 -0
- package/dist/features/preview/usePageComments.js +39 -0
- package/dist/features/provider/CoreCamoxProvider.js +38 -6
- package/dist/features/provider/LocalhostPreviewProvider.js +81 -45
- package/dist/features/provider/components/CommandPalette.js +35 -84
- package/dist/features/runtime/pageApp.js +32 -28
- package/dist/features/runtime/pageServer.js +4 -1
- package/dist/features/runtime/runtime.d.ts +2 -0
- package/dist/features/runtime/runtime.js +45 -21
- package/dist/features/studio/components/EnvironmentMenu.js +76 -63
- package/dist/features/studio/components/Navbar.js +53 -80
- package/dist/features/vite/auth.js +1 -50
- package/dist/features/vite/iconGeneration.js +16 -0
- package/dist/features/vite/layoutGeneration.js +7 -3
- package/dist/features/vite/vite.d.ts +4 -2
- package/dist/features/vite/vite.js +24 -3
- package/dist/hooks/use-page-destinations.js +53 -0
- package/dist/lib/auth.js +40 -20
- package/dist/lib/preview-handoff.js +13 -0
- package/dist/lib/queries.js +12 -1
- package/dist/lib/server-auth-cookie.js +21 -0
- package/dist/lib/use-project-room.js +5 -2
- package/dist/studio-overlays.css +19 -15
- package/dist/studio.css +1 -1
- package/package.json +9 -4
- package/skills/camox/SKILL.md +38 -9
- package/skills/camox/references/block-definitions.md +107 -286
- package/skills/camox/references/cli-common.md +16 -4
- package/skills/camox/references/cli-content.md +158 -0
- package/skills/camox/references/cli-environments.md +1 -1
- package/skills/camox/references/dom-integrations.md +93 -0
- package/skills/camox/references/field-styling.md +50 -0
- package/skills/camox/references/layout-definitions.md +33 -147
- package/skills/camox/references/routed-layouts.md +71 -0
- package/skills/camoxify/SKILL.md +66 -0
- package/skills/camox/references/cli-blocks.md +0 -78
- package/skills/camox/references/cli-pages.md +0 -53
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: camoxify
|
|
3
|
+
description: Turn an existing website, screenshot, or design into an editable Camox site. Use when recreating a reference in an existing Camox project, composing its design into blocks, layouts, fields, and repeaters.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Camoxify
|
|
7
|
+
|
|
8
|
+
Work in the existing Camox project; project creation and authentication are onboarding prerequisites. Match the reference while making the result reusable and easy to edit.
|
|
9
|
+
|
|
10
|
+
## Inspect and decompose
|
|
11
|
+
|
|
12
|
+
Inspect the source URL with available browsing tools, or use the supplied screenshot/design. If the URL is inaccessible, ask for screenshots. Check multiple pages and viewport sizes when available; don't infer a whole site's structure from one crop.
|
|
13
|
+
|
|
14
|
+
For URL references, use a browser when available to explore interactive states: navigation dropdowns, hover menus, tooltips, modals, accordions, carousels, and mobile navigation. Reproduce observed behavior, not just the initial appearance. Avoid submitting forms or triggering destructive actions.
|
|
15
|
+
|
|
16
|
+
Before coding, map the reference to:
|
|
17
|
+
|
|
18
|
+
- **Layout:** the consistent shell across pages, such as navigation and footer. Editable shell content still lives in blocks, placed by the layout.
|
|
19
|
+
- **Page blocks:** independently useful sections such as a hero, feature grid, testimonials, or pricing. Reuse existing definitions where they fit. Avoid both a monolithic page block and separate blocks for every heading or card.
|
|
20
|
+
- **Fields and repeaters:** editable content within each section, grouped by meaning rather than visual position.
|
|
21
|
+
|
|
22
|
+
Read [Block Definitions](../camox/references/block-definitions.md) and, when creating or changing a shell, [Layout Definitions](../camox/references/layout-definitions.md).
|
|
23
|
+
|
|
24
|
+
## Use the existing styling stack
|
|
25
|
+
|
|
26
|
+
Strongly prefer the project's existing shadcn components and Tailwind utilities for all styling. Inspect and reuse existing components, theme tokens, and styling conventions before building new ones. Compose or extend them to match the reference.
|
|
27
|
+
|
|
28
|
+
If the reference uses another styling system, recreate its appearance and behavior with the project's existing shadcn components and Tailwind utilities; do not copy or introduce the reference's styling dependencies.
|
|
29
|
+
|
|
30
|
+
Do not install other styling libraries or rely on raw CSS, custom stylesheets, or inline styles. Express layout, spacing, typography, colors, responsive behavior, and interactive states through Tailwind and the existing shadcn components.
|
|
31
|
+
|
|
32
|
+
## Keep definitions generic
|
|
33
|
+
|
|
34
|
+
Block names, schemas, rendering, and **default content** must work on other pages. Use `feature-grid`, not `acme-homepage-features`. Defaults are neutral examples, not the reference's copy, links, assets, or item data.
|
|
35
|
+
|
|
36
|
+
Apply reference-specific content **only to instances through the CLI**, never by changing definition defaults or hardcoding it in JSX.
|
|
37
|
+
|
|
38
|
+
## Model repetition, not a fixed screenshot
|
|
39
|
+
|
|
40
|
+
Use `Type.Repeater` for every repeated content structure: lists, rows, columns, tables, carousels, navigation items, and cards. Never use `field1`, `field2`, etc., or hardcoded content arrays. Nest repeaters for structures such as footer columns containing links or table rows containing cells.
|
|
41
|
+
|
|
42
|
+
Choose bounds from real constraints, not the number of items visible in the reference. Many sibling fields are a code smell: look for repeated groups or separate sections. Model enough flexibility to add, remove, reorder, and rewrite content without code changes; don't expose every CSS value as a field.
|
|
43
|
+
|
|
44
|
+
## Use settings for constrained choices
|
|
45
|
+
|
|
46
|
+
Before adding a `content` field, ask whether the editor is writing free-form content or choosing from known options. For configuration choices such as alignment, theme, size, or variant, use `settings` with `Type.Enum`. For on/off choices such as showing a background or enabling autoplay, use `settings` with `Type.Boolean`.
|
|
47
|
+
|
|
48
|
+
Do not model these choices as `content` fields using `Type.String`, even if rendering code could interpret strings such as `"left"`, `"dark"`, or `"true"`. Editors should choose a valid option or toggle a setting, not type a magic string. Reserve `content`'s `Type.String` for genuinely free-form text, such as headings and descriptions. Enum defaults must match an option key.
|
|
49
|
+
|
|
50
|
+
## Keep formatted text in one field
|
|
51
|
+
|
|
52
|
+
Use inline formatting and `textStyle`, including highlights, instead of fields such as `headingStart`, `coloredWord`, and `headingEnd`. Editors should be able to move the emphasis by editing content alone. Read [Field styling](../camox/references/field-styling.md).
|
|
53
|
+
|
|
54
|
+
```ts
|
|
55
|
+
// Avoid: headingStart + coloredWord + headingEnd
|
|
56
|
+
// Instance content:
|
|
57
|
+
{
|
|
58
|
+
title: "Build <highlight>something great</highlight>";
|
|
59
|
+
}
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## Populate and verify
|
|
63
|
+
|
|
64
|
+
Follow the [Camox CLI workflow](../camox/SKILL.md#content-and-cli) to assign layouts, place blocks, and populate content, including shared navigation/footer content. Don't publish unless asked.
|
|
65
|
+
|
|
66
|
+
Compare the rendered site with the reference at desktop and mobile sizes. Verify that fields remain editable and that longer text and different repeater counts still work. Fix the reusable implementation, not just the one captured arrangement.
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
# Managing Blocks with the Camox CLI
|
|
2
|
-
|
|
3
|
-
Read [cli-common.md](cli-common.md) first. Replace `{{CAMOX_CMD}}` as described there and verify commands with `--help`.
|
|
4
|
-
|
|
5
|
-
Use these commands for Block instances and their Content. To change which fields or rendering a Block type provides, use the Block Definition reference instead.
|
|
6
|
-
|
|
7
|
-
## Inspect before changing
|
|
8
|
-
|
|
9
|
-
Look up the Page before creating or moving Blocks so you have its `id`, current Blocks, and any sibling ids. Describe the Block type before constructing Content:
|
|
10
|
-
|
|
11
|
-
```sh
|
|
12
|
-
{{CAMOX_CMD}} pages get --path /
|
|
13
|
-
{{CAMOX_CMD}} blocks describe --type hero
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
## Create and position a Block
|
|
17
|
-
|
|
18
|
-
```sh
|
|
19
|
-
{{CAMOX_CMD}} blocks create --page-id 25 --type hero --content '{...}'
|
|
20
|
-
{{CAMOX_CMD}} blocks create --page-id 25 --type hero --content '{...}' --position first
|
|
21
|
-
{{CAMOX_CMD}} blocks create --page-id 25 --type hero --content '{...}' --before-id 174
|
|
22
|
-
{{CAMOX_CMD}} blocks create --page-id 25 --type hero --content '{...}' --after-id 174
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
`blocks create` and `blocks move` accept the same positioning flags. Pass at most one:
|
|
26
|
-
|
|
27
|
-
| Flag | Meaning |
|
|
28
|
-
| ------------------------- | ----------------------------------------------- |
|
|
29
|
-
| `--position first` | Put the Block first. |
|
|
30
|
-
| `--position last` | Put the Block last; this is the create default. |
|
|
31
|
-
| `--after-id <ID>` | Put it immediately after a sibling Block. |
|
|
32
|
-
| `--before-id <ID>` | Put it immediately before a sibling Block. |
|
|
33
|
-
| `--after-position <KEY>` | Insert after a known fractional-index key. |
|
|
34
|
-
| `--before-position <KEY>` | Insert before a known fractional-index key. |
|
|
35
|
-
|
|
36
|
-
Prefer `--position`, `--after-id`, and `--before-id`. A move requires one positioning flag.
|
|
37
|
-
|
|
38
|
-
## Edit Block Content
|
|
39
|
-
|
|
40
|
-
Content patches merge ordinary fields, so send only fields that should change:
|
|
41
|
-
|
|
42
|
-
```sh
|
|
43
|
-
{{CAMOX_CMD}} pages get --path /pricing
|
|
44
|
-
{{CAMOX_CMD}} blocks edit --id 314 --content '{"headline": "New headline"}'
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
## Edit repeatable Content safely
|
|
48
|
-
|
|
49
|
-
A repeatable field's array is replacement-shaped: omitting an existing item deletes it and cascades to its file references, settings, and nested items. Fetch the Block, preserve every existing item with `_itemId`, and add changes only to the intended entries:
|
|
50
|
-
|
|
51
|
-
```sh
|
|
52
|
-
{{CAMOX_CMD}} blocks get --id 99
|
|
53
|
-
|
|
54
|
-
{{CAMOX_CMD}} blocks edit --id 99 --content '{
|
|
55
|
-
"items": [
|
|
56
|
-
{"_itemId": 401},
|
|
57
|
-
{"_itemId": 402, "answer": "Updated answer."},
|
|
58
|
-
{"_itemId": 403}
|
|
59
|
-
]
|
|
60
|
-
}'
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
The response's `repeatableItems` contains each item's `id`, `fieldName`, `parentItemId`, and Content. Use the same `_itemId` pattern recursively for nested repeatables. Fetch multiple Blocks together when useful:
|
|
64
|
-
|
|
65
|
-
```sh
|
|
66
|
-
{{CAMOX_CMD}} blocks get-many --id 99 --id 100 --id 101
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
`blocks get-many` returns the same bundle shape as `blocks get`, in requested-id order.
|
|
70
|
-
|
|
71
|
-
## Draft and live reads
|
|
72
|
-
|
|
73
|
-
```sh
|
|
74
|
-
{{CAMOX_CMD}} blocks get --id 314 # draft
|
|
75
|
-
{{CAMOX_CMD}} blocks get --id 314 --live # published snapshot
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
Publish or discard at the Page level; read [cli-pages.md](cli-pages.md) when the task includes review or publication.
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
# Managing Pages with the Camox CLI
|
|
2
|
-
|
|
3
|
-
Read [cli-common.md](cli-common.md) first. Replace `{{CAMOX_CMD}}` as described there and verify commands with `--help`.
|
|
4
|
-
|
|
5
|
-
Use these commands for Page paths and metadata, Layout assignments, draft review, and publishing. Use [cli-blocks.md](cli-blocks.md) when changing the ordered Blocks or Content on a Page.
|
|
6
|
-
|
|
7
|
-
## Create a Page with an existing Layout
|
|
8
|
-
|
|
9
|
-
```sh
|
|
10
|
-
{{CAMOX_CMD}} layouts list
|
|
11
|
-
{{CAMOX_CMD}} pages create --path-segment about --layout-id 39
|
|
12
|
-
```
|
|
13
|
-
|
|
14
|
-
Use `--parent-page-id <ID>` to nest the Page under another Page. Assigning an existing Layout is a CLI content operation; creating or changing a Layout Definition is a code operation covered by the Layout Definition reference.
|
|
15
|
-
|
|
16
|
-
## Review draft and live state
|
|
17
|
-
|
|
18
|
-
```sh
|
|
19
|
-
{{CAMOX_CMD}} pages get --path /pricing # draft
|
|
20
|
-
{{CAMOX_CMD}} pages get --path /pricing --live # published snapshot
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
Live reads fail when the Page or Block has never been published. `--live` is not a write target and does not publish anything.
|
|
24
|
-
|
|
25
|
-
## Publish after approval
|
|
26
|
-
|
|
27
|
-
```sh
|
|
28
|
-
{{CAMOX_CMD}} pages publish --path /pricing
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
`pages publish` accepts exactly one of `--id` or `--path`. It publishes the Page's current draft and, by default, its Layout. Publishing the Layout is a no-op when it has no pending changes. Use `--no-layout` only when the user explicitly does not want pending Layout changes published with the Page:
|
|
32
|
-
|
|
33
|
-
```sh
|
|
34
|
-
{{CAMOX_CMD}} pages publish --path /pricing --no-layout
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
Do not publish merely because a draft edit succeeded. Summarize the draft and wait for the user to ask or approve publication.
|
|
38
|
-
|
|
39
|
-
## Unpublish or discard drafts
|
|
40
|
-
|
|
41
|
-
Remove a Page from live without deleting its draft:
|
|
42
|
-
|
|
43
|
-
```sh
|
|
44
|
-
{{CAMOX_CMD}} pages unpublish --path /pricing
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
Reset a draft to its current live snapshot without changing live:
|
|
48
|
-
|
|
49
|
-
```sh
|
|
50
|
-
{{CAMOX_CMD}} pages discard-changes --path /pricing
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
Both commands accept exactly one of `--id` or `--path`. Discarding fails if the Page has never been published.
|