shannonhochkins
diff --git a/‎.storybook/global.css‎
Lines changed: 7 additions & 0 deletions b/‎.storybook/global.css‎
Lines changed: 7 additions & 0 deletions
diff --git a/‎.storybook/manager.ts‎
Lines changed: 3 additions & 0 deletions b/‎.storybook/manager.ts‎
Lines changed: 3 additions & 0 deletions
diff --git a/‎.storybook/preview.tsx‎
Lines changed: 25 additions & 25 deletions b/‎.storybook/preview.tsx‎
Lines changed: 25 additions & 25 deletions
diff --git a/‎CHANGELOG.md‎
Lines changed: 46 additions & 0 deletions b/‎CHANGELOG.md‎
Lines changed: 46 additions & 0 deletions
diff --git a/‎DEPLOY.md‎
Lines changed: 23 additions & 0 deletions b/‎DEPLOY.md‎
Lines changed: 23 additions & 0 deletions
@@ -31,3 +31,10 @@ mark {
 .sbdocs-content {
  max-width: 100% !important;
 }
+
+.docblock-argstable-body tr table tbody tr td:has(strong) {
+  background: rgb(255, 208, 208) !important;
+  border: none !important;
+  padding: 4px !important;
+
+}
@@ -21,6 +21,9 @@ addons.setConfig({
         if (item.type === 'root' && item.name === 'components') {
           return '@hakit/components';
         }
+        if (item.type === 'root' && item.name === 'editor') {
+          return '@hakit/editor';
+        }
         return item.name;
       }
     }
 
@@ -75,32 +75,32 @@ export default {
     },
     options: {
       storySort: (a, b) => {
-        const splitAndTakeFirst = (str, delimiter) => str.split(delimiter)[0];
-        const getOrderIndex = (order, item) => order.indexOf(item);
-        const getNumericPrefix = (str) => parseInt(str.match(/\d+/)?.[0] || "-1", 10);
-      
-        const aTitle = splitAndTakeFirst(a.title, '/');
-        const bTitle = splitAndTakeFirst(b.title, '/');
-      
-        const order = ['INTRODUCTION', 'COMPONENTS', 'HOOKS', 'ADVANCED'];
-      
-        const aOrderIndex = getOrderIndex(order, aTitle);
-        const bOrderIndex = getOrderIndex(order, bTitle);
-      
-        if (aOrderIndex !== -1 && bOrderIndex !== -1) {
-          if (aOrderIndex === bOrderIndex) {
-            // Both have the same top-level title. Sort based on the numeric prefix in importPath.
-            const aNumericPrefix = getNumericPrefix(a.importPath);
-            const bNumericPrefix = getNumericPrefix(b.importPath);
-            return aNumericPrefix - bNumericPrefix;
-          }
-          return aOrderIndex - bOrderIndex;
+        // return aTitle.localeCompare(bTitle);
+        const splitAndTakeFirst = (str) => str.split('/')[0];
+        const stripGroup = (full, group) => full.replace(`${group}/`, '');
+
+        const groupOrder = ['INTRODUCTION', 'EDITOR', 'COMPONENTS', 'HOOKS'];
+
+        const aGroup = splitAndTakeFirst(a.title).toUpperCase();
+        const bGroup = splitAndTakeFirst(b.title).toUpperCase();
+
+        const aIdx = groupOrder.indexOf(aGroup);
+        const bIdx = groupOrder.indexOf(bGroup);
+
+        // if they’re in different top-level groups, respect custom order
+        if (aIdx !== bIdx) {
+          // put unknown groups at the end
+          const ai = aIdx === -1 ? Infinity : aIdx;
+          const bi = bIdx === -1 ? Infinity : bIdx;
+          return ai - bi;
         }
-      
-        if (aOrderIndex !== -1) return -1;
-        if (bOrderIndex !== -1) return 1;
-      
-        return aTitle.localeCompare(bTitle);
+
+        // same group: strip off the "HOOKS/" (or "COMPONENTS/", etc.) prefix
+        const aName = stripGroup(a.title, aGroup);
+        const bName = stripGroup(b.title, bGroup);
+
+        // then just do a normal string compare
+        return aName.localeCompare(bName);
       },
     },
     docs: {
 
@@ -1,3 +1,49 @@
+# 5.1.1
+
+### @hakit/components
+- IMPROVEMENT - Various updates to performance in a few components by updating the zustand store to v5 from v4
+- BUGFIX - TimeCard - was logging missing keys for the formatter tokens, this is now resolved
+- BUGFIX / IMPROVEMENT - All Cards - The scale effect will now only be applied when the card itself is being clicked, if there's buttons with click actions within the card the scale effect will no longer scale whilst these are being tapped, whilst being tapped a class will be added to the base-card of `card-base-active`
+- BUGFIX - MediaPlayerCard - You could open infinite modals by launching another modal by long pressing the media player card in the initial popup, this has been fixed too. The background image of the artwork that is playing is now a separate element instead of a background image on the main card.
+- NEW - disableModal - A flag you can provide to call cards that support entity popups to disable the long press modal functionality and control your own functionality via the `longPressCallback` prop.
+- BUGFIX - CalendarCard - Fixed a bug that was causing the calendar card to re-render too many times.
+- NEW - refCallback - A new method to get the ref element of the base card
+- BUGFIX - TimeCard - was previously not setting keys on the fragment elements that make up the "time" value.
+
+
+
+### @hakit/core
+- NEW - useUsers - a new hook to retrieve all users from the home assistant instance, this will return an array of users with their details, this is useful if you want to display a list of users in your dashboard or use it for other purposes.
+- NEW - useEntities - a new hook to subscribe to multiple entities at once, this will return an array of entities that match the provided entity ids, this is useful if you want to subscribe to multiple entities at once and get their updates in real-time.
+- IMPROVEMENT - useCamera - updated to support [changes](https://github.com/shannonhochkins/ha-component-kit/pull/273) home assistant made back in November last year, thanks to @kdkavanagh for this one!
+- IMPROVEMENT - zustand has been updated to v5, this should improve performance and reduce the amount of re-renders in the application
+- IMPROVEMENT - the connection methods and re-authentication methods have received some love, the web sockets will now be automatically suspended when on an inactive tab ([home assistant does this too](https://github.com/home-assistant/frontend/blob/8eb7fe8b0aa5ce2651e4ee8aa10ecbf3ec899847/src/layouts/home-assistant.ts#L283)), as well as "frozen" tabs/browsers, and will resume when the tab is active again, this should improve performance on slower devices, messages will be queued whilst inactive and will be sent when the tab is active again.
+- NEW - To add to the above, from the store you can now access `connectionStatus` to determine the current state of the connection via `useStore(state => state.connectionStatus)`, this will return a string with the current status of the connection, this is useful if you want to display a message to the user when the connection is lost or re-established, if you want to configure the suspend/resume options you can pass through `handleResumeOptions` via the `options` prop on `HassConnect`
+- IMPROVEMENT - Removed some packages that are no longer needed, this should reduce the bundle size of the core package and improve performance.
+- DEPRECATED - useStore().lastUpdated and useStore().setLastUpdated - these were remnants of the old store implementation, there was nothing using, or even setting this value so i've decided to remove it.
+- IMPROVEMENT - Many optimisations to `useEntity`, much faster updates without throttling/debouncing, however there's been some side effects to this
+   - DEPRECATED - throttle - no longer needed as we update as often as we can
+- BREAKING - home assistant has removed the "kelvin" value you can pass to set the temperature of a light entity and is replaced with `color_temp_kelvin`.
+- BREAKING - getAllEntities - There was an unfortunate side effect of the previous store implementation where getAllEntities would automatically re-trigger a re-render of the component that was using it, the intention of this method is to grab a fresh copy of the entities at the time of the call, not trigger a re-render causing it to get new entities on every entity change, if you are using this method, you can swap it for the following:
+```ts
+// OLD
+const { getAllEntities } = useHass();
+const entities = getAllEntities();
+// NEW
+const { useStore } = useHass();
+const entities = useStore((state) => state.entities);
+```
+- NEW - renderError - a new prop you can provide to the HassConnect component to render the error message anywhere of your choice, useful to show via portals, or even just to match your applications styles.
+
+### Storybook
+- Updated storybook to latest version
+- Bugfix for the MediaPlayerCard, previously the "progress" bar was not displaying correctly (storybook only issue)
+
+### Dependencies
+
+- zustand - now required v5 or higher
+
+
 # 5.1.0
 
 ### @hakit/components
 
@@ -66,3 +66,26 @@ npm run release:components
 ```
 
 
+### Canary Releases
+
+1. Bump the package versions in core/components, and suffix with `-canary.0` for example in the package.json files.
+2. Run the canary release command, this will run build first, then publish the canary versions to npm:
+```bash
+npm run release:core:canary
+npm run release:components:canary
+```
+3. Verify it's not public or the latest version in npm, you can do this by running:
+```bash
+npm dist-tag ls @hakit/core
+npm dist-tag ls @hakit/components
+```
+4. Ask users to install or test the canary version by running:
+```bash
+npm install @hakit/core@canary
+npm install @hakit/components@canary
+```
+or the specific version:
+```bash
+npm install @hakit/core@1.0.0-canary.0
+npm install @hakit/components@1.0.0-canary.0
+```
Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,9 @@ addons.setConfig({`
`21`	`21`	`if (item.type === 'root' && item.name === 'components') {`
`22`	`22`	`return '@hakit/components';`
`23`	`23`	`}`
	`24`	`+ if (item.type === 'root' && item.name === 'editor') {`
	`25`	`+ return '@hakit/editor';`
	`26`	`+ }`
`24`	`27`	`return item.name;`
`25`	`28`	`}`
`26`	`29`	`}`