@extrachill/components 0.4.1 → 0.4.3

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## [0.4.2] - 2026-03-25
+
+### Changed
+- Add mobile edge-to-edge behavior for shared panels
+
 ## [0.4.1] - 2026-03-25
 
 ### Changed

package/dist/BlockIntro.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export interface BlockIntroProps {
+    title?: ReactNode;
+    description?: ReactNode;
+    className?: string;
+    classPrefix?: string;
+}
+export declare function BlockIntro({ title, description, className, classPrefix, }: BlockIntroProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BlockIntro.d.ts.map

package/dist/BlockIntro.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockIntro.d.ts","sourceRoot":"","sources":["../src/BlockIntro.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,eAAe;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,UAAU,CAAE,EAC3B,KAAK,EACL,WAAW,EACX,SAAc,EACd,WAA8B,GAC9B,EAAE,eAAe,2CAOjB"}

package/dist/BlockIntro.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function BlockIntro({ title, description, className = '', classPrefix = 'ec-block-intro', }) {
+    return (_jsxs("div", { className: [classPrefix, className].filter(Boolean).join(' '), children: [title && _jsx("div", { className: `${classPrefix}__title`, children: title }), description && _jsx("div", { className: `${classPrefix}__description`, children: description })] }));
+}

package/dist/BlockShell.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export interface BlockShellProps {
+    children: ReactNode;
+    className?: string;
+    classPrefix?: string;
+    compact?: boolean;
+}
+export declare function BlockShell({ children, className, classPrefix, compact, }: BlockShellProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BlockShell.d.ts.map

package/dist/BlockShell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockShell.d.ts","sourceRoot":"","sources":["../src/BlockShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,eAAe;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,UAAU,CAAE,EAC3B,QAAQ,EACR,SAAc,EACd,WAA8B,EAC9B,OAAe,GACf,EAAE,eAAe,2CAQjB"}

package/dist/BlockShell.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function BlockShell({ children, className = '', classPrefix = 'ec-block-shell', compact = false, }) {
+    const shellClass = [
+        classPrefix,
+        compact ? `${classPrefix}--compact` : '',
+        className,
+    ].filter(Boolean).join(' ');
+    return _jsx("div", { className: shellClass, children: children });
+}

package/dist/index.d.ts

@@ -16,4 +16,6 @@ export { InlineStatus, type InlineStatusProps } from './InlineStatus.tsx';
 export { Badge, type BadgeProps } from './Badge.tsx';
 export { ImagePreview, type ImagePreviewProps } from './ImagePreview.tsx';
 export { MediaField, type MediaFieldProps } from './MediaField.tsx';
+export { BlockShell, type BlockShellProps } from './BlockShell.tsx';
+export { BlockIntro, type BlockIntroProps } from './BlockIntro.tsx';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,OAAO,EAAE,MAAM,YAAY,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,OAAO,EAAE,MAAM,YAAY,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -16,3 +16,5 @@ export { InlineStatus } from "./InlineStatus.js";
 export { Badge } from "./Badge.js";
 export { ImagePreview } from "./ImagePreview.js";
 export { MediaField } from "./MediaField.js";
+export { BlockShell } from "./BlockShell.js";
+export { BlockIntro } from "./BlockIntro.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extrachill/components",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "Shared React components for the Extra Chill Platform.",
   "type": "module",
   "main": "./dist/index.js",

package/src/BlockIntro.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+
+export interface BlockIntroProps {
+	title?: ReactNode;
+	description?: ReactNode;
+	className?: string;
+	classPrefix?: string;
+}
+
+export function BlockIntro( {
+	title,
+	description,
+	className = '',
+	classPrefix = 'ec-block-intro',
+}: BlockIntroProps ) {
+	return (
+		<div className={ [ classPrefix, className ].filter( Boolean ).join( ' ' ) }>
+			{ title && <div className={ `${ classPrefix }__title` }>{ title }</div> }
+			{ description && <div className={ `${ classPrefix }__description` }>{ description }</div> }
+		</div>
+	);
+}

package/src/BlockShell.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+
+export interface BlockShellProps {
+	children: ReactNode;
+	className?: string;
+	classPrefix?: string;
+	compact?: boolean;
+}
+
+export function BlockShell( {
+	children,
+	className = '',
+	classPrefix = 'ec-block-shell',
+	compact = false,
+}: BlockShellProps ) {
+	const shellClass = [
+		classPrefix,
+		compact ? `${ classPrefix }--compact` : '',
+		className,
+	].filter( Boolean ).join( ' ' );
+
+	return <div className={ shellClass }>{ children }</div>;
+}

package/src/index.tsx

@@ -17,3 +17,5 @@ export { InlineStatus, type InlineStatusProps } from './InlineStatus.tsx';
 export { Badge, type BadgeProps } from './Badge.tsx';
 export { ImagePreview, type ImagePreviewProps } from './ImagePreview.tsx';
 export { MediaField, type MediaFieldProps } from './MediaField.tsx';
+export { BlockShell, type BlockShellProps } from './BlockShell.tsx';
+export { BlockIntro, type BlockIntroProps } from './BlockIntro.tsx';

package/styles/components.scss

@@ -138,6 +138,43 @@
 	gap: var(--spacing-md, 1rem);
 }
 
+// Block shell / top-level wrapper
+.ec-block-shell {
+	background: var(--card-background, #f1f5f9);
+	border: 1px solid var(--border-color, #ddd);
+	border-radius: var(--border-radius-xl, 14px);
+	padding: var(--spacing-lg, 1.5rem);
+	box-sizing: border-box;
+	display: grid;
+	gap: var(--spacing-lg, 1.5rem);
+}
+
+.ec-block-shell--compact {
+	padding: var(--spacing-md, 1rem);
+	border-radius: var(--border-radius-lg, 8px);
+}
+
+.ec-block-intro {
+	display: grid;
+	gap: var(--spacing-sm, 0.5rem);
+	background: var(--card-background, #f1f5f9);
+}
+
+.ec-block-intro__title {
+	margin: 0;
+	font-family: var(--font-family-heading, inherit);
+	font-size: var(--font-size-2xl, 1.75rem);
+	font-weight: 700;
+	color: var(--text-color, #111);
+}
+
+.ec-block-intro__description {
+	margin: 0;
+	font-size: var(--font-size-body, 1.125rem);
+	line-height: 1.6;
+	color: var(--text-color, #111);
+}
+
 .ec-panel--compact {
 	padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
 	border-radius: var(--border-radius-md, 6px);
@@ -249,6 +286,42 @@
 	color: #004085;
 }
 
+// Mobile edge-to-edge panel principle
+// Matches the established theme pattern: small phone screens go full-width,
+// drop rounded corners, and reduce wasted side space.
+@media screen and (max-width: 480px) {
+	.ec-block-shell {
+		background: var(--card-background, #f1f5f9);
+		border-radius: 0;
+		border-left: 0;
+		border-right: 0;
+		margin: 0;
+		max-width: 100%;
+		padding: var(--spacing-md, 1rem);
+	}
+
+	.ec-panel {
+		border-radius: 0;
+		padding: var(--spacing-sm, 0.5rem) 0;
+		margin-left: calc(var(--spacing-md, 1rem) * -1);
+		margin-right: calc(var(--spacing-md, 1rem) * -1);
+		padding-left: var(--spacing-md, 1rem);
+		padding-right: var(--spacing-md, 1rem);
+	}
+
+	.ec-panel-header {
+		padding-bottom: var(--spacing-sm, 0.5rem);
+	}
+
+	.ec-action-row {
+		align-items: stretch;
+	}
+
+	.ec-action-row > * {
+		max-width: 100%;
+	}
+}
+
 // Image Preview
 .ec-image-preview {
 	display: inline-flex;