@cere/cere-design-system 0.0.6 → 0.0.9

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 (7) hide show
  1. package/dist/index.d.mts +11 -20
  2. package/dist/index.d.ts +11 -20
  3. package/dist/index.js +108 -32
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +110 -34
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +3 -3
package/dist/index.d.mts CHANGED
@@ -4,7 +4,7 @@ import { ButtonProps as ButtonProps$1 } from '@mui/material/Button';
4
4
  import { IconButtonProps as IconButtonProps$1 } from '@mui/material/IconButton';
5
5
  import { LoadingButtonProps as LoadingButtonProps$1 } from '@mui/lab';
6
6
  import { ButtonGroupProps as ButtonGroupProps$1, SelectProps, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1, StepperProps as StepperProps$1, StepProps as StepProps$1, StepLabelProps as StepLabelProps$1, StepContentProps as StepContentProps$1, StepButtonProps as StepButtonProps$1, MenuProps as MenuProps$1, DialogProps as DialogProps$1, BoxProps, ListProps as ListProps$1, ListItemProps as ListItemProps$1, TableProps as TableProps$1, AccordionProps as AccordionProps$1, AppBarProps as AppBarProps$1, CollapseProps as CollapseProps$1, CircularProgressProps as CircularProgressProps$1 } from '@mui/material';
7
- export { Box, BoxProps, Container, ContainerProps, FormControl, FormControlLabel, FormControlLabelProps, FormControlProps, FormHelperText, FormHelperTextProps, FormLabel, FormLabelProps, Grid, Grid2Props, GridProps, InputAdornment, InputAdornmentProps, InputLabel, InputLabelProps, ListItemIcon, ListItemSecondaryAction, ListItemText, Stack, StackProps, Toolbar, ToolbarProps, Typography, TypographyProps } from '@mui/material';
7
+ export { Box, BoxProps, Container, ContainerProps, FormControl, FormControlLabel, FormControlLabelProps, FormControlProps, FormHelperText, FormHelperTextProps, FormLabel, FormLabelProps, Grid2 as Grid, Grid2Props as GridProps, InputAdornment, InputAdornmentProps, InputLabel, InputLabelProps, ListItemIcon, ListItemSecondaryAction, ListItemText, Stack, StackProps, Toolbar, ToolbarProps, Typography, TypographyProps } from '@mui/material';
8
8
  import { TextFieldProps as TextFieldProps$1 } from '@mui/material/TextField';
9
9
  import { SwitchProps as SwitchProps$1 } from '@mui/material/Switch';
10
10
  import { CheckboxProps as CheckboxProps$1 } from '@mui/material/Checkbox';
@@ -203,11 +203,9 @@ interface DropdownProps extends Omit<SelectProps, 'size'> {
203
203
  }
204
204
  declare const Dropdown: React.FC<DropdownProps>;
205
205
 
206
- interface ToggleButtonProps extends ToggleButtonProps$1 {
207
- }
206
+ type ToggleButtonProps = ToggleButtonProps$1;
208
207
  declare const ToggleButton: React.FC<ToggleButtonProps>;
209
- interface ToggleButtonGroupProps extends ToggleButtonGroupProps$1 {
210
- }
208
+ type ToggleButtonGroupProps = ToggleButtonGroupProps$1;
211
209
  declare const ToggleButtonGroup: React.FC<ToggleButtonGroupProps>;
212
210
 
