@kemu-io/hs-react 0.2.39 → 0.3.1

package/mjs/components/SettingsBar.js

@@ -0,0 +1,8 @@
+import{jsx as _jsx}from"react/jsx-runtime";import styled from"@emotion/styled";import IconButton from"@mui/material/IconButton";import SettingsIcon from"@mui/icons-material/Settings";const SettingsBarContainer=styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  justify-content: flex-end;
+  padding: 5px;
+`,SettingsBar=({iconColor:t="white",onSettingsClick:i,children:n})=>_jsx(SettingsBarContainer,{iconColor:t,children:n||(i?_jsx(IconButton,{"aria-label":"settings",onClick:i,children:_jsx(SettingsIcon,{style:{color:t},sx:{fontSize:10}})}):null)});export default SettingsBar;

package/mjs/components/SettingsDialog.d.ts

@@ -0,0 +1,81 @@
+import { ReactNode } from 'react';
+
+/**
+ * A resizable and expandable settings dialog with customizable buttons and styling.
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <SettingsDialog
+ *   open={open}
+ *   onClose={() => setOpen(false)}
+ *   onSave={() => {
+ *     // Save settings
+ *     setOpen(false);
+ *   }}
+ * >
+ *   <FieldWithLabel label="Setting 1">
+ *     <input type="text" />
+ *   </FieldWithLabel>
+ * </SettingsDialog>
+ * ```
+ *
+ * @example
+ * Disable resizing and expansion:
+ * ```tsx
+ * <SettingsDialog
+ *   open={open}
+ *   onClose={() => setOpen(false)}
+ *   onSave={handleSave}
+ *   disableResizing={true}
+ *   disableExpansion={true}
+ * >
+ *   {children}
+ * </SettingsDialog>
+ * ```
+ *
+ * @example
+ * Custom button text:
+ * ```tsx
+ * <SettingsDialog
+ *   open={open}
+ *   onClose={handleClose}
+ *   onSave={handleSave}
+ *   cancelButtonText="Discard"
+ *   saveButtonText="Apply Changes"
+ * >
+ *   {children}
+ * </SettingsDialog>
+ * ```
+ */
+export interface SettingsDialogProps {
+	title?: string;
+	open: boolean;
+	noHeader?: boolean;
+	onClose: () => void;
+	onSave: () => void;
+	children: ReactNode;
+	serviceOnline?: boolean;
+	saveDisabled?: boolean;
+	minHeight?: number;
+	minWidth?: number;
+	maxWidth?: number;
+	maxHeight?: number;
+	cancelButtonText?: string;
+	saveButtonText?: string;
+	disableResizing?: boolean;
+	disableExpansion?: boolean;
+	dialogClassName?: string;
+	resizableClassName?: string;
+	dialogContentClassName?: string;
+	dialogActionsClassName?: string;
+}
+declare const SettingsDialog: ({ title, open, noHeader, onClose, onSave, children, serviceOnline, saveDisabled, minHeight, minWidth, maxWidth, maxHeight, cancelButtonText, saveButtonText, disableResizing, disableExpansion, dialogClassName, resizableClassName, dialogContentClassName, dialogActionsClassName, }: SettingsDialogProps) => import("react/jsx-runtime.js").JSX.Element;
+
+export {
+	SettingsDialog as default,
+};
+
+export {};

package/mjs/components/SettingsDialog.js

