@extrachill/components 0.4.5 → 0.4.6

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## [0.4.6] - 2026-03-25
+
+### Changed
+- Add explicit surface depth primitives for shared mobile shell layering
+
 ## [0.4.5] - 2026-03-25
 
 ### Changed

package/dist/BlockShell.d.ts

@@ -4,6 +4,7 @@ export interface BlockShellProps {
     className?: string;
     classPrefix?: string;
     compact?: boolean;
+    depth?: 0 | 1 | 2 | 3;
 }
-export declare function BlockShell({ children, className, classPrefix, compact, }: BlockShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function BlockShell({ children, className, classPrefix, compact, depth, }: BlockShellProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=BlockShell.d.ts.map

package/dist/BlockShell.d.ts.map

@@ -1 +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"}
+{"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;IAClB,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAE,EAC3B,QAAQ,EACR,SAAc,EACd,WAA8B,EAC9B,OAAe,EACf,KAAS,GACT,EAAE,eAAe,2CASjB"}

package/dist/BlockShell.js

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

package/dist/Panel.d.ts

@@ -4,6 +4,7 @@ export interface PanelProps {
     className?: string;
     classPrefix?: string;
     compact?: boolean;
+    depth?: 0 | 1 | 2 | 3;
 }
-export declare function Panel({ children, className, classPrefix, compact, }: PanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function Panel({ children, className, classPrefix, compact, depth, }: PanelProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Panel.d.ts.map

package/dist/Panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../src/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,UAAU;IAC1B,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,KAAK,CAAE,EACtB,QAAQ,EACR,SAAc,EACd,WAAwB,EACxB,OAAe,GACf,EAAE,UAAU,2CAQZ"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../src/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,UAAU;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACtB;AAED,wBAAgB,KAAK,CAAE,EACtB,QAAQ,EACR,SAAc,EACd,WAAwB,EACxB,OAAe,EACf,KAAS,GACT,EAAE,UAAU,2CASZ"}

package/dist/Panel.js

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

package/dist/Section.d.ts

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

package/dist/Section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../src/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,YAAY;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACtB;AAED,wBAAgB,OAAO,CAAE,EACxB,QAAQ,EACR,SAAc,EACd,WAA0B,EAC1B,KAAS,GACT,EAAE,YAAY,2CAMd"}

package/dist/Section.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Section({ children, className = '', classPrefix = 'ec-section', depth = 2, }) {
+    const classes = [classPrefix, `${classPrefix}--depth-${depth}`, className]
+        .filter(Boolean)
+        .join(' ');
+    return _jsx("div", { className: classes, children: children });
+}

package/dist/Subsection.d.ts

@@ -0,0 +1,5 @@
+import { type SectionProps } from './Section.tsx';
+export interface SubsectionProps extends SectionProps {
+}
+export declare function Subsection(props: SubsectionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Subsection.d.ts.map

package/dist/Subsection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Subsection.d.ts","sourceRoot":"","sources":["../src/Subsection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAE3D,MAAM,WAAW,eAAgB,SAAQ,YAAY;CAAG;AAExD,wBAAgB,UAAU,CAAE,KAAK,EAAE,eAAe,2CAEjD"}

package/dist/Subsection.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Section } from "./Section.js";
+export function Subsection(props) {
+    return _jsx(Section, { ...props });
+}

package/dist/Surface.d.ts

@@ -0,0 +1,5 @@
+import { type PanelProps } from './Panel.tsx';
+export interface SurfaceProps extends PanelProps {
+}
+export declare function Surface(props: SurfaceProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Surface.d.ts.map

package/dist/Surface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Surface.d.ts","sourceRoot":"","sources":["../src/Surface.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AAErD,MAAM,WAAW,YAAa,SAAQ,UAAU;CAAG;AAEnD,wBAAgB,OAAO,CAAE,KAAK,EAAE,YAAY,2CAE3C"}

package/dist/Surface.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Panel } from "./Panel.js";
+export function Surface(props) {
+    return _jsx(Panel, { ...props });
+}

package/dist/index.d.ts

@@ -9,7 +9,10 @@ export { SearchBox, type SearchBoxProps } from './SearchBox.tsx';
 export { Modal, type ModalProps } from './Modal.tsx';
 export { Tabs, type TabsProps, type TabItem } from './Tabs.tsx';
 export { Panel, type PanelProps } from './Panel.tsx';
+export { Surface, type SurfaceProps } from './Surface.tsx';
 export { PanelHeader, type PanelHeaderProps } from './PanelHeader.tsx';
+export { Section, type SectionProps } from './Section.tsx';
+export { Subsection, type SubsectionProps } from './Subsection.tsx';
 export { ActionRow, type ActionRowProps } from './ActionRow.tsx';
 export { FieldGroup, type FieldGroupProps } from './FieldGroup.tsx';
 export { InlineStatus, type InlineStatusProps } from './InlineStatus.tsx';

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;AACpE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,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,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,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;AACpE,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/index.js

@@ -9,7 +9,10 @@ export { SearchBox } from "./SearchBox.js";
 export { Modal } from "./Modal.js";
 export { Tabs } from "./Tabs.js";
 export { Panel } from "./Panel.js";
+export { Surface } from "./Surface.js";
 export { PanelHeader } from "./PanelHeader.js";
+export { Section } from "./Section.js";
+export { Subsection } from "./Subsection.js";
 export { ActionRow } from "./ActionRow.js";
 export { FieldGroup } from "./FieldGroup.js";
 export { InlineStatus } from "./InlineStatus.js";

package/package.json

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

package/src/BlockShell.tsx

@@ -5,6 +5,7 @@ export interface BlockShellProps {
 	className?: string;
 	classPrefix?: string;
 	compact?: boolean;
+	depth?: 0 | 1 | 2 | 3;
 }
 
 export function BlockShell( {
@@ -12,10 +13,12 @@ export function BlockShell( {
 	className = '',
 	classPrefix = 'ec-block-shell',
 	compact = false,
+	depth = 0,
 }: BlockShellProps ) {
 	const shellClass = [
 		classPrefix,
 		compact ? `${ classPrefix }--compact` : '',
+		`${ classPrefix }--depth-${ depth }`,
 		className,
 	].filter( Boolean ).join( ' ' );
 

package/src/Panel.tsx

@@ -5,6 +5,7 @@ export interface PanelProps {
 	className?: string;
 	classPrefix?: string;
 	compact?: boolean;
+	depth?: 0 | 1 | 2 | 3;
 }
 
 export function Panel( {
@@ -12,10 +13,12 @@ export function Panel( {
 	className = '',
 	classPrefix = 'ec-panel',
 	compact = false,
+	depth = 1,
 }: PanelProps ) {
 	const panelClass = [
 		classPrefix,
 		compact ? `${ classPrefix }--compact` : '',
+		`${ classPrefix }--depth-${ depth }`,
 		className,
 	].filter( Boolean ).join( ' ' );
 

package/src/Section.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+
+export interface SectionProps {
+	children: ReactNode;
+	className?: string;
+	classPrefix?: string;
+	depth?: 0 | 1 | 2 | 3;
+}
+
+export function Section( {
+	children,
+	className = '',
+	classPrefix = 'ec-section',
+	depth = 2,
+}: SectionProps ) {
+	const classes = [ classPrefix, `${ classPrefix }--depth-${ depth }`, className ]
+		.filter( Boolean )
+		.join( ' ' );
+
+	return <div className={ classes }>{ children }</div>;
+}

package/src/Subsection.tsx

@@ -0,0 +1,7 @@
+import { Section, type SectionProps } from './Section.tsx';
+
+export interface SubsectionProps extends SectionProps {}
+
+export function Subsection( props: SubsectionProps ) {
+	return <Section { ...props } />;
+}

package/src/Surface.tsx

@@ -0,0 +1,7 @@
+import { Panel, type PanelProps } from './Panel.tsx';
+
+export interface SurfaceProps extends PanelProps {}
+
+export function Surface( props: SurfaceProps ) {
+	return <Panel { ...props } />;
+}

package/src/index.tsx

@@ -10,7 +10,10 @@ export { SearchBox, type SearchBoxProps } from './SearchBox.tsx';
 export { Modal, type ModalProps } from './Modal.tsx';
 export { Tabs, type TabsProps, type TabItem } from './Tabs.tsx';
 export { Panel, type PanelProps } from './Panel.tsx';
+export { Surface, type SurfaceProps } from './Surface.tsx';
 export { PanelHeader, type PanelHeaderProps } from './PanelHeader.tsx';
+export { Section, type SectionProps } from './Section.tsx';
+export { Subsection, type SubsectionProps } from './Subsection.tsx';
 export { ActionRow, type ActionRowProps } from './ActionRow.tsx';
 export { FieldGroup, type FieldGroupProps } from './FieldGroup.tsx';
 export { InlineStatus, type InlineStatusProps } from './InlineStatus.tsx';

package/styles/components.scss

@@ -133,7 +133,7 @@
 	border: 1px solid var(--border-color, #ddd);
 	border-radius: var(--border-radius-lg, 8px);
 	padding: var(--spacing-md, 1rem);
-	background: var(--card-background, #f8f8f8);
+	background: var(--background-color, #fff);
 	display: grid;
 	gap: var(--spacing-md, 1rem);
 }
@@ -149,6 +149,19 @@
 	gap: var(--spacing-lg, 1.5rem);
 }
 
+.ec-block-shell--depth-0 {
+	background: var(--card-background, #f1f5f9);
+}
+
+.ec-block-shell--depth-1,
+.ec-block-shell--depth-3 {
+	background: var(--background-color, #fff);
+}
+
+.ec-block-shell--depth-2 {
+	background: var(--card-background, #f1f5f9);
+}
+
 .ec-block-shell--compact {
 	padding: var(--spacing-md, 1rem);
 	border-radius: var(--border-radius-lg, 8px);
@@ -218,6 +231,34 @@
 	border-radius: var(--border-radius-md, 6px);
 }
 
+.ec-panel--depth-0,
+.ec-panel--depth-2 {
+	background: var(--card-background, #f8f8f8);
+}
+
+.ec-panel--depth-1,
+.ec-panel--depth-3 {
+	background: var(--background-color, #fff);
+}
+
+.ec-section {
+	display: grid;
+	gap: var(--spacing-md, 1rem);
+	padding: var(--spacing-md, 1rem);
+	border: 1px solid var(--border-color, #ddd);
+	border-radius: var(--border-radius-md, 6px);
+}
+
+.ec-section--depth-0,
+.ec-section--depth-2 {
+	background: var(--card-background, #f8f8f8);
+}
+
+.ec-section--depth-1,
+.ec-section--depth-3 {
+	background: var(--background-color, #fff);
+}
+
 // Panel Header
 .ec-panel-header {
 	display: flex;
@@ -356,10 +397,30 @@
 		padding-right: var(--spacing-md, 1rem);
 	}
 
-	.ec-panel .ec-panel {
+	.ec-panel--depth-0,
+	.ec-panel--depth-2,
+	.ec-section--depth-0,
+	.ec-section--depth-2 {
 		background: var(--card-background, #f1f5f9);
 	}
 
+	.ec-panel--depth-1,
+	.ec-panel--depth-3,
+	.ec-section--depth-1,
+	.ec-section--depth-3 {
+		background: var(--background-color, #fff);
+	}
+
+	.ec-section {
+		border-radius: 0;
+		border-left: 0;
+		border-right: 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);
 	}