drab 4.1.1 → 4.1.3

package/README.md

@@ -114,18 +114,18 @@ Since this is an unstyled library, simple components like a badge that can be ea
 
 ### Local Development
 
-Contribute to the project, or use **drab** as a template for another component library. This library is built with SvelteKit, TypeScript, and npm. The package contents are located in `src/lib`, the site is contained within `src/routes` and `src/site`. If you are using this project as a template, be sure to [update the adapter](https://kit.svelte.dev/docs/adapters) based on how you deploy.
+Contribute to the project, or use **drab** as a template for another component library. This library is built with SvelteKit, and TypeScript. The package contents are located in `src/lib`, the site is contained within `src/routes` and `src/site`. If you are using this project as a template, be sure to [update the adapter](https://kit.svelte.dev/docs/adapters) based on how you deploy.
 
 #### Make changes
 
 1. Clone the [repository](https://github.com/rossrobino/drab)
-2. `npm install`
-3. `npm run dev -- --open`
+2. `bun i`
+3. `bun run dev`
 
 #### Add or edit a component
 
 1. Add or edit the component in `src/lib/components/Component.svelte` - if you're adding a new one, copy and paste an existing one to get started with the conventions
 2. Add or edit the example in `src/routes/docs/Component/+page.svelte`
-3. Document the component with an `@component` comment, include a description, and the `@slots` available. Add a placeholder `@props` and `@example` to the comment. These sections will be generated based on the JSDoc comment above each prop and the example route upon running `npm run doc`
+3. Document the component with an `@component` comment, include a description, and the `@slots` available. Add a placeholder `@props` and `@example` to the comment. These sections will be generated based on the JSDoc comment above each prop and the example route upon running `bun doc`
 4. If new, add the link to `src/site/components/NavItems.svelte`
-5. Run `npm run build` to verify your build
+5. Run `bun package` to verify your build

package/dist/components/ContextMenu.svelte

@@ -28,7 +28,7 @@ Displays when the `target` element is right clicked, or long pressed on mobile.
 	let target: HTMLButtonElement;
 </script>
 
-<div class="mb-8 flex justify-center rounded border bg-muted p-12">
+<div class="bg-muted mb-8 flex justify-center rounded border p-12">
 	<div>Parent right click</div>
 	<ContextMenu class="z-10">
 		<div class="card flex w-48 flex-col gap-2 p-2 shadow-md">

package/dist/components/ContextMenu.svelte.d.ts

@@ -46,7 +46,7 @@ export type ContextMenuSlots = typeof __propDef.slots;
  * let target: HTMLButtonElement;
  * </script>
  *
- * <div class="mb-8 flex justify-center rounded border bg-muted p-12">
+ * <div class="bg-muted mb-8 flex justify-center rounded border p-12">
  * <div>Parent right click</div>
  * <ContextMenu class="z-10">
  * 	<div class="card flex w-48 flex-col gap-2 p-2 shadow-md">

package/dist/components/Editor.svelte

@@ -37,7 +37,7 @@
 <Editor
 	classButton="button button-primary"
 	classControls="flex gap-2"
-	classTextarea="input w-full h-36 mb-2"
+	classTextarea="input h-36 mb-2"
 	placeholderTextarea="asterisk: ctrl+i, anchor: ctrl+["
 	contentElements={[
 		{
@@ -227,6 +227,24 @@ ${repeat}`,
         });
       }, 0);
     }
+  } else if (e.ctrlKey || e.metaKey) {
+    if (textArea.selectionStart === textArea.selectionEnd) {
+      if (e.key === "c" || e.key === "x") {
+        e.preventDefault();
+        const { lines, lineNumber, columnNumber } = getLineInfo();
+        await navigator.clipboard.writeText(
+          `${lineNumber === 0 && e.key === "x" ? "" : "\n"}${lines[lineNumber]}`
+        );
+        if (e.key === "x") {
+          const newPos = textArea.selectionStart - columnNumber;
+          lines.splice(lineNumber, 1);
+          valueTextarea = lines.join("\n");
+          setTimeout(() => {
+            textArea.setSelectionRange(newPos, newPos);
+          }, 0);
+        }
+      }
+    }
   } else {
     const nextCharIsClosing = Object.values(keyPairs).includes(nextChar);
     const highlighted = textArea.selectionStart !== textArea.selectionEnd;

package/dist/components/Editor.svelte.d.ts

@@ -76,7 +76,7 @@ export type EditorSlots = typeof __propDef.slots;
  * <Editor
  * classButton="button button-primary"
  * classControls="flex gap-2"
- * classTextarea="input w-full h-36 mb-2"
+ * classTextarea="input h-36 mb-2"
  * placeholderTextarea="asterisk: ctrl+i, anchor: ctrl+["
  * contentElements={[
  * 	{

package/dist/components/FrettedChord.svelte

@@ -24,7 +24,7 @@ Try it out and generate code: [FrettedChord Creator](https://svelte.dev/repl/577
 </script>
 
 <FrettedChord
-	class="font-mono text-foreground"
+	class="font-mono"
 	name="D"
 	notes={[
 		{

package/dist/components/FrettedChord.svelte.d.ts

@@ -47,7 +47,7 @@ export type FrettedChordSlots = typeof __propDef.slots;
  * </script>
  *
  * <FrettedChord
- * class="font-mono text-foreground"
+ * class="font-mono"
  * name="D"
  * notes={[
  * 	{

package/dist/components/FullscreenButton.svelte

@@ -31,7 +31,7 @@ Make the document or a `target` element fullscreen.
 
 <FullscreenButton class="button button-primary" />
 
-<div bind:this={target} class="card mt-8 bg-muted">
+<div bind:this={target} class="card bg-muted mt-8">
 	<div class="mb-2">Target element</div>
 	<FullscreenButton {target} class="button button-primary">
 		Enable Element Fullscreen

package/dist/components/FullscreenButton.svelte.d.ts

@@ -49,7 +49,7 @@ export type FullscreenButtonSlots = typeof __propDef.slots;
  *
  * <FullscreenButton class="button button-primary" />
  *
- * <div bind:this={target} class="card mt-8 bg-muted">
+ * <div bind:this={target} class="card bg-muted mt-8">
  * <div class="mb-2">Target element</div>
  * <FullscreenButton {target} class="button button-primary">
  * 	Enable Element Fullscreen

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "drab",
-	"version": "4.1.1",
+	"version": "4.1.3",
 	"description": "An Unstyled Svelte Component Library",
 	"keywords": [
 		"components",
@@ -27,20 +27,10 @@
 		"url": "https://robino.dev"
 	},
 	"repository": "github:rossrobino/drab",
-	"scripts": {
-		"dev": "vite dev",
-		"host": "vite dev --host",
-		"build": "npm run doc && vite build && npm run package",
-		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "npm run package",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --check . && eslint .",
-		"format": "prettier --write . --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss",
-		"pub": "npm i && npm run doc && npm publish --access public",
-		"doc": "npm run format && node src/scripts/documentProps.js && node src/scripts/documentExamples.js && node src/scripts/copyReadMe.js"
-	},
+	"type": "module",
+	"sideEffects": false,
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
@@ -50,39 +40,45 @@
 	"files": [
 		"dist"
 	],
-	"sideEffects": false,
+	"scripts": {
+		"dev": "vite dev",
+		"host": "vite dev --host",
+		"build": "vite build",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "bun package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write .",
+		"pub": "bun i && bun doc && bun package && npm publish --access public",
+		"doc": "bun format && node src/scripts/documentProps.js && node src/scripts/documentExamples.js && node src/scripts/copyReadMe.js"
+	},
 	"dependencies": {
-		"svelte": "^4.2.0"
+		"svelte": "^4.2.1"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-vercel": "^3.0.3",
-		"@sveltejs/kit": "^1.25.0",
+		"@sveltejs/kit": "^1.25.1",
 		"@sveltejs/package": "^2.2.2",
 		"@tailwindcss/typography": "^0.5.10",
-		"@types/node": "^20.6.0",
-		"@typescript-eslint/eslint-plugin": "^6.7.0",
-		"@typescript-eslint/parser": "^6.7.0",
-		"autoprefixer": "^10.4.15",
-		"eslint": "^8.49.0",
+		"@types/node": "^20.8.2",
+		"@typescript-eslint/eslint-plugin": "^6.7.4",
+		"@typescript-eslint/parser": "^6.7.4",
+		"autoprefixer": "^10.4.16",
+		"eslint": "^8.50.0",
 		"eslint-config-prettier": "^9.0.0",
-		"eslint-plugin-svelte": "^2.33.1",
-		"highlight.js": "^11.8.0",
-		"marked": "^9.0.0",
-		"marked-highlight": "^2.0.6",
-		"marked-smartypants": "^1.1.3",
-		"postcss": "^8.4.29",
+		"eslint-plugin-svelte": "^2.34.0",
 		"prettier": "^3.0.3",
 		"prettier-plugin-svelte": "^3.0.3",
-		"prettier-plugin-tailwindcss": "^0.5.4",
-		"publint": "^0.2.2",
-		"svelte-check": "^3.5.1",
+		"prettier-plugin-tailwindcss": "^0.5.5",
+		"publint": "^0.2.3",
+		"robino": "^0.0.39",
+		"svelte-check": "^3.5.2",
 		"tailwindcss": "^3.3.3",
 		"tslib": "^2.6.2",
 		"typescript": "^5.2.2",
-		"uico": "^0.1.3",
-		"vite": "^4.4.9"
-	},
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module"
+		"uico": "^0.1.5",
+		"vite": "^4.4.11"
+	}
 }