@@ -0,0 +1,74 @@
+import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{useCallback,useState}from"react";import styled from"@emotion/styled";import Dialog from"@mui/material/Dialog";import DialogContent from"@mui/material/DialogContent";import DialogActions from"@mui/material/DialogActions";import IconButton from"@mui/material/IconButton";import{Resizable}from"re-resizable";import Fullscreen from"@mui/icons-material/Fullscreen";import FullscreenExit from"@mui/icons-material/FullscreenExit";import KemuThemeWrapper from"./KemuThemeWrapper.js";import KemuPrimaryButton from"./KemuPrimaryButton.js";import KemuLightButton from"./KemuLightButton.js";const ScrollableContainer=styled.div`
+  height: 100%;
+  overflow-y: auto;
+  padding: 0px 25px;
+  // Add extra pixels for the dialog actions
+  padding-bottom: 54px;
+`,StyledDialogContent=styled(DialogContent)`
+  height: 100%;
+  overflow-y: unset;
+  padding: unset;
+  padding-top: 20px;
+`,Header=styled.div`
+  line-height: 30px;
+  align-self: center;
+  width: 100%;
+  padding: 10px 25px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  margin-bottom: 0px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
+`,Title=styled.h4`
+  font-size: 16px;
+  line-height: 28px;
+  padding-right: 10px;
+  margin-bottom: 0;
+  font-weight: 700;
+  font-family: 'Nunito', 'Segoe UI', arial;
+  color: #6c757d;
+`,ResizableDialog=styled(Dialog)`
+  & .MuiDialog-paper {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-width: unset;
+    overflow: hidden;
+
+    /* Kemu modal style */
+    border-top-color: var(--kemu-color-primary);
+    border-top-style: solid;
+    border-top-width: 3px;
+    box-shadow: 0 4px 12px 0px rgb(0 0 0 / 28%);
+    border-radius: 10px;
+    background-clip: border-box;
+  }
+
+  & .MuiModal-backdrop {
+    background-color: rgba(0, 0, 0, 0.35);
+  }
+`,StyledDialogActions=styled(DialogActions)`
+  position: absolute;
+  margin-top: 20px;
+  width: 100%;
+  padding: 0 25px 20px;
+  bottom: 0;
+  right: 0;
+  background-color: white;
+  z-index: 2;
+  display: flex;
+  gap: 20px;
+`,ExpandButton=styled(IconButton)`
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 2;
+  background-color: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(4px);
+  
+  &:hover {
+    background-color: rgba(255, 255, 255, 1);
+  }
+`,SettingsDialog=({title:e="Settings",open:t,noHeader:i=!1,onClose:o,onSave:a,children:l,serviceOnline:n=!0,saveDisabled:r=!1,minHeight:s=400,minWidth:d=500,maxWidth:m,maxHeight:p,cancelButtonText:g="Cancel",saveButtonText:h="Save",disableResizing:c=!1,disableExpansion:x=!1,dialogClassName:u,resizableClassName:b,dialogContentClassName:f,dialogActionsClassName:y})=>{const[C,j]=useState({width:d,height:s}),[w,D]=useState(!1),[S,_]=useState({width:d,height:s}),k=useCallback(((e,t,i,o)=>{if(c)return;const a={width:i.offsetWidth,height:i.offsetHeight};j(a)}),[c]),z=useCallback(((e,t)=>{"backdropClick"!==t&&"escapeKeyDown"!==t&&o()}),[o]),v=useCallback((()=>{if(w)j(S),D(!1);else{_(C);const e=window.innerWidth-180,t=window.innerHeight-120-60;j({width:Math.max(d,e),height:Math.max(s,t)}),D(!0)}}),[w,C,S,d,s]),B={pointerEvents:"none"},K=!x,N=!c&&!w,R=_jsxs(_Fragment,{children:[!i&&_jsx(Header,{children:_jsx(Title,{children:e})}),K&&_jsx(ExpandButton,{onClick:v,size:"small",children:_jsx(w?FullscreenExit:Fullscreen,{})}),_jsx(StyledDialogContent,{className:f,children:_jsx(ScrollableContainer,{children:l})}),_jsxs(StyledDialogActions,{className:y,children:[_jsx(KemuLightButton,{onClick:o,children:g}),_jsx(KemuPrimaryButton,{disabled:!n||r,onClick:a,children:h})]})]});return _jsx(ResizableDialog,{onClose:z,open:t,className:u,children:_jsx(KemuThemeWrapper,{children:c?_jsx("div",{className:b,style:{width:C.width,height:C.height},children:R}):_jsx(Resizable,{enable:{top:N,right:N,bottom:N,left:N,topRight:N,bottomRight:N,bottomLeft:N,topLeft:N},handleStyles:{bottomLeft:B,bottomRight:{zIndex:2},bottom:B,top:B,topLeft:B,topRight:B},minHeight:s,minWidth:d,maxWidth:m,maxHeight:p,size:C,onResizeStop:k,className:b,children:R})})})};export default SettingsDialog;

