@c15t/dev-tools 0.0.1-rc.3

package/dist/router/router.cjs

@@ -0,0 +1,278 @@
+'use client';
+'use strict';
+var __webpack_require__ = {};
+(() => {
+	__webpack_require__.d = function (exports1, definition) {
+		for (var key in definition)
+			if (
+				__webpack_require__.o(definition, key) &&
+				!__webpack_require__.o(exports1, key)
+			)
+				Object.defineProperty(exports1, key, {
+					enumerable: true,
+					get: definition[key],
+				});
+	};
+})();
+(() => {
+	__webpack_require__.o = function (obj, prop) {
+		return Object.prototype.hasOwnProperty.call(obj, prop);
+	};
+})();
+(() => {
+	__webpack_require__.r = function (exports1) {
+		if ('undefined' != typeof Symbol && Symbol.toStringTag)
+			Object.defineProperty(exports1, Symbol.toStringTag, {
+				value: 'Module',
+			});
+		Object.defineProperty(exports1, '__esModule', {
+			value: true,
+		});
+	};
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+	Router: () => Router,
+});
+const jsx_runtime_namespaceObject = require('react/jsx-runtime');
+const external_lucide_react_namespaceObject = require('lucide-react');
+const react_namespaceObject = require('motion/react');
+const external_react_namespaceObject = require('react');
+const button_cjs_namespaceObject = require('../components/ui/button.cjs');
+const expandable_tabs_cjs_namespaceObject = require('../components/ui/expandable-tabs.cjs');
+const scroll_area_cjs_namespaceObject = require('../components/ui/scroll-area.cjs');
+const external_dev_tool_cjs_namespaceObject = require('../dev-tool.cjs');
+const utils_cjs_namespaceObject = require('../libs/utils.cjs');
+const tabs = [
+	{
+		title: 'Consents',
+		icon: external_lucide_react_namespaceObject.ToggleLeft,
+	},
+	{
+		title: 'Compliance',
+		icon: external_lucide_react_namespaceObject.GanttChartSquare,
+	},
+];
+function Router({ onClose }) {
+	const privacyConsent = (0, external_dev_tool_cjs_namespaceObject.getStore)();
+	const { clearAllData, setIsPrivacyDialogOpen, setShowPopup } = privacyConsent;
+	const [activeSection, setActiveSection] = (0,
+	external_react_namespaceObject.useState)('Consents');
+	const handleTabChange = (0, external_react_namespaceObject.useCallback)(
+		(index) => {
+			if (null !== index) setActiveSection(tabs[index].title);
+		},
+		[]
+	);
+	const renderingState = [
+		{
+			componentName: 'MarketingContent',
+			consentType: 'marketing',
+		},
+		{
+			componentName: 'AnalyticsContent',
+			consentType: 'measurement',
+		},
+		{
+			componentName: 'PersonalizationComponent',
+			consentType: 'ad_personalization',
+		},
+	];
+	const contentItems =
+		'Consents' === activeSection
+			? Object.entries(privacyConsent.consents).map(([name, value]) => ({
+					title: name,
+					status: value ? 'Enabled' : 'Disabled',
+				}))
+			: 'Compliance' === activeSection
+				? Object.entries(privacyConsent.complianceSettings).map(
+						([region, settings]) => ({
+							title: region,
+							status: settings.enabled ? 'Active' : 'Inactive',
+						})
+					)
+				: 'Conditional' === activeSection
+					? renderingState.map((item) => ({
+							title: item.componentName,
+							status: 'Rendered',
+							details: `Requires: ${item.consentType}`,
+						}))
+					: [];
+	const handleResetConsent = (0,
+	external_react_namespaceObject.useCallback)(() => {
+		clearAllData();
+		onClose();
+	}, [clearAllData, onClose]);
+	const handleOpenPrivacyModal = (0,
+	external_react_namespaceObject.useCallback)(() => {
+		setIsPrivacyDialogOpen(true);
+	}, [setIsPrivacyDialogOpen]);
+	const handleOpenCookiePopup = (0,
+	external_react_namespaceObject.useCallback)(() => {
+		setShowPopup(true);
+	}, [setShowPopup]);
+	return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(
+		jsx_runtime_namespaceObject.Fragment,
+		{
+			children: [
+				/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)('div', {
+					className: 'border-b p-4',
+					children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(
+						expandable_tabs_cjs_namespaceObject.ExpandableTabs,
+						{
+							tabs: Array.from(tabs),
+							activeColor: 'text-primary',
+							className: 'border-muted',
+							onChange: handleTabChange,
+						}
+					),
+				}),
+				/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(
+					scroll_area_cjs_namespaceObject.ScrollArea,
+					{
+						className: 'h-[300px]',
+						children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(
+							react_namespaceObject.motion.div,
+							{
+								className: 'space-y-2 p-4',
+								initial: {
+									opacity: 0,
+								},
+								animate: {
+									opacity: 1,
+								},
+								exit: {
+									opacity: 0,
+								},
+								children: contentItems.map((item, index) =>
+									/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(
+										react_namespaceObject.motion.div,
+										{
+											className:
+												'flex items-center justify-between rounded-lg border bg-card p-3',
+											initial: {
+												opacity: 0,
+												y: 20,
+											},
+											animate: {
+												opacity: 1,
+												y: 0,
+											},
+											transition: {
+												delay: 0.05 * index,
+											},
+											children: [
+												/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(
+													'div',
+													{
+														className: 'flex flex-col',
+														children: [
+															/*#__PURE__*/ (0,
+															jsx_runtime_namespaceObject.jsx)('span', {
+																className: 'font-medium text-sm',
+																children: item.title,
+															}),
+															item.details &&
+																/*#__PURE__*/ (0,
+																jsx_runtime_namespaceObject.jsx)('span', {
+																	className: 'text-muted-foreground text-xs',
+																	children: item.details,
+																}),
+														],
+													}
+												),
+												/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(
+													'span',
+													{
+														className: (0, utils_cjs_namespaceObject.cn)(
+															'rounded-full px-2 py-1 text-xs',
+															'Enabled' === item.status ||
+																'Active' === item.status ||
+																'active' === item.status ||
+																'Rendered' === item.status
+																? 'bg-green-100 text-green-800'
+																: 'bg-red-100 text-red-800'
+														),
+														children: item.status,
+													}
+												),
+											],
+										},
+										`${activeSection}-${item.title}`
+									)
+								),
+							}
+						),
+					}
+				),
+				/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)('div', {
+					className: 'border-t p-4',
+					children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)('div', {
+						className: 'flex flex-col gap-2',
+						children: [
+							/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(
+								button_cjs_namespaceObject.Button,
+								{
+									variant: 'outline',
+									size: 'sm',
+									onClick: handleResetConsent,
+									children: [
+										/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(
+											external_lucide_react_namespaceObject.RefreshCw,
+											{
+												className: 'mr-2 h-4 w-4',
+											}
+										),
+										'Reset Local Storage Consent',
+									],
+								}
+							),
+							/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(
+								button_cjs_namespaceObject.Button,
+								{
+									variant: 'outline',
+									size: 'sm',
+									onClick: handleOpenPrivacyModal,
+									children: [
+										/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(
+											external_lucide_react_namespaceObject.FileText,
+											{
+												className: 'mr-2 h-4 w-4',
+											}
+										),
+										'Open Privacy Settings',
+									],
+								}
+							),
+							/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(
+								button_cjs_namespaceObject.Button,
+								{
+									variant: 'outline',
+									size: 'sm',
+									onClick: handleOpenCookiePopup,
+									children: [
+										/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(
+											external_lucide_react_namespaceObject.Cookie,
+											{
+												className: 'mr-2 h-4 w-4',
+											}
+										),
+										'Open Cookie Popup',
+									],
+								}
+							),
+						],
+					}),
+				}),
+			],
+		}
+	);
+}
+var __webpack_export_target__ = exports;
+for (var __webpack_i__ in __webpack_exports__)
+	__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
+if (__webpack_exports__.__esModule)
+	Object.defineProperty(__webpack_export_target__, '__esModule', {
+		value: true,
+	});

