mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-25 14:25:02 +00:00
johndoe6345789
3ec49cfe8c
- Added `package_system.tla` to model the schema-driven package system, including multi-source loading, validation, dependency resolution, and permission filtering. - Created `package_system.cfg` for TLC model checker configuration, defining constants and invariants for bounded model checking. - Updated `metabuilder.tla` to reflect the core specification of MetaBuilder, emphasizing the package lifecycle and related specifications.
816 lines
27 KiB
JSON
816 lines
27 KiB
JSON
{
|
|
"$schema": "https://metabuilder.dev/schemas/json-script-components.schema.json",
|
|
"schemaVersion": "2.0.0",
|
|
"package": "theme_editor",
|
|
"description": "Theme customization components for colors, fonts, and CSS variables",
|
|
"components": [
|
|
{
|
|
"id": "theme_editor",
|
|
"name": "ThemeEditor",
|
|
"description": "Main theme editing interface with palette and preview",
|
|
"props": [
|
|
{
|
|
"name": "tenantId",
|
|
"type": "string",
|
|
"required": true,
|
|
"description": "Current tenant ID"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Box",
|
|
"className": "theme-editor",
|
|
"children": [
|
|
{
|
|
"type": "Paper",
|
|
"elevation": 1,
|
|
"sx": { "p": 3 },
|
|
"children": [
|
|
{
|
|
"type": "Stack",
|
|
"direction": "row",
|
|
"justifyContent": "space-between",
|
|
"alignItems": "center",
|
|
"mb": 3,
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "h5",
|
|
"children": "Theme Editor"
|
|
},
|
|
{
|
|
"type": "Stack",
|
|
"direction": "row",
|
|
"spacing": 1,
|
|
"children": [
|
|
{
|
|
"type": "Button",
|
|
"variant": "outlined",
|
|
"startIcon": {
|
|
"type": "Icon",
|
|
"name": "Upload"
|
|
},
|
|
"onClick": "{{handleImportTheme}}",
|
|
"children": "Import"
|
|
},
|
|
{
|
|
"type": "Button",
|
|
"variant": "outlined",
|
|
"startIcon": {
|
|
"type": "Icon",
|
|
"name": "Download"
|
|
},
|
|
"onClick": "{{handleExportTheme}}",
|
|
"children": "Export"
|
|
},
|
|
{
|
|
"type": "Button",
|
|
"variant": "contained",
|
|
"startIcon": {
|
|
"type": "Icon",
|
|
"name": "Save"
|
|
},
|
|
"onClick": "{{handleSaveTheme}}",
|
|
"children": "Save Theme"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Tabs",
|
|
"value": "{{activeTab}}",
|
|
"onChange": "{{handleTabChange}}",
|
|
"children": [
|
|
{
|
|
"type": "Tab",
|
|
"label": "Colors",
|
|
"value": "colors"
|
|
},
|
|
{
|
|
"type": "Tab",
|
|
"label": "Typography",
|
|
"value": "typography"
|
|
},
|
|
{
|
|
"type": "Tab",
|
|
"label": "CSS Variables",
|
|
"value": "variables"
|
|
},
|
|
{
|
|
"type": "Tab",
|
|
"label": "Preview",
|
|
"value": "preview"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Divider",
|
|
"sx": { "my": 2 }
|
|
},
|
|
{
|
|
"type": "Grid",
|
|
"container": true,
|
|
"spacing": 3,
|
|
"children": [
|
|
{
|
|
"type": "Grid",
|
|
"item": true,
|
|
"xs": 12,
|
|
"md": 8,
|
|
"children": [
|
|
{
|
|
"type": "TabPanel",
|
|
"value": "colors",
|
|
"children": [
|
|
{
|
|
"type": "ComponentRef",
|
|
"ref": "color_palette_editor"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "TabPanel",
|
|
"value": "typography",
|
|
"children": [
|
|
{
|
|
"type": "ComponentRef",
|
|
"ref": "font_selector"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "TabPanel",
|
|
"value": "variables",
|
|
"children": [
|
|
{
|
|
"type": "ComponentRef",
|
|
"ref": "css_variable_editor"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "TabPanel",
|
|
"value": "preview",
|
|
"children": [
|
|
{
|
|
"type": "ComponentRef",
|
|
"ref": "theme_preview",
|
|
"props": {
|
|
"fullWidth": true
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Grid",
|
|
"item": true,
|
|
"xs": 12,
|
|
"md": 4,
|
|
"children": [
|
|
{
|
|
"type": "Card",
|
|
"variant": "outlined",
|
|
"children": [
|
|
{
|
|
"type": "CardContent",
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "subtitle2",
|
|
"mb": 2,
|
|
"children": "Live Preview"
|
|
},
|
|
{
|
|
"type": "ComponentRef",
|
|
"ref": "theme_preview",
|
|
"props": {
|
|
"compact": true
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "color_palette_editor",
|
|
"name": "ColorPaletteEditor",
|
|
"description": "Editor for theme color palette with light/dark mode support",
|
|
"props": [],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Box",
|
|
"children": [
|
|
{
|
|
"type": "Stack",
|
|
"direction": "row",
|
|
"justifyContent": "space-between",
|
|
"alignItems": "center",
|
|
"mb": 3,
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "h6",
|
|
"children": "Color Palette"
|
|
},
|
|
{
|
|
"type": "ToggleButtonGroup",
|
|
"value": "{{colorMode}}",
|
|
"exclusive": true,
|
|
"onChange": "{{handleModeChange}}",
|
|
"size": "small",
|
|
"children": [
|
|
{
|
|
"type": "ToggleButton",
|
|
"value": "light",
|
|
"children": [
|
|
{
|
|
"type": "Icon",
|
|
"name": "LightMode"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "ToggleButton",
|
|
"value": "dark",
|
|
"children": [
|
|
{
|
|
"type": "Icon",
|
|
"name": "DarkMode"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Grid",
|
|
"container": true,
|
|
"spacing": 2,
|
|
"children": [
|
|
{
|
|
"type": "each",
|
|
"items": "{{colorGroups}}",
|
|
"as": "group",
|
|
"render": {
|
|
"type": "Grid",
|
|
"item": true,
|
|
"xs": 12,
|
|
"sm": 6,
|
|
"children": [
|
|
{
|
|
"type": "Card",
|
|
"variant": "outlined",
|
|
"children": [
|
|
{
|
|
"type": "CardContent",
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "subtitle2",
|
|
"mb": 2,
|
|
"children": "{{group.name}}"
|
|
},
|
|
{
|
|
"type": "Stack",
|
|
"spacing": 2,
|
|
"children": [
|
|
{
|
|
"type": "each",
|
|
"items": "{{group.colors}}",
|
|
"as": "color",
|
|
"render": {
|
|
"type": "ComponentRef",
|
|
"ref": "color_picker",
|
|
"props": {
|
|
"label": "{{color.label}}",
|
|
"value": "{{color.value}}",
|
|
"onChange": "{{(val) => handleColorChange(color.key, val)}}"
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "color_picker",
|
|
"name": "ColorPicker",
|
|
"description": "Individual color picker with hex input",
|
|
"props": [
|
|
{
|
|
"name": "label",
|
|
"type": "string",
|
|
"required": true
|
|
},
|
|
{
|
|
"name": "value",
|
|
"type": "string",
|
|
"required": true
|
|
},
|
|
{
|
|
"name": "onChange",
|
|
"type": "function",
|
|
"required": true
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Stack",
|
|
"direction": "row",
|
|
"spacing": 2,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "Box",
|
|
"sx": {
|
|
"width": 40,
|
|
"height": 40,
|
|
"borderRadius": 1,
|
|
"backgroundColor": "{{value}}",
|
|
"border": "1px solid",
|
|
"borderColor": "divider",
|
|
"cursor": "pointer"
|
|
},
|
|
"onClick": "{{handleOpenPicker}}"
|
|
},
|
|
{
|
|
"type": "Stack",
|
|
"sx": { "flexGrow": 1 },
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "body2",
|
|
"children": "{{label}}"
|
|
},
|
|
{
|
|
"type": "TextField",
|
|
"value": "{{value}}",
|
|
"onChange": "{{(e) => onChange(e.target.value)}}",
|
|
"size": "small",
|
|
"sx": { "maxWidth": 120 },
|
|
"inputProps": {
|
|
"style": { "fontFamily": "monospace" }
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "font_selector",
|
|
"name": "FontSelector",
|
|
"description": "Typography configuration with font family selection",
|
|
"props": [],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Box",
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "h6",
|
|
"mb": 3,
|
|
"children": "Typography"
|
|
},
|
|
{
|
|
"type": "Stack",
|
|
"spacing": 3,
|
|
"children": [
|
|
{
|
|
"type": "FormControl",
|
|
"fullWidth": true,
|
|
"children": [
|
|
{
|
|
"type": "InputLabel",
|
|
"children": "Body Font Family"
|
|
},
|
|
{
|
|
"type": "Select",
|
|
"value": "{{fonts.body}}",
|
|
"onChange": "{{handleBodyFontChange}}",
|
|
"label": "Body Font Family",
|
|
"children": [
|
|
{
|
|
"type": "MenuItem",
|
|
"value": "IBM Plex Sans",
|
|
"children": "IBM Plex Sans"
|
|
},
|
|
{
|
|
"type": "MenuItem",
|
|
"value": "Inter",
|
|
"children": "Inter"
|
|
},
|
|
{
|
|
"type": "MenuItem",
|
|
"value": "Roboto",
|
|
"children": "Roboto"
|
|
},
|
|
{
|
|
"type": "MenuItem",
|
|
"value": "Open Sans",
|
|
"children": "Open Sans"
|
|
},
|
|
{
|
|
"type": "MenuItem",
|
|
"value": "system-ui",
|
|
"children": "System Default"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "FormControl",
|
|
"fullWidth": true,
|
|
"children": [
|
|
{
|
|
"type": "InputLabel",
|
|
"children": "Heading Font Family"
|
|
},
|
|
{
|
|
"type": "Select",
|
|
"value": "{{fonts.heading}}",
|
|
"onChange": "{{handleHeadingFontChange}}",
|
|
"label": "Heading Font Family",
|
|
"children": [
|
|
{
|
|
"type": "MenuItem",
|
|
"value": "Space Grotesk",
|
|
"children": "Space Grotesk"
|
|
},
|
|
{
|
|
"type": "MenuItem",
|
|
"value": "IBM Plex Sans",
|
|
"children": "IBM Plex Sans"
|
|
},
|
|
{
|
|
"type": "MenuItem",
|
|
"value": "Inter",
|
|
"children": "Inter"
|
|
},
|
|
{
|
|
"type": "MenuItem",
|
|
"value": "Montserrat",
|
|
"children": "Montserrat"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "FormControl",
|
|
"fullWidth": true,
|
|
"children": [
|
|
{
|
|
"type": "InputLabel",
|
|
"children": "Code Font Family"
|
|
},
|
|
{
|
|
"type": "Select",
|
|
"value": "{{fonts.code}}",
|
|
"onChange": "{{handleCodeFontChange}}",
|
|
"label": "Code Font Family",
|
|
"children": [
|
|
{
|
|
"type": "MenuItem",
|
|
"value": "JetBrains Mono",
|
|
"children": "JetBrains Mono"
|
|
},
|
|
{
|
|
"type": "MenuItem",
|
|
"value": "Fira Code",
|
|
"children": "Fira Code"
|
|
},
|
|
{
|
|
"type": "MenuItem",
|
|
"value": "Source Code Pro",
|
|
"children": "Source Code Pro"
|
|
},
|
|
{
|
|
"type": "MenuItem",
|
|
"value": "monospace",
|
|
"children": "System Monospace"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Divider"
|
|
},
|
|
{
|
|
"type": "Typography",
|
|
"variant": "subtitle2",
|
|
"children": "Border Radius"
|
|
},
|
|
{
|
|
"type": "Slider",
|
|
"value": "{{borderRadius}}",
|
|
"onChange": "{{handleBorderRadiusChange}}",
|
|
"min": 0,
|
|
"max": 24,
|
|
"step": 2,
|
|
"marks": true,
|
|
"valueLabelDisplay": "auto"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "css_variable_editor",
|
|
"name": "CSSVariableEditor",
|
|
"description": "Editor for custom CSS variables",
|
|
"props": [],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Box",
|
|
"children": [
|
|
{
|
|
"type": "Stack",
|
|
"direction": "row",
|
|
"justifyContent": "space-between",
|
|
"alignItems": "center",
|
|
"mb": 3,
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "h6",
|
|
"children": "CSS Variables"
|
|
},
|
|
{
|
|
"type": "Button",
|
|
"variant": "outlined",
|
|
"size": "small",
|
|
"startIcon": {
|
|
"type": "Icon",
|
|
"name": "Add"
|
|
},
|
|
"onClick": "{{handleAddVariable}}",
|
|
"children": "Add Variable"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "TableContainer",
|
|
"component": "Paper",
|
|
"variant": "outlined",
|
|
"children": [
|
|
{
|
|
"type": "Table",
|
|
"size": "small",
|
|
"children": [
|
|
{
|
|
"type": "TableHead",
|
|
"children": [
|
|
{
|
|
"type": "TableRow",
|
|
"children": [
|
|
{
|
|
"type": "TableCell",
|
|
"children": "Variable Name"
|
|
},
|
|
{
|
|
"type": "TableCell",
|
|
"children": "Value"
|
|
},
|
|
{
|
|
"type": "TableCell",
|
|
"align": "right",
|
|
"children": "Actions"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "TableBody",
|
|
"children": [
|
|
{
|
|
"type": "each",
|
|
"items": "{{cssVariables}}",
|
|
"as": "variable",
|
|
"render": {
|
|
"type": "TableRow",
|
|
"children": [
|
|
{
|
|
"type": "TableCell",
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"fontFamily": "monospace",
|
|
"variant": "body2",
|
|
"children": "--{{variable.name}}"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "TableCell",
|
|
"children": [
|
|
{
|
|
"type": "TextField",
|
|
"value": "{{variable.value}}",
|
|
"onChange": "{{(e) => handleVariableChange(variable.name, e.target.value)}}",
|
|
"size": "small",
|
|
"sx": { "maxWidth": 200 }
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "TableCell",
|
|
"align": "right",
|
|
"children": [
|
|
{
|
|
"type": "IconButton",
|
|
"size": "small",
|
|
"color": "error",
|
|
"onClick": "{{() => handleRemoveVariable(variable.name)}}",
|
|
"children": [
|
|
{
|
|
"type": "Icon",
|
|
"name": "Delete",
|
|
"fontSize": "small"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "theme_preview",
|
|
"name": "ThemePreview",
|
|
"description": "Live preview of theme changes",
|
|
"props": [
|
|
{
|
|
"name": "compact",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": false
|
|
},
|
|
{
|
|
"name": "fullWidth",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": false
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Box",
|
|
"className": "theme-preview",
|
|
"children": [
|
|
{
|
|
"type": "Stack",
|
|
"spacing": 2,
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "h6",
|
|
"children": "Preview Heading"
|
|
},
|
|
{
|
|
"type": "Typography",
|
|
"variant": "body1",
|
|
"children": "This is body text to preview your theme settings."
|
|
},
|
|
{
|
|
"type": "Typography",
|
|
"variant": "body2",
|
|
"color": "textSecondary",
|
|
"children": "Secondary text for less important content."
|
|
},
|
|
{
|
|
"type": "Stack",
|
|
"direction": "row",
|
|
"spacing": 1,
|
|
"children": [
|
|
{
|
|
"type": "Button",
|
|
"variant": "contained",
|
|
"size": "small",
|
|
"children": "Primary"
|
|
},
|
|
{
|
|
"type": "Button",
|
|
"variant": "outlined",
|
|
"size": "small",
|
|
"children": "Outlined"
|
|
},
|
|
{
|
|
"type": "Button",
|
|
"variant": "text",
|
|
"size": "small",
|
|
"children": "Text"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Stack",
|
|
"direction": "row",
|
|
"spacing": 1,
|
|
"children": [
|
|
{
|
|
"type": "Chip",
|
|
"label": "Default",
|
|
"size": "small"
|
|
},
|
|
{
|
|
"type": "Chip",
|
|
"label": "Primary",
|
|
"color": "primary",
|
|
"size": "small"
|
|
},
|
|
{
|
|
"type": "Chip",
|
|
"label": "Success",
|
|
"color": "success",
|
|
"size": "small"
|
|
},
|
|
{
|
|
"type": "Chip",
|
|
"label": "Error",
|
|
"color": "error",
|
|
"size": "small"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "conditional",
|
|
"condition": "{{!compact}}",
|
|
"then": {
|
|
"type": "Card",
|
|
"variant": "outlined",
|
|
"children": [
|
|
{
|
|
"type": "CardContent",
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "subtitle2",
|
|
"children": "Card Component"
|
|
},
|
|
{
|
|
"type": "Typography",
|
|
"variant": "body2",
|
|
"children": "This is a preview card."
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|