package/mjs/components/SvgContainer.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+
+/**
+ * Container for SVG icons with customizable fill color.
+ *
+ * @example
+ * ```tsx
+ * <SvgContainer fill="blue">
+ *   <svg>...</svg>
+ * </SvgContainer>
+ * ```
+ */
+export interface SvgContainerProps {
+	fill?: string;
+	children?: ReactNode;
+	width?: number;
+	height?: number;
+	className?: string;
+}
+declare const SvgContainer: ({ fill, children, width, height, className }: SvgContainerProps) => import("react/jsx-runtime").JSX.Element;
+
+export {
+	SvgContainer as default,
+};
+
+export {};

package/mjs/components/SvgContainer.js

@@ -0,0 +1,9 @@
+import{jsx as _jsx}from"react/jsx-runtime";import styled from"@emotion/styled";const StyledSvgContainer=styled.div`
+  fill: ${t=>t.fill||"white"};
+  margin-top: 10px;
+
+  svg {
+    width: ${t=>t.width||38}px;
+    height: ${t=>t.height||38}px;
+  }
+`,SvgContainer=({fill:t,children:i,width:e,height:l,className:h})=>_jsx(StyledSvgContainer,{fill:t,width:e,height:l,className:h,children:i});export default SvgContainer;

package/mjs/components/WidgetBody.d.ts

