@aejkatappaja/phantom-ui 0.1.1 → 0.2.2

package/README.md

@@ -1,3 +1,25 @@
+<!--
+```
+<custom-element-demo>
+  <template>
+    <script src="https://cdn.jsdelivr.net/npm/@aejkatappaja/phantom-ui/dist/phantom-ui.cdn.js"></script>
+    <phantom-ui loading>
+      <div style="background:#16213e;border-radius:12px;padding:20px;width:320px;color:#e0e0e0;font-family:system-ui">
+        <div style="display:flex;align-items:center;gap:12px;margin-bottom:16px">
+          <div style="width:48px;height:48px;border-radius:50%;background:#0f3460"></div>
+          <div>
+            <h3 style="margin:0 0 4px">Sarah Chen</h3>
+            <p style="margin:0;font-size:13px;color:#8899aa">Senior Engineer</p>
+          </div>
+        </div>
+        <p style="font-size:14px;line-height:1.5">Building scalable distributed systems and mentoring junior engineers.</p>
+      </div>
+    </phantom-ui>
+  </template>
+</custom-element-demo>
+```
+-->
+
 <p align="center">
   <img src="logo-phantom.svg" alt="phantom-ui" width="200" />
 </p>
@@ -7,13 +29,24 @@
 </p>
 
 <p align="center">
-  <a href="https://www.npmjs.com/package/phantom-ui"><img src="https://img.shields.io/npm/v/phantom-ui.svg?style=flat-square" alt="npm version" /></a>
-  <a href="https://bundlephobia.com/package/phantom-ui"><img src="https://img.shields.io/bundlephobia/minzip/phantom-ui?style=flat-square" alt="bundle size" /></a>
-  <a href="https://github.com/anthropics/phantom-ui/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/phantom-ui?style=flat-square" alt="license" /></a>
+  <a href="https://www.npmjs.com/package/@aejkatappaja/phantom-ui"><img src="https://img.shields.io/npm/v/@aejkatappaja/phantom-ui.svg?style=flat-square" alt="npm version" /></a>
+  <img src="https://img.shields.io/badge/minzipped-~8kb-blue?style=flat-square" alt="bundle size" />
+  <a href="https://github.com/Aejkatappaja/phantom-ui/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@aejkatappaja/phantom-ui?style=flat-square" alt="license" /></a>
+  <a href="https://www.webcomponents.org/element/@aejkatappaja/phantom-ui"><img src="https://img.shields.io/badge/webcomponents.org-published-blue.svg?style=flat-square" alt="Published on webcomponents.org" /></a>
 </p>
 
 ---
 
+<br />
+
+<div align="center">
+  <picture>
+    <img src="preview.gif" alt="phantom-ui demo" width="400" />
+  </picture>
+</div>
+
+<br />
+
 Stop building skeleton screens by hand. Wrap your real UI in `<phantom-ui>` and it generates shimmer placeholders automatically by measuring your actual DOM at runtime.
 
 No separate skeleton components to maintain. No copy-pasting layouts. The real component _is_ the skeleton template.
@@ -29,16 +62,16 @@ Because it is a standard Web Component (built with Lit), it works in React, Vue,
 ## Install
 
 ```bash
-bun add phantom-ui     # bun
-npm install phantom-ui # npm
-pnpm add phantom-ui    # pnpm
-yarn add phantom-ui    # yarn
+bun add @aejkatappaja/phantom-ui     # bun
+npm install @aejkatappaja/phantom-ui # npm
+pnpm add @aejkatappaja/phantom-ui    # pnpm
+yarn add @aejkatappaja/phantom-ui    # yarn
 ```
 
 Or drop in a script tag with no build step:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/phantom-ui/dist/phantom-ui.cdn.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aejkatappaja/phantom-ui/dist/phantom-ui.cdn.js"></script>
 ```
 
 ## Quick start
@@ -60,7 +93,7 @@ Set `loading` to show the shimmer. Remove it to reveal the real content.
 ### React
 
 ```tsx