package/dist/router/router.d.ts

@@ -0,0 +1,8 @@
+interface RouterProps {
+	onClose: () => void;
+}
+export declare function Router({
+	onClose,
+}: RouterProps): import('react/jsx-runtime').JSX.Element;
+export {};
+//# sourceMappingURL=router.d.ts.map

package/dist/router/router.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../src/router/router.tsx"],"names":[],"mappings":"AAgCA,UAAU,WAAW;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,wBAAgB,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,WAAW,2CA+H9C"}

package/dist/router/router.js

@@ -0,0 +1,261 @@
+'use client';
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from 'react/jsx-runtime';
+import * as __WEBPACK_EXTERNAL_MODULE_lucide_react_f128bbbb__ from 'lucide-react';
+import * as __WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__ from 'motion/react';
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from 'react';
+import * as __WEBPACK_EXTERNAL_MODULE__components_ui_button_js_a3aa5b55__ from '../components/ui/button.js';
+import * as __WEBPACK_EXTERNAL_MODULE__components_ui_expandable_tabs_js_ecd49e25__ from '../components/ui/expandable-tabs.js';
+import * as __WEBPACK_EXTERNAL_MODULE__components_ui_scroll_area_js_68572765__ from '../components/ui/scroll-area.js';
+import * as __WEBPACK_EXTERNAL_MODULE__dev_tool_js_649ec346__ from '../dev-tool.js';
+import * as __WEBPACK_EXTERNAL_MODULE__libs_utils_js_d86a90fb__ from '../libs/utils.js';
+const tabs = [
+	{
+		title: 'Consents',
+		icon: __WEBPACK_EXTERNAL_MODULE_lucide_react_f128bbbb__.ToggleLeft,
+	},
+	{
+		title: 'Compliance',
+		icon: __WEBPACK_EXTERNAL_MODULE_lucide_react_f128bbbb__.GanttChartSquare,
+	},
+];
+function Router({ onClose }) {
+	const privacyConsent = (0,
+	__WEBPACK_EXTERNAL_MODULE__dev_tool_js_649ec346__.getStore)();
+	const { clearAllData, setIsPrivacyDialogOpen, setShowPopup } = privacyConsent;
+	const [activeSection, setActiveSection] = (0,
+	__WEBPACK_EXTERNAL_MODULE_react__.useState)('Consents');
+	const handleTabChange = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(
+		(index) => {
+			if (null !== index) setActiveSection(tabs[index].title);
+		},
+		[]
+	);
+	const renderingState = [
+		{
+			componentName: 'MarketingContent',
+			consentType: 'marketing',
+		},
+		{
+			componentName: 'AnalyticsContent',
+			consentType: 'measurement',
+		},
+		{
+			componentName: 'PersonalizationComponent',
+			consentType: 'ad_personalization',
+		},
+	];
+	const contentItems =
+		'Consents' === activeSection
+			? Object.entries(privacyConsent.consents).map(([name, value]) => ({
+					title: name,
+					status: value ? 'Enabled' : 'Disabled',
+				}))
+			: 'Compliance' === activeSection
+				? Object.entries(privacyConsent.complianceSettings).map(
+						([region, settings]) => ({
+							title: region,
+							status: settings.enabled ? 'Active' : 'Inactive',
+						})
+					)
+				: 'Conditional' === activeSection
+					? renderingState.map((item) => ({
+							title: item.componentName,
+							status: 'Rendered',
+							details: `Requires: ${item.consentType}`,
+						}))
+					: [];
+	const handleResetConsent = (0,
+	__WEBPACK_EXTERNAL_MODULE_react__.useCallback)(() => {
+		clearAllData();
+		onClose();
+	}, [clearAllData, onClose]);
+	const handleOpenPrivacyModal = (0,
+	__WEBPACK_EXTERNAL_MODULE_react__.useCallback)(() => {
+		setIsPrivacyDialogOpen(true);
+	}, [setIsPrivacyDialogOpen]);
+	const handleOpenCookiePopup = (0,
+	__WEBPACK_EXTERNAL_MODULE_react__.useCallback)(() => {
+		setShowPopup(true);
+	}, [setShowPopup]);
+	return /*#__PURE__*/ (0,
+	__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(
+		__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment,
+		{
+			children: [
+				/*#__PURE__*/ (0,
+				__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)('div', {
+					className: 'border-b p-4',
+					children: /*#__PURE__*/ (0,
+					__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(
+						__WEBPACK_EXTERNAL_MODULE__components_ui_expandable_tabs_js_ecd49e25__.ExpandableTabs,
+						{
+							tabs: Array.from(tabs),
+							activeColor: 'text-primary',
+							className: 'border-muted',
+							onChange: handleTabChange,
+						}
+					),
+				}),
+				/*#__PURE__*/ (0,
+				__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(
+					__WEBPACK_EXTERNAL_MODULE__components_ui_scroll_area_js_68572765__.ScrollArea,
+					{
+						className: 'h-[300px]',
+						children: /*#__PURE__*/ (0,
+						__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(
+							__WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.motion.div,
+							{
+								className: 'space-y-2 p-4',
+								initial: {
+									opacity: 0,
+								},
+								animate: {
+									opacity: 1,
+								},
+								exit: {
+									opacity: 0,
+								},
+								children: contentItems.map((item, index) =>
+									/*#__PURE__*/ (0,
+									__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(
+										__WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.motion
+											.div,
+										{
+											className:
+												'flex items-center justify-between rounded-lg border bg-card p-3',
+											initial: {
+												opacity: 0,
+												y: 20,
+											},
+											animate: {
+												opacity: 1,
+												y: 0,
+											},
+											transition: {
+												delay: 0.05 * index,
+											},
+											children: [
+												/*#__PURE__*/ (0,
+												__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(
+													'div',
+													{
+														className: 'flex flex-col',
+														children: [
+															/*#__PURE__*/ (0,
+															__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(
+																'span',
+																{
+																	className: 'font-medium text-sm',
+																	children: item.title,
+																}
+															),
+															item.details &&
+																/*#__PURE__*/ (0,
+																__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(
+																	'span',
+																	{
+																		className: 'text-muted-foreground text-xs',
+																		children: item.details,
+																	}
+																),
+														],
+													}
+												),
+												/*#__PURE__*/ (0,
+												__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(
+													'span',
+													{
+														className: (0,
+														__WEBPACK_EXTERNAL_MODULE__libs_utils_js_d86a90fb__.cn)(
+															'rounded-full px-2 py-1 text-xs',
+															'Enabled' === item.status ||
+																'Active' === item.status ||
+																'active' === item.status ||
+																'Rendered' === item.status
+																? 'bg-green-100 text-green-800'
+																: 'bg-red-100 text-red-800'
+														),
+														children: item.status,
+													}
+												),
+											],
+										},
+										`${activeSection}-${item.title}`
+									)
+								),
+							}
+						),
+					}
+				),
+				/*#__PURE__*/ (0,
+				__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)('div', {
+					className: 'border-t p-4',
+					children: /*#__PURE__*/ (0,
+					__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)('div', {
+						className: 'flex flex-col gap-2',
+						children: [
+							/*#__PURE__*/ (0,
+							__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(
+								__WEBPACK_EXTERNAL_MODULE__components_ui_button_js_a3aa5b55__.Button,
+								{
+									variant: 'outline',
+									size: 'sm',
+									onClick: handleResetConsent,
+									children: [
+										/*#__PURE__*/ (0,
+										__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(
+											__WEBPACK_EXTERNAL_MODULE_lucide_react_f128bbbb__.RefreshCw,
+											{
+												className: 'mr-2 h-4 w-4',
+											}
+										),
+										'Reset Local Storage Consent',
+									],
+								}
+							),
+							/*#__PURE__*/ (0,
+							__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(
+								__WEBPACK_EXTERNAL_MODULE__components_ui_button_js_a3aa5b55__.Button,
+								{
+									variant: 'outline',
+									size: 'sm',
+									onClick: handleOpenPrivacyModal,
+									children: [
+										/*#__PURE__*/ (0,
+										__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(
+											__WEBPACK_EXTERNAL_MODULE_lucide_react_f128bbbb__.FileText,
+											{
+												className: 'mr-2 h-4 w-4',
+											}
+										),
+										'Open Privacy Settings',
+									],
+								}
+							),
+							/*#__PURE__*/ (0,
+							__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(
+								__WEBPACK_EXTERNAL_MODULE__components_ui_button_js_a3aa5b55__.Button,
+								{
+									variant: 'outline',
+									size: 'sm',
+									onClick: handleOpenCookiePopup,
+									children: [
+										/*#__PURE__*/ (0,
+										__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(
+											__WEBPACK_EXTERNAL_MODULE_lucide_react_f128bbbb__.Cookie,
+											{
+												className: 'mr-2 h-4 w-4',
+											}
+										),
+										'Open Cookie Popup',
+									],
+								}
+							),
+						],
+					}),
+				}),
+			],
+		}
+	);
+}
+export { Router };

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@c15t/dev-tools",
+  "version": "0.0.1-rc.3",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not op_mini all"
+  ],
+  "dependencies": {
+    "@radix-ui/react-accordion": "1.2.3",
+    "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-slot": "1.1.2",
+    "@radix-ui/react-switch": "1.1.3",
+    "@radix-ui/react-tooltip": "^1.1.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "2.1.1",
+    "lucide-react": "^0.475.0",
+    "motion": "^12.4.2",
+    "react-draggable": "^4.4.6",
+    "tailwind-merge": "3.0.1",
+    "tsc-alias": "^1.8.10",
+    "usehooks-ts": "^3.1.1",
+    "zustand": "^5.0.3",
+    "c15t": "0.0.1-rc.3"
+  },
+  "devDependencies": {
+    "postcss": "^8.5.2",
+    "@c15t/typescript-config": "0.0.1-beta.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "rslib build",
+    "check-types": "tsc --noEmit",
+    "dev": "rslib build --watch",
+    "fmt": "pnpm biome format --write .",
+    "lint": "pnpm biome lint ./src"
+  }
+}

package/rslib.config.ts

@@ -0,0 +1,28 @@
+import { pluginReact } from '@rsbuild/plugin-react';
+import { defineConfig } from '@rslib/core';
+
+export default defineConfig({
+	source: {
+		entry: {
+			index: ['./src/**'],
+		},
+	},
+	lib: [
+		{
+			bundle: false,
+			dts: true,
+			format: 'esm',
+		},
+		{
+			bundle: false,
+			dts: true,
+			format: 'cjs',
+		},
+	],
+	output: {
+		target: 'web',
+
+		cleanDistPath: true,
+	},
+	plugins: [pluginReact()],
+});

package/src/components/error-state.tsx

@@ -0,0 +1,44 @@
+import { AlertCircle } from 'lucide-react';
+import { motion } from 'motion/react';
+import { Alert, AlertDescription, AlertTitle } from './ui/alert';
+
+export function ErrorState({
+	namespace,
+}: {
+	namespace: string;
+}) {
+	return (
+		<motion.div
+			className="space-y-4 rounded-lg text-center text-base shadow-lg "
+			initial={{ opacity: 0 }}
+			animate={{ opacity: 1 }}
+			exit={{ opacity: 0 }}
+		>
+			<Alert variant="destructive" className="max-w-2xl rounded-t-none">
+				<AlertCircle className="h-4 w-4" />
+				<AlertTitle className="font-semibold text-lg">
+					SDK Initialization Failed
+				</AlertTitle>
+
+				<AlertDescription className="-ml-7 mt-2">
+					<p className="mb-2">
+						The c15t SDK could not be found in the global scope. This usually
+						means either:
+					</p>
+					<ul className="list-disc space-y-1 pl-6">
+						<li>The namespace has been changed from its default value</li>
+						<li>The SDK initialization failed</li>
+					</ul>
+					{namespace && (
+						<p className="mt-3 text-sm">
+							Current namespace:{' '}
+							<code className="rounded bg-red-100/10 px-1 py-0.5">
+								{namespace}
+							</code>
+						</p>
+					)}
+				</AlertDescription>
+			</Alert>
+		</motion.div>
+	);
+}

package/src/components/header.tsx

@@ -0,0 +1,28 @@
+import { Shield, X } from 'lucide-react';
+
+import { Button } from '../components/ui/button';
+
+interface HeaderProps {
+	onClose: () => void;
+}
+
+export function Header({ onClose }: HeaderProps) {
+	return (
+		<>
+			<div className="flex items-center justify-between border-b p-4">
+				<div className="flex items-center gap-2">
+					<Shield className="h-4 w-4" />
+					<span className="font-medium text-sm">c15t.com Dev Tool</span>
+				</div>
+				<Button
+					variant="ghost"
+					size="icon"
+					className="h-8 w-8"
+					onClick={onClose}
+				>
+					<X className="h-4 w-4" />
+				</Button>
+			</div>
+		</>
+	);
+}