@@ -0,0 +1,20 @@
+/**
+ * A container for widget body content. Provides centered flexbox layout with padding.
+ *
+ * @example
+ * ```tsx
+ * <WidgetBody>
+ *   <div>Widget content</div>
+ * </WidgetBody>
+ * ```
+ */
+declare const WidgetBody: import("@emotion/styled").StyledComponent<{
+	theme?: import("@emotion/react").Theme;
+	as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
+export {
+	WidgetBody as default,
+};
+
+export {};

package/mjs/components/WidgetBody.js

@@ -0,0 +1,9 @@
+import styled from"@emotion/styled";const WidgetBody=styled.div`
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+`;export default WidgetBody;

package/mjs/components/index.d.ts

@@ -1,7 +1,199 @@
 import { CSSObject } from '@emotion/styled';
+import { Theme } from '@mui/material';
 import React$1 from 'react';
-import { CSSProperties } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 
+/**
+ * A theme wrapper component that provides Kemu's default Material-UI theme.
+ * Can be overridden with a custom theme.
+ *
+ * @example
+ * Using default theme:
+ * ```tsx
+ * <KemuThemeWrapper>
+ *   <MyComponent />
+ * </KemuThemeWrapper>
+ * ```
+ *
+ * @example
+ * With custom theme override:
+ * ```tsx
+ * const customTheme = createTheme({
+ *   palette: {
+ *     primary: {
+ *       main: '#ff0000',
+ *     },
+ *   },
+ * });
+ *
+ * <KemuThemeWrapper theme={customTheme}>
+ *   <MyComponent />
+ * </KemuThemeWrapper>
+ * ```
+ */
+export interface KemuThemeWrapperProps {
+	children: React$1.ReactNode;
+	theme?: Theme;
+}
+export declare const KemuThemeWrapper: ({ children, theme }: KemuThemeWrapperProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A base widget component with settings bar, icon support, and customizable layout.
+ *
+ * @example
+ * Basic usage with custom icon:
+ * ```tsx
+ * const MyIcon = () => <svg>...</svg>;
+ *
+ * <BaseWidget
+ *   onOpenSettings={() => setSettingsOpen(true)}
+ *   customIcon={<MyIcon />}
+ * >
+ *   <div>Widget Content</div>
+ * </BaseWidget>
+ * ```
+ *
+ * @example
+ * Without settings:
+ * ```tsx
+ * <BaseWidget
+ *   showSettings={false}
+ *   width={100}
+ *   height={150}
+ * >
+ *   <div>My Widget</div>
+ * </BaseWidget>
+ * ```
+ *
+ * @example
+ * With custom icon color:
+ * ```tsx
+ * <BaseWidget
+ *   onOpenSettings={handleSettings}
+ *   settingsIconColor="#333"
+ *   customIcon={<CustomIcon />}
+ * >
+ *   <div>Content</div>
+ * </BaseWidget>
+ * ```
+ */
+export interface BaseWidgetProps {
+	children?: React$1.ReactNode;
+	showSettings?: boolean;
+	onOpenSettings?: () => void;
+	width?: number;
+	height?: number;
+	iconWidth?: number;
+	iconHeight?: number;
+	showIcon?: boolean;
+	customIcon?: React$1.ReactNode;
+	settingsIconColor?: string;
+	customTheme?: Theme;
+	svgContainerClassName?: string;
+	widgetContainerClassName?: string;
+	widgetBodyClassName?: string;
+}
+export declare const BaseWidget: ({ children, showSettings, onOpenSettings, width, height, iconWidth, iconHeight, showIcon, customIcon, settingsIconColor, customTheme, svgContainerClassName, widgetContainerClassName, widgetBodyClassName, }: BaseWidgetProps) => import("react/jsx-runtime.js").JSX.Element;
+/**
+ * A checkbox field component with label, wrapped in a horizontal field layout.
+ *
+ * @example
+ * ```tsx
+ * const [enabled, setEnabled] = useState(false);
+ *
+ * <CheckboxField
+ *   label="Enable feature"
+ *   checked={enabled}
+ *   onChange={(checked) => setEnabled(checked)}
+ * />
+ * ```
+ */
+export type CheckboxFieldProps = {
+	onChange?: (checked: boolean) => void;
+	checked: boolean;
+	label: string;
+	disabled?: boolean;
+};
+export declare const CheckboxField: (props: CheckboxFieldProps) => import("react/jsx-runtime.js").JSX.Element;
+/**
+ * A vertical field container for form elements. Use for stacking form fields vertically.
+ *
+ * @example
+ * ```tsx
+ * <Field mb={20}>
+ *   <label>Name</label>
+ *   <input type="text" />
+ * </Field>
+ * ```
+ */
+export interface FieldProps {
+	mb?: number;
+	mt?: number;
+}
+export declare const Field: import("@emotion/styled").StyledComponent<{
+	theme?: import("@emotion/react").Theme;
+	as?: React$1.ElementType;
+} & FieldProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/**
+ * A field component with a built-in label. Use this for simple form fields.
+ *
+ * @example
+ * ```tsx
+ * <FieldWithLabel label="Username">
+ *   <input type="text" />
+ * </FieldWithLabel>
+ * ```
+ *
+ * @example
+ * With Material-UI components:
+ * ```tsx
+ * <FieldWithLabel label="Select Option">
+ *   <Select>
+ *     <MenuItem value="1">Option 1</MenuItem>
+ *   </Select>
+ * </FieldWithLabel>
+ * ```
+ */
+export interface FieldWithLabelProps {
+	label: string;
+	children?: React$1.ReactNode;
+	mb?: number;
+	mt?: number;
+}
+export declare const FieldWithLabel: ({ label, children, mb, mt }: FieldWithLabelProps) => import("react/jsx-runtime.js").JSX.Element;
+/**
+ * A horizontal field container for form elements. Use for placing form fields side by side.
+ *
+ * @example
+ * ```tsx
+ * <HorizontalField alignItems="center">
+ *   <label>Option:</label>
+ *   <input type="checkbox" />
+ * </HorizontalField>
+ * ```
+ */
+export interface HorizontalFieldProps {
+	alignItems?: string;
+}
+export declare const HorizontalField: import("@emotion/styled").StyledComponent<{
+	theme?: import("@emotion/react").Theme;
+	as?: React$1.ElementType;
+} & HorizontalFieldProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export interface KemuLightButtonProps {
+	noShadow?: boolean;
+}
+export declare const KemuLightButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent/index.js").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+	ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "color" | "disabled" | "children" | "style" | "className" | "size" | "disableElevation" | "fullWidth" | "startIcon" | "endIcon" | "loading" | "loadingIndicator" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "href" | "loadingPosition" | "variant"> & {
+	theme?: import("@emotion/react").Theme;
+} & KemuLightButtonProps, {}, {}>;
+export interface KemuPrimaryButtonProps {
+	noShadow?: boolean;
+}
+export declare const KemuPrimaryButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button/Button.js").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent/index.js").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+	ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "color" | "disabled" | "children" | "style" | "className" | "size" | "disableElevation" | "fullWidth" | "startIcon" | "endIcon" | "loading" | "loadingIndicator" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "href" | "loadingPosition" | "variant"> & {
+	theme?: import("@emotion/react").Theme;
+} & KemuPrimaryButtonProps, {}, {}>;
 export type ResizableContainerProps = {
 	css?: CSSObject;
 	minWidth?: number;
@@ -63,6 +255,139 @@ export type WrapperProps = {
  * ```
  */
 export declare const ResizableContainer: (props: ResizableContainerProps & WrapperProps) => import("react/jsx-runtime.js").JSX.Element;
+/**
+ * A settings bar component with default settings icon. Renders in the top-right corner.
+ *
+ * @example
+ * With default settings icon:
+ * ```tsx
+ * <SettingsBar
+ *   iconColor="white"
+ *   onSettingsClick={() => console.log('Settings clicked')}
+ * />
+ * ```
+ *
+ * @example
+ * With custom content:
+ * ```tsx
+ * <SettingsBar iconColor="#333">
+ *   <IconButton onClick={handleClick}>
+ *     <CustomIcon />
+ *   </IconButton>
+ * </SettingsBar>
+ * ```
+ */
+export interface SettingsBarProps {
+	iconColor?: string;
+	onSettingsClick?: () => void;
+	children?: React$1.ReactNode;
+}
+export declare const SettingsBar: ({ iconColor, onSettingsClick, children }: SettingsBarProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A resizable and expandable settings dialog with customizable buttons and styling.
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <SettingsDialog
+ *   open={open}
+ *   onClose={() => setOpen(false)}
+ *   onSave={() => {
+ *     // Save settings
+ *     setOpen(false);
+ *   }}
+ * >
+ *   <FieldWithLabel label="Setting 1">
+ *     <input type="text" />
+ *   </FieldWithLabel>
+ * </SettingsDialog>
+ * ```
+ *
+ * @example
+ * Disable resizing and expansion:
+ * ```tsx
+ * <SettingsDialog
+ *   open={open}
+ *   onClose={() => setOpen(false)}
+ *   onSave={handleSave}
+ *   disableResizing={true}
+ *   disableExpansion={true}
+ * >
+ *   {children}
+ * </SettingsDialog>
+ * ```
+ *
+ * @example
+ * Custom button text:
+ * ```tsx
+ * <SettingsDialog
+ *   open={open}
+ *   onClose={handleClose}
+ *   onSave={handleSave}
+ *   cancelButtonText="Discard"
+ *   saveButtonText="Apply Changes"
+ * >
+ *   {children}
+ * </SettingsDialog>
+ * ```
+ */
+export interface SettingsDialogProps {
+	title?: string;
+	open: boolean;
+	noHeader?: boolean;
+	onClose: () => void;
+	onSave: () => void;
+	children: React$1.ReactNode;
+	serviceOnline?: boolean;
+	saveDisabled?: boolean;
+	minHeight?: number;
+	minWidth?: number;
+	maxWidth?: number;
+	maxHeight?: number;
+	cancelButtonText?: string;
+	saveButtonText?: string;
+	disableResizing?: boolean;
+	disableExpansion?: boolean;
+	dialogClassName?: string;
+	resizableClassName?: string;
+	dialogContentClassName?: string;
+	dialogActionsClassName?: string;
+}
+export declare const SettingsDialog: ({ title, open, noHeader, onClose, onSave, children, serviceOnline, saveDisabled, minHeight, minWidth, maxWidth, maxHeight, cancelButtonText, saveButtonText, disableResizing, disableExpansion, dialogClassName, resizableClassName, dialogContentClassName, dialogActionsClassName, }: SettingsDialogProps) => import("react/jsx-runtime.js").JSX.Element;
+/**
+ * Container for SVG icons with customizable fill color.
+ *
+ * @example
+ * ```tsx
+ * <SvgContainer fill="blue">
+ *   <svg>...</svg>
+ * </SvgContainer>
+ * ```
+ */
+export interface SvgContainerProps {
+	fill?: string;
+	children?: React$1.ReactNode;
+	width?: number;
+	height?: number;
+	className?: string;
+}
+export declare const SvgContainer: ({ fill, children, width, height, className }: SvgContainerProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A container for widget body content. Provides centered flexbox layout with padding.
+ *
+ * @example
+ * ```tsx
+ * <WidgetBody>
+ *   <div>Widget content</div>
+ * </WidgetBody>
+ * ```
+ */
+export declare const WidgetBody: import("@emotion/styled").StyledComponent<{
+	theme?: import("@emotion/react").Theme;
+	as?: React$1.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 type WrapperProps$1 = {
 	cWidth?: number | string;
 	cHeight?: number | string;

package/mjs/components/index.js

@@ -1 +1 @@
-import WidgetContainer from"./WidgetContainer.js";import ResizableContainer from"./ResizableContainer.js";export{WidgetContainer,ResizableContainer};
+import WidgetContainer from"./WidgetContainer.js";import ResizableContainer from"./ResizableContainer.js";import SettingsDialog from"./SettingsDialog.js";import SvgContainer from"./SvgContainer.js";import SettingsBar from"./SettingsBar.js";import Field from"./Field.js";import HorizontalField from"./HorizontalField.js";import CheckboxField from"./CheckboxField.js";import FieldWithLabel from"./FieldWithLabel.js";import WidgetBody from"./WidgetBody.js";import BaseWidget from"./BaseWidget.js";import KemuThemeWrapper from"./KemuThemeWrapper.js";import KemuPrimaryButton from"./KemuPrimaryButton.js";import KemuLightButton from"./KemuLightButton.js";export{WidgetContainer,ResizableContainer,SettingsDialog,SvgContainer,SettingsBar,Field,HorizontalField,CheckboxField,FieldWithLabel,WidgetBody,BaseWidget,KemuThemeWrapper,KemuPrimaryButton,KemuLightButton};

package/mjs/hooks/index.d.ts

@@ -124,6 +124,17 @@ export type WidgetPort = {
 	 * processor execution.
 	 */
 	triggerPort?: boolean;
+	/**
+	 * A path to a markdown file that will be rendered as the ports documentation.
+	 * If provided it will override the default 'description' property. Useful if the documentation of this port requires more than a simple text.
+	 *
+	 * The path can be relative to the service's `docs` folder. For example:
+	 *
+	 * ```
+	 * docs/ports/inputA.md
+	 * ```
+	 */
+	mdHelp?: string;
 };
 export type WidgetState<T extends Record<string, any> = Record<string, unknown>> = T;
 export type TargetOutput = {
@@ -148,6 +159,9 @@ export type TargetOutput = {
 	/** id of the variant that defined the output */
 	variantId?: string;
 };
+export type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> & {
+	[K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;
+}[Keys];
 export type WidgetPortStr = Omit<WidgetPort, "type"> & {
 	type: string;
 };
@@ -177,7 +191,20 @@ export type ServiceWidgetVariant<P extends WidgetPort | WidgetPortStr> = {
 	inputs?: P[];
 	outputs?: P[];
 };
-export type ValidPlatformArch = "win-x64" | "win-x86" | "win-arm" | "win-arm64" | "osx-x64" | "osx-arm64";
+/**
+ * A list of supported Linux distributions. This can be extended in the future.
+ * Use 'generic' for distribution-agnostic services.
+ */
+export type LinuxDistribution = 
+/** For distribution-agnostic services that run on most Linux systems. */
+"generic"
+/** Includes Debian, Ubuntu, Linux Mint, etc. (uses APT) */
+ | "debian"
+/** Includes RHEL, Fedora, CentOS, etc. (uses YUM/DNF) */
+ | "rhel"
+/** Includes Arch Linux, Manjaro, etc. (uses Pacman) */
+ | "arch";
+export type ValidPlatformArch = "win-x64" | "win-x86" | "win-arm" | "win-arm64" | "osx-x64" | "osx-arm64" | `linux-${LinuxDistribution}-x64` | `linux-${LinuxDistribution}-arm64`;
 export type ServiceManifest<P extends WidgetPort | WidgetPortStr> = {
 	/** the unique name defined by the service */
 	name: string;
@@ -187,7 +214,17 @@ export type ServiceManifest<P extends WidgetPort | WidgetPortStr> = {
 	title?: string;
 	/** a shorten title to be used in the canvas */
 	shortTitle?: string;
+	/** generic description shown when a service is selected from the Hub Services Grid */
 	description: string;
+	/**
+	 * Relative to the markdown file that will be rendered when the user clicks on the 'help' icon for this service.
+	 * The description is meant to be short and include video/sample images or a link to the description page. Eg:
+	 *
+	 * ```
+	 * docs/help.md
+	 * ```
+	 **/
+	mdHelp?: string;
 	processor: ProcessorType;
 	/** Id of the user that published the service */
 	author: string;
@@ -269,6 +306,32 @@ export type ServiceManifest<P extends WidgetPort | WidgetPortStr> = {
 	 * and be visually distinct.
 	 */
 	variants?: ServiceWidgetVariant<P>[];
+	/**
+	 * The default variant info. If provided, it allows overriding the default info
+	 * of the service. Useful when the default variant behaviour does not match the service description.
+	 */
+	defaultVariantInfo?: {
+		/**
+		 * The title of the default variant. If provided, it will override the `title` property.
+		 */
+		title?: string;
+		/**
+		 * The short title of the default variant. If provided, it will override the `shortTitle` property.
+		 */
+		shortTitle?: string;
+		/**
+		 * The description of the default variant. If provided, it will override the `description` property.
+		 */
+		description?: string;
+		/**
+		 * The color of the default variant. If provided, it will override the `color` property.
+		 */
+		color?: string;
+		/**
+		 * The SVG icon of the default variant. If provided, it will override the `svgIcon` property.
+		 */
+		svgIcon?: string;
+	};
 	/**
 	 * A list of relative paths to folders containing extra services that are part of this service. Eg:
 	 * ```json
@@ -341,9 +404,6 @@ export type ProcessedManifest<B extends Buffer | ArrayBuffer = Buffer> = Omit<Pa
 		version: string;
 	};
 };
-export type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> & {
-	[K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;
-}[Keys];
 export type DefineDynamicPortsArgs = RequireAtLeastOne<{
 	/**
 	 * Set to null to remove any previously defined ports or