-import "phantom-ui";
+import "@aejkatappaja/phantom-ui";
 
 function ProfileCard({ user, isLoading }: Props) {
   return (
@@ -79,7 +112,7 @@ function ProfileCard({ user, isLoading }: Props) {
 
 ```vue
 <script setup lang="ts">
-import "phantom-ui";
+import "@aejkatappaja/phantom-ui";
 
 const props = defineProps<{ loading: boolean }>();
 </script>
@@ -99,7 +132,7 @@ const props = defineProps<{ loading: boolean }>();
 
 ```svelte
 <script lang="ts">
-  import "phantom-ui";
+  import "@aejkatappaja/phantom-ui";
 
   export let loading = true;
 </script>
@@ -117,7 +150,7 @@ const props = defineProps<{ loading: boolean }>();
 
 ```typescript
 import { Component, signal, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
-import "phantom-ui";
+import "@aejkatappaja/phantom-ui";
 
 @Component({
   selector: "app-profile",
@@ -141,7 +174,7 @@ export class ProfileComponent {
 
 ```tsx
 import { createSignal } from "solid-js";
-import "phantom-ui";
+import "@aejkatappaja/phantom-ui";
 
 function ProfileCard() {
   const [loading, setLoading] = createSignal(true);
@@ -168,7 +201,7 @@ The component needs browser APIs to measure the DOM. Import it client-side only:
 import { useEffect } from "react";
 
 export default function Page() {
-  useEffect(() => { import("phantom-ui"); }, []);
+  useEffect(() => { import("@aejkatappaja/phantom-ui"); }, []);
   return <phantom-ui loading>...</phantom-ui>;
 }
 ```
@@ -176,7 +209,7 @@ export default function Page() {
 ```vue
 <!-- Nuxt -->
 <script setup>
-onMounted(() => import("phantom-ui"));
+onMounted(() => import("@aejkatappaja/phantom-ui"));
 </script>
 
 <template>
@@ -190,7 +223,7 @@ onMounted(() => import("phantom-ui"));
 <!-- SvelteKit -->
 <script>
   import { onMount } from "svelte";
-  onMount(() => import("phantom-ui"));
+  onMount(() => import("@aejkatappaja/phantom-ui"));
 </script>
 ```
 
@@ -205,10 +238,10 @@ Vue, Svelte, and Angular work out of the box without any type declaration.
 If the postinstall did not run (CI, monorepos, `--ignore-scripts`), you can generate it manually:
 
 ```bash
-npx phantom-ui init    # npm
-bunx phantom-ui init   # bun
-pnpx phantom-ui init   # pnpm
-yarn dlx phantom-ui init  # yarn
+npx @aejkatappaja/phantom-ui init    # npm
+bunx @aejkatappaja/phantom-ui init   # bun
+pnpx @aejkatappaja/phantom-ui init   # pnpm
+yarn dlx @aejkatappaja/phantom-ui init  # yarn
 ```
 
 <details>
@@ -217,7 +250,7 @@ yarn dlx phantom-ui init  # yarn
 **React**
 
 ```typescript
-import type { PhantomUiAttributes } from "phantom-ui";
+import type { PhantomUiAttributes } from "@aejkatappaja/phantom-ui";
 
 declare module "react/jsx-runtime" {
   export namespace JSX {
@@ -231,7 +264,7 @@ declare module "react/jsx-runtime" {
 **Solid**
 
 ```typescript
-import type { SolidPhantomUiAttributes } from "phantom-ui";
+import type { SolidPhantomUiAttributes } from "@aejkatappaja/phantom-ui";
 
 declare module "solid-js" {
   namespace JSX {
@@ -245,7 +278,7 @@ declare module "solid-js" {
 **Qwik**
 
 ```typescript
-import type { PhantomUiAttributes } from "phantom-ui";
+import type { PhantomUiAttributes } from "@aejkatappaja/phantom-ui";
 
 declare module "@builder.io/qwik" {
   namespace QwikJSX {

package/package.json

@@ -1,7 +1,11 @@
 {
 	"name": "@aejkatappaja/phantom-ui",
-	"version": "0.1.1",
+	"version": "0.2.2",
 	"description": "Structure-aware shimmer skeleton loader as a universal Web Component built with Lit. Works with React, Vue, Svelte, Angular, Solid, or vanilla JS.",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Aejkatappaja/phantom-ui"
+	},
 	"type": "module",
 	"main": "dist/phantom-ui.js",
 	"module": "dist/phantom-ui.js",
@@ -63,8 +67,6 @@
 	},
 	"customElements": "custom-elements.json",
 	"lint-staged": {
-		"*.{ts,mjs}": [
-			"biome check --write --no-errors-on-unmatched"
-		]
+		"*.{ts,mjs}": ["biome check --write --no-errors-on-unmatched"]
 	}
 }

package/src/cli/init.mjs

@@ -6,7 +6,7 @@ import { dirname, join, resolve } from "node:path";
 const FILENAME = "phantom-ui.d.ts";
 
 const templates = {
-	react: `import type { PhantomUiAttributes } from "phantom-ui";
+	react: `import type { PhantomUiAttributes } from "@aejkatappaja/phantom-ui";
 
 declare module "react/jsx-runtime" {
 \texport namespace JSX {
@@ -16,7 +16,7 @@ declare module "react/jsx-runtime" {
 \t}
 }
 `,
-	solid: `import type { SolidPhantomUiAttributes } from "phantom-ui";
+	solid: `import type { SolidPhantomUiAttributes } from "@aejkatappaja/phantom-ui";
 
 declare module "solid-js" {
 \tnamespace JSX {
@@ -26,7 +26,7 @@ declare module "solid-js" {
 \t}
 }
 `,
-	qwik: `import type { PhantomUiAttributes } from "phantom-ui";
+	qwik: `import type { PhantomUiAttributes } from "@aejkatappaja/phantom-ui";
 
 declare module "@builder.io/qwik" {
 \tnamespace QwikJSX {