213
211
  interface SwitchProps extends SwitchProps$1 {
@@ -300,7 +298,7 @@ interface ServiceSelectorButtonProps {
300
298
  /**
301
299
  * Custom styles
302
300
  */
303
- sx?: any;
301
+ sx?: never;
304
302
  /**
305
303
  * Panel width
306
304
  * @default 350
@@ -359,8 +357,7 @@ interface WorkspaceSelectorButtonProps {
359
357
  }
360
358
  declare const WorkspaceSelectorButton: React.FC<WorkspaceSelectorButtonProps>;
361
359
 
362
- interface StepperProps extends StepperProps$1 {
363
- }
360
+ type StepperProps = StepperProps$1;
364
361
  /**
365
362
  * Stepper component - displays progress through a sequence of steps
366
363
  *
@@ -377,26 +374,22 @@ interface StepperProps extends StepperProps$1 {
377
374
  * ```
378
375
  */
379
376
  declare const Stepper: React.FC<StepperProps>;
380
- interface StepProps extends StepProps$1 {
381
- }
377
+ type StepProps = StepProps$1;
382
378
  /**
383
379
  * Step component - represents a single step in a Stepper
384
380
  */
385
381
  declare const Step: React.FC<StepProps>;
386
- interface StepLabelProps extends StepLabelProps$1 {
387
- }
382
+ type StepLabelProps = StepLabelProps$1;
388
383
  /**
389
384
  * StepLabel component - label for a Step
390
385
  */
391
386
  declare const StepLabel: React.FC<StepLabelProps>;
392
- interface StepContentProps extends StepContentProps$1 {
393
- }
387
+ type StepContentProps = StepContentProps$1;
394
388
  /**
395
389
  * StepContent component - optional content that appears below a StepLabel
396
390
  */
397
391
  declare const StepContent: React.FC<StepContentProps>;
398
- interface StepButtonProps extends StepButtonProps$1 {
399
- }
392
+ type StepButtonProps = StepButtonProps$1;
400
393
  /**
401
394
  * StepButton component - makes a Step clickable
402
395
  */
@@ -415,8 +408,7 @@ interface ChipProps extends Omit<ChipProps$1, 'color' | 'variant'> {
415
408
  }
416
409
  declare const Chip: React.FC<ChipProps>;
417
410
 
418
- interface TooltipProps extends TooltipProps$1 {
419
- }
411
+ type TooltipProps = TooltipProps$1;
420
412
  declare const Tooltip: React.FC<TooltipProps>;
421
413
 
422
414
  type ProgressVariant = 'linear' | 'circular';
@@ -596,8 +588,7 @@ declare const CardContent: React.FC<CardContentProps>;
596
588
  declare const CardHeader: React.FC<CardHeaderProps>;
597
589
  declare const CardActions: React.FC<CardActionsProps>;
598
590
 
599
- interface ListProps extends ListProps$1 {
600
- }
591
+ type ListProps = ListProps$1;
601
592
  declare const List: React.FC<ListProps>;
602
593
  interface ListItemProps extends ListItemProps$1 {
603
594
  primary?: React.ReactNode;
package/dist/index.d.ts CHANGED
@@ -4,7 +4,7 @@ import { ButtonProps as ButtonProps$1 } from '@mui/material/Button';
4
4
  import { IconButtonProps as IconButtonProps$1 } from '@mui/material/IconButton';
5
5
  import { LoadingButtonProps as LoadingButtonProps$1 } from '@mui/lab';
6
6
  import { ButtonGroupProps as ButtonGroupProps$1, SelectProps, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1, StepperProps as StepperProps$1, StepProps as StepProps$1, StepLabelProps as StepLabelProps$1, StepContentProps as StepContentProps$1, StepButtonProps as StepButtonProps$1, MenuProps as MenuProps$1, DialogProps as DialogProps$1, BoxProps, ListProps as ListProps$1, ListItemProps as ListItemProps$1, TableProps as TableProps$1, AccordionProps as AccordionProps$1, AppBarProps as AppBarProps$1, CollapseProps as CollapseProps$1, CircularProgressProps as CircularProgressProps$1 } from '@mui/material';
7
- export { Box, BoxProps, Container, ContainerProps, FormControl, FormControlLabel, FormControlLabelProps, FormControlProps, FormHelperText, FormHelperTextProps, FormLabel, FormLabelProps, Grid, Grid2Props, GridProps, InputAdornment, InputAdornmentProps, InputLabel, InputLabelProps, ListItemIcon, ListItemSecondaryAction, ListItemText, Stack, StackProps, Toolbar, ToolbarProps, Typography, TypographyProps } from '@mui/material';
7
+ export { Box, BoxProps, Container, ContainerProps, FormControl, FormControlLabel, FormControlLabelProps, FormControlProps, FormHelperText, FormHelperTextProps, FormLabel, FormLabelProps, Grid2 as Grid, Grid2Props as GridProps, InputAdornment, InputAdornmentProps, InputLabel, InputLabelProps, ListItemIcon, ListItemSecondaryAction, ListItemText, Stack, StackProps, Toolbar, ToolbarProps, Typography, TypographyProps } from '@mui/material';
8
8
  import { TextFieldProps as TextFieldProps$1 } from '@mui/material/TextField';
9
9
  import { SwitchProps as SwitchProps$1 } from '@mui/material/Switch';
10
10
  import { CheckboxProps as CheckboxProps$1 } from '@mui/material/Checkbox';
@@ -203,11 +203,9 @@ interface DropdownProps extends Omit<SelectProps, 'size'> {
203
203
  }
204
204
  declare const Dropdown: React.FC<DropdownProps>;
205
205
 
206
- interface ToggleButtonProps extends ToggleButtonProps$1 {
207
- }
206
+ type ToggleButtonProps = ToggleButtonProps$1;
208
207
  declare const ToggleButton: React.FC<ToggleButtonProps>;
209
- interface ToggleButtonGroupProps extends ToggleButtonGroupProps$1 {
210
- }
208
+ type ToggleButtonGroupProps = ToggleButtonGroupProps$1;
211
209
  declare const ToggleButtonGroup: React.FC<ToggleButtonGroupProps>;
212
210
 
213
211
  interface SwitchProps extends SwitchProps$1 {
@@ -300,7 +298,7 @@ interface ServiceSelectorButtonProps {
300
298
  /**
301
299
  * Custom styles
302
300
  */
303
- sx?: any;
301
+ sx?: never;
304
302
  /**
305
303
  * Panel width
306
304
  * @default 350
@@ -359,8 +357,7 @@ interface WorkspaceSelectorButtonProps {
359
357
  }
360
358
  declare const WorkspaceSelectorButton: React.FC<WorkspaceSelectorButtonProps>;
361
359
 
362
- interface StepperProps extends StepperProps$1 {
363
- }
360
+ type StepperProps = StepperProps$1;
364
361
  /**
365
362
  * Stepper component - displays progress through a sequence of steps
366
363
  *
@@ -377,26 +374,22 @@ interface StepperProps extends StepperProps$1 {
377
374
  * ```
378
375
  */
379
376
  declare const Stepper: React.FC<StepperProps>;
380
- interface StepProps extends StepProps$1 {
381
- }
377
+ type StepProps = StepProps$1;
382
378
  /**
383
379
  * Step component - represents a single step in a Stepper
384
380
  */
385
381
  declare const Step: React.FC<StepProps>;
386
- interface StepLabelProps extends StepLabelProps$1 {
387
- }
382
+ type StepLabelProps = StepLabelProps$1;
388
383
  /**
389
384
  * StepLabel component - label for a Step
390
385
  */
391
386
  declare const StepLabel: React.FC<StepLabelProps>;
392
- interface StepContentProps extends StepContentProps$1 {
393
- }
387
+ type StepContentProps = StepContentProps$1;
394
388
  /**
395
389
  * StepContent component - optional content that appears below a StepLabel
396
390
  */
397
391
  declare const StepContent: React.FC<StepContentProps>;
398
- interface StepButtonProps extends StepButtonProps$1 {
399
- }
392
+ type StepButtonProps = StepButtonProps$1;
400
393
  /**
401
394
  * StepButton component - makes a Step clickable
402
395
  */
@@ -415,8 +408,7 @@ interface ChipProps extends Omit<ChipProps$1, 'color' | 'variant'> {
415
408
  }
416
409
  declare const Chip: React.FC<ChipProps>;
417
410
 
418
- interface TooltipProps extends TooltipProps$1 {
419
- }
411
+ type TooltipProps = TooltipProps$1;
420
412
  declare const Tooltip: React.FC<TooltipProps>;
421
413
 
422
414
  type ProgressVariant = 'linear' | 'circular';
@@ -596,8 +588,7 @@ declare const CardContent: React.FC<CardContentProps>;
596
588
  declare const CardHeader: React.FC<CardHeaderProps>;
597
589
  declare const CardActions: React.FC<CardActionsProps>;
598
590
 
599
- interface ListProps extends ListProps$1 {
600
- }
591
+ type ListProps = ListProps$1;
601
592
  declare const List: React.FC<ListProps>;
602
593
  interface ListItemProps extends ListItemProps$1 {
603
594
  primary?: React.ReactNode;
package/dist/index.js CHANGED
@@ -64,7 +64,7 @@ __export(index_exports, {
64
64
  FormControlLabel: () => import_material2.FormControlLabel,
65
65
  FormHelperText: () => import_material2.FormHelperText,
66
66
  FormLabel: () => import_material2.FormLabel,
67
- Grid: () => import_material17.Grid,
67
+ Grid: () => import_material17.Grid2,
68
68
  IconButton: () => IconButton,
69
69
  InputAdornment: () => import_material2.InputAdornment,
70
70
  InputLabel: () => import_material2.InputLabel,
@@ -2467,7 +2467,7 @@ var ListItem3 = ({
2467
2467
  }
2468
2468
  ),
2469
2469
  children,
2470
- action && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material15.ListItemSecondaryAction, { children: action })
2470
+ action && action
2471
2471
  ] });
2472
2472
  };
2473
2473
 
@@ -3018,6 +3018,9 @@ var import_react7 = __toESM(require("@monaco-editor/react"));
3018
3018
  var import_material31 = require("@mui/material");
3019
3019
  var import_Fullscreen = __toESM(require("@mui/icons-material/Fullscreen"));
3020
3020
  var import_FullscreenExit = __toESM(require("@mui/icons-material/FullscreenExit"));
3021
+ var import_ErrorOutline = __toESM(require("@mui/icons-material/ErrorOutline"));
3022
+ var import_ExpandMore2 = __toESM(require("@mui/icons-material/ExpandMore"));
3023
+ var import_ExpandLess = __toESM(require("@mui/icons-material/ExpandLess"));
3021
3024
  var import_jsx_runtime44 = require("react/jsx-runtime");
3022
3025
  var configureTypeScript = (monaco) => {
3023
3026
  monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
@@ -3069,6 +3072,16 @@ var CodeEditor = ({
3069
3072
  const [actualHeight, setActualHeight] = (0, import_react6.useState)(
3070
3073
  typeof height === "number" ? `${height}px` : height
3071
3074
  );
3075
+ const [showProblems, setShowProblems] = (0, import_react6.useState)(false);
3076
+ const [hasUserToggledProblems, setHasUserToggledProblems] = (0, import_react6.useState)(false);
3077
+ (0, import_react6.useEffect)(() => {
3078
+ if (hasUserToggledProblems) return;
3079
+ if (validationErrors.length > 0) {
3080
+ setShowProblems(true);
3081
+ } else {
3082
+ setShowProblems(false);
3083
+ }
3084
+ }, [validationErrors, hasUserToggledProblems]);
3072
3085
  const internalEditorRef = (0, import_react6.useRef)(null);
3073
3086
  const internalMonacoRef = (0, import_react6.useRef)(null);
3074
3087
  const finalEditorRef = editorRef || internalEditorRef;
@@ -3087,6 +3100,21 @@ var CodeEditor = ({
3087
3100
  onFullscreenChange(newFullscreenState);
3088
3101
  }
3089
3102
  }, [isFullscreen, onFullscreenChange]);
3103
+ const gotoMarker = (0, import_react6.useCallback)(
3104
+ (marker) => {
3105
+ const ed = finalEditorRef?.current;
3106
+ if (!ed) return;
3107
+ const position = { lineNumber: marker.startLineNumber, column: marker.startColumn || 1 };
3108
+ try {
3109
+ ed.revealPositionInCenter(position);
3110
+ ed.setPosition(position);
3111
+ ed.focus();
3112
+ } catch (e) {
3113
+ console.error("CodeEditor: Failed to navigate to marker", e);
3114
+ }
3115
+ },
3116
+ [finalEditorRef]
3117
+ );
3090
3118
  (0, import_react6.useEffect)(() => {
3091
3119
  if (!isFullscreen) return;
3092
3120
  function escapeHandler(event) {
@@ -3269,14 +3297,16 @@ var CodeEditor = ({
3269
3297
  sx: {
3270
3298
  flex: 1,
3271
3299
  display: "flex",
3300
+ flexDirection: "column",
3272
3301
  overflow: "hidden",
3273
3302
  minHeight: editorMinHeight,
3274
- position: "relative"
3303
+ position: "relative",
3304
+ height: isFullscreen ? "100%" : actualHeight
3275
3305
  },
3276
3306
  children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
3277
3307
  import_react7.default,
3278
3308
  {
3279
- height: actualHeight,
3309
+ height: "100%",
3280
3310
  defaultLanguage: language,
3281
3311
  defaultValue: value,
3282
3312
  value: tsCode,
@@ -3293,38 +3323,84 @@ var CodeEditor = ({
3293
3323
  }
3294
3324
  ),
3295
3325
  validationErrors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
3296
- import_material31.Alert,
3326
+ import_material31.Box,
3297
3327
  {
3298
- severity: "error",
3299
3328
  sx: {
3300
- position: "absolute",
3301
- bottom: 8,
3302
- left: 8,
3303
- right: 8,
3304
- zIndex: 20,
3305
- boxShadow: 3,
3306
- border: "1px solid",
3307
- borderColor: "error.main",
3308
- borderRadius: 1,
3309
- maxHeight: "150px",
3310
- overflow: "auto"
3329
+ borderTop: 1,
3330
+ borderColor: "divider",
3331
+ bgcolor: "background.default",
3332
+ display: "flex",
3333
+ flexDirection: "column",
3334
+ maxHeight: showProblems ? 180 : 40,
3335
+ minHeight: 40,
3336
+ transition: "max-height 0.2s ease"
3311
3337
  },
3312
3338
  children: [
3313
- /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material31.Box, { sx: { mb: 1, fontWeight: 600 }, children: "Please fix the following errors:" }),
3314
- /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_material31.Box, { component: "ul", sx: { m: 0, pl: 2 }, children: [
3315
- validationErrors.slice(0, 3).map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_material31.Box, { component: "li", sx: { fontSize: "0.85rem" }, children: [
3316
- "Line ",
3317
- error.startLineNumber,
3318
- ": ",
3319
- error.message
3320
- ] }, index)),
3321
- validationErrors.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_material31.Box, { component: "li", sx: { fontSize: "0.85rem" }, children: [
3322
- validationErrors.length - 3,
3323
- " more error",
3324
- validationErrors.length - 3 > 1 ? "s" : "",
3325
- "..."
3326
- ] })
3327
- ] })
3339
+ /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
3340
+ import_material31.Box,
3341
+ {
3342
+ sx: {
3343
+ display: "flex",
3344
+ alignItems: "center",
3345
+ px: 1,
3346
+ py: 0.5,
3347
+ gap: 1,
3348
+ borderBottom: showProblems ? "1px solid" : "none",
3349
+ borderColor: "divider",
3350
+ fontSize: "0.875rem",
3351
+ color: "text.secondary"
3352
+ },
3353
+ children: [
3354
+ /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_ErrorOutline.default, { color: "error", fontSize: "small" }),
3355
+ /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material31.Box, { sx: { fontWeight: 600, color: "text.primary" }, children: "Problems" }),
3356
+ /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_material31.Box, { sx: { ml: 1 }, children: [
3357
+ validationErrors.length,
3358
+ " error",
3359
+ validationErrors.length > 1 ? "s" : ""
3360
+ ] }),
3361
+ /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material31.Box, { sx: { flex: 1 } }),
3362
+ /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
3363
+ import_material31.IconButton,
3364
+ {
3365
+ size: "small",
3366
+ "aria-label": "Toggle problems panel",
3367
+ onClick: () => {
3368
+ setHasUserToggledProblems(true);
3369
+ setShowProblems((s) => !s);
3370
+ },
3371
+ children: showProblems ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_ExpandMore2.default, { fontSize: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_ExpandLess.default, { fontSize: "small" })
3372
+ }
3373
+ )
3374
+ ]
3375
+ }
3376
+ ),
3377
+ showProblems && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material31.Box, { sx: { overflow: "auto" }, children: validationErrors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
3378
+ import_material31.Box,
3379
+ {
3380
+ onClick: () => gotoMarker(error),
3381
+ sx: {
3382
+ display: "flex",
3383
+ alignItems: "center",
3384
+ px: 1.5,
3385
+ py: 0.75,
3386
+ gap: 1,
3387
+ cursor: "pointer",
3388
+ "&:hover": { bgcolor: "action.hover" },
3389
+ borderBottom: "1px dashed",
3390
+ borderColor: "divider",
3391
+ fontSize: "0.85rem"
3392
+ },
3393
+ children: [
3394
+ /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_ErrorOutline.default, { color: "error", sx: { fontSize: 18 } }),
3395
+ /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_material31.Box, { sx: { color: "text.secondary", width: 64 }, children: [
3396
+ "Line ",
3397
+ error.startLineNumber
3398
+ ] }),
3399
+ /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material31.Box, { sx: { color: "text.primary", flex: 1, minWidth: 0 }, children: error.message })
3400
+ ]
3401
+ },
3402
+ `${error.startLineNumber}-${error.startColumn}-${index}`
3403
+ )) })
3328
3404
  ]
3329
3405
  }
3330
3406
  )