panelset 0.5.0 → 0.5.2

package/src/docs/assets/scripts/main.js

@@ -1,7 +0,0 @@
-document.addEventListener('click', e => {
-	const button = e.target.closest('button[data-panel]');
-	if (!button) return;
-	const panelId = button.dataset.panel;
-	const container = document.getElementById(panelId)?.closest('[data-panelset]');
-	container?.panelSet?.show(panelId, true, { trigger: button });
-});

package/src/docs/assets/styles/_base.scss

@@ -1,13 +0,0 @@
-
-// Reset & Base
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  color: var(--doc-gray-800);
-  background: #fff;
-}

package/src/docs/assets/styles/_code.scss

@@ -1,121 +0,0 @@
-
-code, .code {
-	background: var(--doc-gray-100);
-	padding: 0.2em 0.4em;
-	border-radius: 3px;
-	font-size: 1em;
-	display: inline-block;
-}
-
-p code, li code , dl code, dt.code {
-	background: var(--doc-code-transparent);
-	padding: 0em 0.3em;
-	font-size: 0.9em ;
-}
-
-pre {
-	background: var(--doc-gray-50);
-	border: 1px solid var(--doc-gray-200);
-	border-radius: 6px;
-	padding: 1rem;
-	overflow-x: auto;
-	margin-bottom: 1rem;
-	
-	code {
-		background: none;
-		padding: 0;
-	}
-}
-
-dl.horizontal {
-	display: grid;
-	grid-template-columns: max-content auto;
-	gap: 1rem;
-}
-
-.code-block {
-	position: relative;
-	
-	.code-header {
-		background: var(--doc-gray-100);
-		padding: 0.5rem 0.5rem 0.5rem 1rem;
-		border: 1px solid var(--doc-gray-200);
-		border-bottom: none;
-		border-radius: 6px 6px 0 0;
-		font-size: 0.875rem;
-		font-weight: 600;
-		color: var(--doc-gray-600);
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-	
-	pre {
-		margin: 0;
-		border-radius: 0 0 6px 6px;
-	}
-
-	.lane:nth-child(even) & pre {
-		background: white;
-	}
-	.lane:nth-child(even) .example & pre {
-		background: var(--doc-gray-50);
-	}
-
-}
-
-// HIGHLIGHTING CODE
-
-.hljs-ln td.hljs-ln-numbers {
-	-webkit-touch-callout: none;
-	-webkit-user-select: none;
-	-khtml-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-	text-align: right;
-	color: #ccc;
-	padding-right: 1.5rem;
-}
-.hljs-ln-code {
-	padding-left: 10px;
-}
-
-pre code.hljs {
-	padding: 0;
-	background: none;
-}
-
-.hljs-attribute, 
-.hljs-doctag, 
-.hljs-keyword, 
-.hljs-meta .hljs-keyword, 
-.hljs-name, 
-.hljs-selector-tag, 
-.hljs-section, 
-.hljs-title {
-	font-weight: 600;
-}
-
-button.copy {
-	background: var(--doc-gray-200);
-	border: none;
-	border-radius: 3px;
-	padding: 0.2rem 0.5rem;
-	font-size: 1rem;
-	font-weight: 400;
-	color: var(--doc-gray-600);
-	cursor: pointer;
-
-	transition: background 0.2s, color 0.2s;
-	outline-width: 2px;
-	
-	&:hover {
-		background: white;
-		color: var(--doc-primary-dark);
-	}
-	&.copied {
-		background: var(--doc-primary);
-		color: white;
-	}
-}

package/src/docs/assets/styles/_demos.scss

@@ -1,180 +0,0 @@
-// Demo block
-
-.example {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  padding: var(--standard-padding);
-  border: 2px solid var(--doc-gray-200);
-  border-radius: 16px;
-  gap: 1rem;
-  background: white;
-
-  h2 {
-    margin: 0;
-    font-size: 1.5rem;
-
-  }
-
-  @media (max-width: 768px) {
-    padding: 1rem;
-  }
-
-  &.white {
-    background: white;
-  }
-  .code-block + * {
-    margin-top: 1rem;
-  }
-}
-
-.api {
-  gap: 0;
-  h3.code {
-    font-size: 1.2rem;
-    color: var(--doc-primary-dark);
-    margin-bottom: 0.5rem;
-  }
-  h4 {
-    font-size: 1.1rem;
-    margin-bottom: 0.25rem;
-    margin-top: 1rem;
-  }
-  dt {
-    font-weight: 600;
-    margin-top: 0.5rem;
-    font-size: 0.9em;
-  }
-}
-
-.card-row {
-  display: flex;
-  gap: 1.5rem;
-  flex-wrap: wrap;
-}
-
-.card {
-  flex: 1;
-  min-width: 200px;
-  border: 1px solid var(--doc-gray-200);
-  border-radius: 8px;
-  padding: 1rem;
-  background: var(--doc-gray-50);
-
-  h4 {
-    margin-top: 0;
-    margin-bottom: 0.5rem;
-  }
-}
-
-// Demo Styles
-.demo {
-  background: var(--doc-gray-50);
-  border-radius: 8px;
-  padding: var(--standard-padding);
-}
-
-.demo-controls {
-  display: flex;
-  gap: 1rem;
-  margin-bottom: 1.5rem;
-  flex-wrap: wrap;
-  &.center {
-    justify-content: center;
-  }
-
-  button {
-    background: var(--doc-primary);
-    color: white;
-    border: none;
-    padding: 0.5rem 1rem;
-    border-radius: 24px;
-    font-size: 1rem;
-    cursor: pointer;
-    transition: background 0.2s;
-
-    &:hover {
-      background: var(--doc-primary-dark);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-    &.secondary {
-      background: var(--doc-secondary);
-    }
-  }
-}
-
-// SLOW DATA
-
-.recipe {
-  display: flex;
-  gap: 24px;
-  align-items: center;
-
-  & > * {
-    flex: 1;
-  }
-}
-
-.recipe-meta {
-  display: flex;
-  gap: 16px;
-  margin: 16px 0;
-  padding: 12px;
-  background: white;
-  border-radius: 8px;
-}
-
-img.testimage {
-  display: block;
-  margin-top: 1em;
-  width: 100%;
-}
-
-img.recipe-image {
-  width: 100%;
-  max-width: 256px;
-  border-radius: 8px;
-  object-fit: cover;
-  margin: 0 auto;
-}
-
-.recipe-meta span {
-  font-size: 14px;
-}
-
-.recipe {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: 1fr;
-  grid-column-gap: 2rem;
-  grid-row-gap: 0px;
-  margin-bottom: 2rem;
-}
-
-img.recipe-image {
-  grid-area: 1 / 1 / 2 / 2;
-}
-.recipe-ingredients {
-  grid-area: 1 / 2 / 2 / 3;
-}
-
-@media (max-width: 768px) {
-  .recipe {
-    display: flex;
-    flex-direction: column;
-
-    img {
-      width: 100%;
-      max-width: unset;
-      max-height: 256px;
-    }
-  }
-  .recipe-ingredients {
-    margin-top: 2rem;
-    width: 100%;
-  }
-}

package/src/docs/assets/styles/_landingpage.scss

@@ -1,41 +0,0 @@
-// Landing Page Styles
-
-html.intro {
-	.docs-content {
-		// background: linear-gradient(135deg, var(--doc-primary) 0%, var(--doc-primary-dark) 100%);
-
-		// min-height: 100vh;
-		display: flex;
-		flex-direction: column;
-		padding: var(--standard-padding);
-		text-align: center;
-
-		.container {
-			width: 100%;
-			margin: auto auto;
-			gap: var(--standard-padding);
-		}
-		.example {
-			text-align: left;
-			border: none;
-			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-		}
-
-		p.lead {
-			font-size: 1.25rem;
-			opacity: 0.9;
-		}
-
-	}
-}
-
-.badge {
-	display: inline-block;
-	background: var(--doc-gray-200);
-	padding: 0.25rem 0.75rem;
-	border-radius: 999px;
-	font-size: 1rem;
-	font-weight: 400;
-	margin-bottom: 1rem;
-	line-height: 1.5em;
-}

package/src/docs/assets/styles/_layout.scss

@@ -1,80 +0,0 @@
-* {
-	box-sizing: border-box;
-}
-
-.docs-layout {
-	display: grid;
-	grid-template-columns: var(--doc-sidebar-width) minmax(0, 1fr);
-	min-height: 100vh;
-}
-
-.lane {
-	background: white;
-	&:nth-child(even) {
-		background: var(--doc-gray-50);
-	}
-	padding: 2rem 0;
-}
-.container {
-	max-width: 900px;
-	margin: 0 auto;
-	padding: 0 var(--standard-padding);
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-
-	& + & {
-		margin-top: 2rem;
-	}
-}
-
-
-.docs-content {
-	width: 100% !important;
-	display: flex;
-	flex: 1;
-	flex-direction: column;
-
-	.page-header {
-
-		.lead {
-			font-size: 1.25rem;
-			color: var(--doc-gray-600);
-		}
-	}
-}
-
-// Responsive
-@media (max-width: 768px) {
-
-
-
-  .docs-layout {
-    grid-template-columns: 1fr;
-	width: 100% !important;
-  }
-  .docs-content {
-	width: 100% !important;
-	min-width: 300px;
-}
-  
-//   .docs-sidebar {
-//     position: static;
-//     height: auto;
-//     border-right: none;
-//     border-bottom: 1px solid var(--doc-gray-200);
-// 	// padding: 2rem 1rem;
-//   }
-}
-
-// // Responsive
-// @media (min-width: 769px) {
-
-//   .docs-sidebar {
-//     position: static;
-//     height: auto;
-//     border-right: none;
-//     border-bottom: 1px solid var(--doc-gray-200);
-// 	padding: 2rem 1rem;
-//   }
-// }

package/src/docs/assets/styles/_sidebar.scss

@@ -1,67 +0,0 @@
-
-.docs-sidebar {
-	background: var(--doc-gray-100);
-	border-bottom: 1px solid var(--doc-gray-200);
-	padding: var(--standard-padding);
-	// position: sticky;
-	// top: 0;
-	// height: 100vh;
-	// overflow-y: auto;
-
-
-	// Responsive
-	@media (min-width: 769px) {
-		position: sticky;
-		border-right: 1px solid var(--doc-gray-200);
-		top: 0;
-		height: 100vh;
-	}
-
-	.logo {
-		font-size: 1.25rem;
-		font-weight: 500;
-		margin-bottom: 2rem;
-		color: var(--doc-primary);
-	}
-
-	nav {
-		ul {
-			list-style: none;
-			display: flex;
-			flex-direction: column;
-			gap: 0.5rem;
-
-			a {
-				display: block;
-				padding: 0.5rem 0.75rem;
-				border-radius: 6px;
-				color: var(--doc-gray-600);
-
-				&:hover {
-					background: white;
-					color: var(--doc-primary);
-					text-decoration: none;
-  					box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
-				}
-
-				&.active {
-					background: var(--doc-primary);
-					color: white;
-				}
-			}
-		}
-
-		.nav-section {
-			margin-top: 1.5rem;
-
-			h4 {
-				font-size: 0.75rem;
-				text-transform: uppercase;
-				letter-spacing: 0.05em;
-				color: var(--doc-gray-600);
-				margin: 0 0 0.5rem;
-				padding: 0 0.75rem;
-			}
-		}
-	}
-}

package/src/docs/assets/styles/_typography.scss

@@ -1,116 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
-
-@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");
-
-
-
-
-// Typography
-
-body {
-	font-family: "Source Sans 3", sans-serif;
-	font-weight: 400;
-	font-size: 1rem;
-	line-height: 1.5;
-	color: var(--doc-gray-800);
-}
-
-code, .code {
-	font-family: "JetBrains Mono", monospace;
-	.code-block & {
-		line-height: 1.6;
-		font-size: 0.9em;
-	}
-}
-
-h1, h2, h3, h4 {
-	line-height: 1.2;
-	&:first-child {
-		margin-top: 0;
-	}
-}
-
-h1 {
-	font-weight: 300;
-}
-h2, h3, h4 {
-	font-weight: 500;
-}
-
-h1 {
-	font-size: 3rem;
-}
-h2 {
-	font-size: 1.7rem;
-}
-h3 {
-	font-size: 1.25rem;
-}
-h4 {
-	font-size: 1.25rem;
-}
-
-a {
-	color: var(--doc-primary);
-	text-decoration: none;
-	&:hover {
-		text-decoration: underline;
-	}
-}
-p a, dl a {
-	text-decoration: underline;
-}
-
-
-.example, .lane {
-	ul, ol {
-		list-style: none;
-		position: relative;
-		padding: 0 0 0 1em;
-		margin: 0;
-		counter-reset: list;
-
-		* + & {
-			margin-top: var(--spacing-md);
-		}
-
-		li {
-			padding-left: var(--spacing-lg);
-
-			& + li {
-				margin-top: 0.5em;
-			}
-
-			&::before {
-				color: var(--doc-primary);
-				position: absolute;
-			}
-		}
-	}
-
-	ul li::before {
-		content: "•";
-		left: 1px;
-		font-weight: bold;
-	}
-
-	ol li {
-		margin-bottom: 0;
-
-		&::before {
-			counter-increment: list;
-			content: counter(list) ".";
-			left: 0;
-			font-weight: 500;
-		}
-	}
-}
-
-.docs-sidebar li a, button, .btn {
-	line-height: 1.5rem;
-
-	&:focus-visible {
-		outline: 3px solid var(--doc-primary);
-		outline-offset: 2px;
-	}
-}

package/src/docs/assets/styles/_variables.scss

@@ -1,32 +0,0 @@
-:root {
-  --doc-primary: #3b82f6;
-  --doc-primary-dark: #2563eb;
-
-  --doc-secondary: rgb(15, 120, 103);
-
-  --doc-gray-50: #f9fafb;
-  --doc-gray-100: #f3f4f6;
-  --doc-gray-200: #e5e7eb;
-  --doc-gray-600: #4b5563;
-  --doc-gray-900: #111827;
-  --doc-green-500: #009500;
-  --doc-max-width: 1000px;
-  --doc-sidebar-width: 200px;
-  --doc-demo-color: #009300;
-  --doc-code-transparent: #a5a5a533;
-
-  --padding-large: 1.25rem;
-  --padding-medium: 1rem;
-  --padding-small: 0.75rem;
-
-  --standard-padding: var(--padding-small);
-
-  @media (min-width: 480px) {
-    --standard-padding: var(--padding-medium);
-  }
-  @media (min-width: 769px) {
-    --standard-padding: var(--padding-large);
-    --doc-sidebar-width: 256px;
-  }
-
-}

package/src/docs/assets/styles/docs.scss

@@ -1,64 +0,0 @@
-/**
- * Documentation Styles
- * These styles are only for the docs site, not part of the library
- */
-
-@use "_variables.scss";
-@use "_base.scss";
-@use "_typography.scss";
-@use "_code.scss";
-@use "_demos.scss";
-@use "_layout.scss";
-@use "_landingpage.scss";
-@use "_sidebar.scss";
-
-// Variables
-// [data-panelset = "true"] {
-//   border: 1px dashed var(--doc-demo-color); /* Show that the PanelSet is initialized for this container */
-// }
-
-.panel-wrapper h3 {
-  margin-bottom: 0.5rem;
-  font-weight: 500;
-}
-
-// Utility classes
-.text-center { text-align: center; }
-.text-muted { color: var(--doc-gray-600); }
-.mt-0 { margin-top: 0 !important; }
-.mb-2 { margin-bottom: 2rem; }
-.badge {
-  display: inline-block;
-  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
-  font-size: 0.875rem;
-  font-weight: 600;
-  
-  &.badge-new {
-    background: #10b981;
-    color: white;
-  }
-  
-  &.badge-full {
-    background: var(--doc-primary);
-    color: white;
-  }
-}
-
-// Responsive
-@media (max-width: 768px) {
-  .docs-layout {
-    grid-template-columns: 1fr;
-  }
-  
-  .docs-sidebar {
-    position: static;
-    height: auto;
-    border-right: none;
-    border-bottom: 1px solid var(--doc-gray-200);
-  }
-  
-  .version-picker {
-    grid-template-columns: 1fr;
-  }
-}