@hyvor/design 1.1.25-beta-org-7 → 1.1.25-beta-org-9

package/dist/components/Button/Button.svelte

@@ -429,14 +429,12 @@
   background-color: transparent;
   color: var(--text);
   transition: 0.2s background-color;
+  /*styles for disabled state*/
 }
 .button.invisible:hover {
   background-color: var(--accent-light);
   box-shadow: none !important;
 }
-.button.invisible {
-  /*styles for disabled state*/
-}
 .button.invisible[disabled] {
   background-color: transparent;
   color: var(--text);

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

@@ -7,6 +7,6 @@ interface Props {
     children?: import('svelte').Snippet;
     [key: string]: any;
 }
-declare const Checkbox: import("svelte").Component<Props, {}, "input" | "checked" | "group">;
+declare const Checkbox: import("svelte").Component<Props, {}, "checked" | "group" | "input">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/components/CodeBlock/CodeBlock.svelte

@@ -1,29 +1,60 @@
 <script lang="ts">
 	//import './prism.scss';
 	import './hljs.scss';
+	import Button from '../Button/Button.svelte';
+	import IconCopy from '@hyvor/icons/IconCopy';
 
 	type InputLanguage = 'html' | 'css' | 'js' | 'ts' | 'yaml' | 'json' | 'svelte' | 'jsx' | 'php';
-
 	const languagesMap: Partial<Record<InputLanguage, Language>> = {
 		svelte: 'html',
 		jsx: 'js'
 	};
-
 	import getCode, { type Language } from './getCode.js';
+	import toast from '../Toast/toast.js';
+
 	interface Props {
 		code: string;
 		language?: InputLanguage | null;
 	}
 
 	let { code, language = 'html' }: Props = $props();
+	let languageCode = $derived(
+		language ? languagesMap[language] || language : null
+	) as Language | null;
 
-	let languageCode = $derived(language ? (languagesMap[language] || language) : null) as Language | null;
+	function copyToClipboard() {
+		navigator.clipboard.writeText(code);
+		toast.success('Copied');
+	}
 </script>
 
-<pre class="language-{languageCode} hljs"><code>{@html getCode(code, languageCode)}</code></pre>
+<div class="code-container">
+	<div class="copy-button">
+		<Button color="input" size="x-small" onclick={copyToClipboard}>
+			<IconCopy size={10} />
+		</Button>
+	</div>
+	<pre class="language-{languageCode} hljs"><code>{@html getCode(code, languageCode)}</code></pre>
+</div>
 
 <style>
 	/*styles for CodeBlock component */
+	.code-container {
+		position: relative;
+	}
+
+	.code-container .copy-button {
+		position: absolute;
+		top: 0px;
+		right: 12px;
+		transform: translateY(-40%);
+		z-index: 10;
+	}
+
+	.copy-button :global(button) {
+		border: 1px solid var(--border);
+	}
+
 	pre {
 		text-align: left;
 		white-space: pre;
@@ -35,6 +66,7 @@
 		padding: 20px;
 		line-height: 1.2;
 	}
+
 	pre code {
 		all: unset;
 		font-family:

package/dist/components/CodeBlock/TabbedCodeBlock.svelte

@@ -1,78 +1,74 @@
 <script lang="ts">
-	import type { Snippet } from "svelte";
-	import Button from "../Button/Button.svelte";
+	import type { Snippet } from 'svelte';
+	import Button from '../Button/Button.svelte';
 
-    interface Props {
-        children: Snippet;
-        tabs: string[];
-    }
+	interface Props {
+		children: Snippet;
+		tabs: string[];
+	}
 
-    let { children, tabs }: Props = $props();
-    let activeTab = $state(tabs[0]);
+	let { children, tabs }: Props = $props();
+	let activeTab = $state(tabs[0]);
 
-    function activateTab(tab: string) {
-        activeTab = tab;
+	function activateTab(tab: string) {
+		activeTab = tab;
 
-        const pres = blocksEl.querySelectorAll("pre");
-        const tabIndex = tabs.indexOf(tab);
+		const pres = blocksEl.querySelectorAll<HTMLElement>('.code-container');
+		const tabIndex = tabs.indexOf(tab);
 
-        pres.forEach((pre, index) => {
-            if (index === tabIndex) {
-                pre.style.display = "block";
-            } else {
-                pre.style.display = "none";
-            }
-        });
-    }
+		pres.forEach((pre, index) => {
+			if (index === tabIndex) {
+				pre.style.display = 'block';
+			} else {
+				pre.style.display = 'none';
+			}
+		});
+	}
 
-    let blocksEl: HTMLDivElement;
+	let blocksEl: HTMLDivElement;
 </script>
 
 <div class="tabbed">
-
-    <div class="selectors">
-        {#each tabs as tab}
-            <Button 
-                size="x-small" 
-                color={activeTab === tab ? 'accent' : 'input'}
-                onclick={() => activateTab(tab)}
-            >{tab}</Button>
-        {/each}
-    </div>
-
-    <div class="blocks" bind:this={blocksEl}>
-        {@render children()}
-    </div>
-
+	<div class="selectors">
+		{#each tabs as tab}
+			<Button
+				size="x-small"
+				color={activeTab === tab ? 'accent' : 'input'}
+				onclick={() => activateTab(tab)}>{tab}</Button
+			>
+		{/each}
+	</div>
+
+	<div class="blocks" bind:this={blocksEl}>
+		{@render children()}
+	</div>
 </div>
 
 <style>
-
-    .tabbed {
-        margin: 1.5rem 0 1rem 0;
-        position: relative
-    }
-
-    .selectors {
-        display: inline-flex;
-        position: absolute;
-        top: 0;
-        left: 20px;
-        z-index: 1;
-        transform: translateY(-50%);
-        gap: 3px;
-    }
-
-    .selectors > :global(button) {
-        border: 1px solid var(--border);
-    }
-
-    .blocks > :global(pre:not(:first-child)) {
-        display: none;
-    }
-
-    .blocks > :global(pre) {
-        margin: 0
-    }
-
+	.tabbed {
+		margin: 1.5rem 0 1rem 0;
+		position: relative;
+	}
+
+	.selectors {
+		display: inline-flex;
+		position: absolute;
+		top: 0;
+		left: 20px;
+		z-index: 1;
+		transform: translateY(-50%);
+		gap: 3px;
+	}
+
+	.selectors > :global(button) {
+		border: 1px solid var(--border);
+	}
+
+	.blocks > :global(.code-container:not(:first-child)) {
+		display: none;
+	}
+
+	.blocks > :global(.code-container) {
+		margin: 0;
+	}
 </style>

package/dist/components/CodeBlock/TabbedCodeBlock.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Snippet } from "svelte";
+import type { Snippet } from 'svelte';
 interface Props {
     children: Snippet;
     tabs: string[];

package/dist/components/HyvorBar/HyvorBar.svelte

@@ -3,20 +3,11 @@
 	import { onMount } from 'svelte';
 	import BarProducts, { PRODUCTS } from './BarProducts.svelte';
 	import BarSupport from './BarSupport.svelte';
-	import {
-		barOnOrganizationSwitch,
-		barUser,
-		initBar,
-		setInstanceAndProduct,
-		type BarConfig,
-		type BarUser as BarUserType
-	} from './bar.js';
+	import { barUser, initBar, setInstanceAndProduct, type BarConfig, type BarUser as BarUserType } from './bar.js';
 	import BarUpdates from './BarUpdates.svelte';
 	import IconCaretDownFill from '@hyvor/icons/IconCaretDownFill';
 	import BarNotice from './Notice/BarNotice.svelte';
 	import BarLicense from './Notice/BarLicense.svelte';
-	import BarOrganization from './Organization/BarOrganization.svelte';
-	import { type BarOrganization as BarOrganizationType } from './bar.js';
 
 	interface Props {
 		instance?: string;
@@ -36,18 +27,16 @@
 		authOverride?: {
 			user: BarUserType | null;
 			logoutUrl: string;
-		};
-		onOrganizationSwitch?: (org: BarOrganizationType) => void;
+		}
 	}
 
 	let {
-		instance = 'https://hyvor.com',
-		product,
+		instance = 'https://hyvor.com', 
+		product, 
 		logo = `${instance}/api/public/logo/${product}.svg`,
 		config = {},
 		cloud = true,
-		authOverride = undefined,
-		onOrganizationSwitch = () => {}
+		authOverride = undefined
 	}: Props = $props();
 
 	let mobileShow = $state(false);
@@ -72,15 +61,15 @@
 		}
 	}
 
-	barOnOrganizationSwitch.set(onOrganizationSwitch);
-	setInstanceAndProduct(instance, product);
-	if (authOverride) {
-		barUser.set(authOverride.user);
-	}
-
 	onMount(() => {
+		setInstanceAndProduct(instance, product);
+
 		if (cloud) {
 			initBar();
+		} else {
+			if (authOverride) {
+				barUser.set(authOverride.user);
+			}
 		}
 	});
 
@@ -98,12 +87,16 @@
 	<div class="inner hds-box">
 		<div class="left">
 			<a class="logo" href="/">
-				<img src={logo} alt={product} width="20" height="20" />
+				<img
+					src={logo}
+					alt={product}
+					width="20"
+					height="20"
+				/>
 				<span class="name">
 					{getName()}
 				</span>
 			</a>
-			<BarOrganization />
 			<BarLicense name={getName()} />
 		</div>
 		<div class="right">
@@ -139,7 +132,7 @@
 		z-index: 100;
 	}
 	.inner {
-		padding: 0px 29px;
+		padding: 10px 29px;
 		display: flex;
 		align-items: center;
 		border-top-left-radius: 0;
@@ -150,7 +143,6 @@
 		display: flex;
 		align-items: center;
 		flex: 1;
-		height: 100%;
 	}
 	.logo {
 		display: flex;

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

@@ -1,5 +1,4 @@
 import { type BarConfig, type BarUser as BarUserType } from './bar.js';
-import { type BarOrganization as BarOrganizationType } from './bar.js';
 interface Props {
     instance?: string;
     product: string;
@@ -14,7 +13,6 @@ interface Props {
         user: BarUserType | null;
         logoutUrl: string;
     };
-    onOrganizationSwitch?: (org: BarOrganizationType) => void;
 }
 declare const HyvorBar: import("svelte").Component<Props, {}, "">;
 type HyvorBar = ReturnType<typeof HyvorBar>;

package/dist/components/HyvorBar/Notice/BarLicense.svelte

@@ -22,7 +22,7 @@
 		return daysDiff(endsAt);
 	}
 
-	function remainingCancelAtDAys(cancelAt: number | undefined | null): null | number {
+	function remainingCancelAtDAys(cancelAt: number | undefined | null) : null | number {
 		if (!cancelAt) {
 			return null;
 		}
@@ -36,7 +36,9 @@
 {#if $barLicense}
 	<a class="wrap" href="/console/billing">
 		{#if $barLicense.type === 'subscription'}
-			<Tooltip position="bottom">
+			<Tooltip
+				position="bottom"
+			>
 				{#snippet tooltip()}
 					Your current subscription plan for {name}. Click to manage it.
 				{/snippet}

package/dist/components/HyvorBar/bar.d.ts

@@ -10,14 +10,6 @@ export interface BarUser {
     username?: string | null;
     email: string;
     picture_url: string | null;
-    current_organization: null | {
-        name: string;
-    };
-}
-export interface BarOrganization {
-    id: number;
-    name: string;
-    role: 'admin' | 'billing' | 'manager' | 'member';
 }
 export interface BarUpdate {
     id: number;
@@ -27,7 +19,7 @@ export interface BarUpdate {
     content: string;
     url?: string;
 }
-export type BarUpdateType = 'company' | 'core' | 'talk' | 'blogs' | 'fortguard';
+export type BarUpdateType = 'company' | 'core' | 'talk' | 'blogs' | 'post' | 'relay' | 'fortguard';
 export interface BarResolvedLicense {
     type: 'subscription' | 'trial' | 'custom' | 'expired';
     license: Record<string, number | boolean> | null;
@@ -37,24 +29,12 @@ export interface BarResolvedLicense {
     };
     trial_ends_at: null | number;
 }
-export declare const instance: import("svelte/store").Writable<string>;
 export declare const barUser: import("svelte/store").Writable<BarUser | null>;
 export declare const barUnreadUpdates: import("svelte/store").Writable<number>;
 export declare const barLicense: import("svelte/store").Writable<BarResolvedLicense | null>;
 export declare const barHasFailedInvoices: import("svelte/store").Writable<boolean>;
-export declare const barOrganizationDropdownOpen: import("svelte/store").Writable<boolean>;
-export declare const barOrganizations: import("svelte/store").Writable<BarOrganization[]>;
-export declare const barOnOrganizationSwitch: import("svelte/store").Writable<((org: BarOrganization) => void) | null>;
-export declare const barOrganizationCreating: import("svelte/store").Writable<boolean>;
 export declare function setInstanceAndProduct(instance_: string, product_: string): void;
-export declare function getInstance(): string;
-/**
- * @throws Error if initialization fails
- */
-export declare function initBar(): Promise<void>;
-export declare function getMyOrganizations(): Promise<BarOrganization[]>;
-export declare function createOrganization(name: string): Promise<BarOrganization>;
-export declare function switchOrganization(orgId: number): Promise<void>;
+export declare function initBar(): void;
 export declare class UnreadUpdatesTimeLocalStorage {
     static KEY: string;
     static get(): number | null;
@@ -68,8 +48,4 @@ export declare const bar: {
      * This is useful to create after, for example, a user creates a new blog
      */
     reload: () => void;
-    /**
-     * Open the org selector dropdown from the outside world
-     */
-    openOrganizationDropdown: () => void;
 };

package/dist/components/HyvorBar/bar.js

@@ -1,95 +1,44 @@
 import { track } from '../../marketing/index.js';
-import { get, writable } from 'svelte/store';
+import { writable } from 'svelte/store';
+let instance = '';
 let product = 'core';
-export const instance = writable('');
 export const barUser = writable(null);
 export const barUnreadUpdates = writable(0);
 export const barLicense = writable(null);
 export const barHasFailedInvoices = writable(false);
-export const barOrganizationDropdownOpen = writable(false);
-export const barOrganizations = writable([]);
-export const barOnOrganizationSwitch = writable(null);
-export const barOrganizationCreating = writable(false);
 export function setInstanceAndProduct(instance_, product_) {
-    instance.set(instance_);
+    instance = instance_;
     product = product_;
 }
-export function getInstance() {
-    return get(instance);
-}
-/**
- * @throws Error if initialization fails
- */
-export async function initBar() {
+export function initBar() {
     const query = new URLSearchParams();
     query.set('product', product);
     const lastUnreadTime = UnreadUpdatesTimeLocalStorage.get();
     if (lastUnreadTime) {
         query.set('last_read_updates_at', lastUnreadTime.toString());
     }
-    const response = await fetch(getInstance() + '/api/public/bar?' + query.toString(), {
+    fetch(instance + '/api/public/bar?' + query.toString(), {
         credentials: 'include'
+    })
+        .then((response) => response.json())
+        .then((data) => {
+        barUser.set(data.user);
+        barUnreadUpdates.set(data.updates.unread);
+        barLicense.set(data.billing.license);
+        barHasFailedInvoices.set(data.billing.has_failed_invoices);
+        if (lastUnreadTime === null) {
+            UnreadUpdatesTimeLocalStorage.setNow();
+        }
+        if (data.user && track.ready()) {
+            track.identify(data.user.id.toString(), {
+                name: data.user.name ?? undefined,
+                avatar: data.user.picture_url ?? undefined
+            });
+        }
+    })
+        .catch((error) => {
+        console.error('Error:', error);
     });
-    if (!response.ok) {
-        throw new Error('Failed to initialize bar');
-    }
-    const data = await response.json();
-    barUser.set(data.user);
-    barUnreadUpdates.set(data.updates.unread);
-    barLicense.set(data.billing.license);
-    barHasFailedInvoices.set(data.billing.has_failed_invoices);
-    if (lastUnreadTime === null) {
-        UnreadUpdatesTimeLocalStorage.setNow();
-    }
-    if (data.user && track.ready()) {
-        track.identify(data.user.id.toString(), {
-            name: data.user.name ?? undefined,
-            avatar: data.user.picture_url ?? undefined
-        });
-    }
-}
-export async function getMyOrganizations() {
-    return [];
-    /* return [
-        { id: 1, name: 'Org 1', role: 'admin' },
-        { id: 2, name: 'Org 2', role: 'member' },
-        { id: 3, name: 'Org 3', role: 'billing' },
-        { id: 4, name: 'Org 4', role: 'manager' }
-    ]; */
-    const response = await fetch(getInstance() + '/api/public/bar/orgs/my', {
-        credentials: 'include'
-    });
-    const data = await response.json();
-    return data.organizations;
-}
-export async function createOrganization(name) {
-    const response = await fetch(getInstance() + '/api/public/bar/orgs', {
-        method: 'POST',
-        credentials: 'include',
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ name })
-    });
-    if (!response.ok) {
-        throw new Error('Failed to create organization');
-    }
-    const data = await response.json();
-    return data;
-}
-export async function switchOrganization(orgId) {
-    const response = await fetch(getInstance() + '/api/public/bar/orgs/switch', {
-        method: 'POST',
-        credentials: 'include',
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ organization_id: orgId })
-    });
-    if (!response.ok) {
-        throw new Error('Failed to switch organization');
-    }
-    await initBar();
 }
 export class UnreadUpdatesTimeLocalStorage {
     static KEY = 'unread_updates';
@@ -149,9 +98,5 @@ export const bar = {
      */
     reload: () => {
         initBar();
-    },
-    /**
-     * Open the org selector dropdown from the outside world
-     */
-    openOrganizationDropdown: () => barOrganizationDropdownOpen.set(true)
+    }
 };

package/dist/components/Internationalization/T.svelte.d.ts

@@ -1,23 +1,16 @@
 import { type ToDotPaths, type I18nStrings, type PrimitiveType } from './types.js';
 import { type Component } from 'svelte';
-declare function $$render<StringsT extends I18nStrings>(): {
-    props: {
+declare class __sveltets_Render<StringsT extends I18nStrings> {
+    props(): {
         key: ToDotPaths<StringsT>;
         params?: Record<string, PrimitiveType | {
             element?: string;
             component?: Component<any>;
             props?: Record<string, any>;
-        }>;
+        }> | undefined;
     };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<StringsT extends I18nStrings> {
-    props(): ReturnType<typeof $$render<StringsT>>['props'];
-    events(): ReturnType<typeof $$render<StringsT>>['events'];
-    slots(): ReturnType<typeof $$render<StringsT>>['slots'];
+    events(): {};
+    slots(): {};
     bindings(): "";
     exports(): {};
 }

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

@@ -6,6 +6,6 @@ interface Props {
     children?: import('svelte').Snippet;
     [key: string]: any;
 }
-declare const Radio: import("svelte").Component<Props, {}, "input" | "group">;
+declare const Radio: import("svelte").Component<Props, {}, "group" | "input">;
 type Radio = ReturnType<typeof Radio>;
 export default Radio;

package/dist/components/SplitControl/SplitControl.svelte

@@ -10,7 +10,6 @@
 		flex?: number[];
 		children?: Snippet;
 		nested?: Snippet;
-		noHorizonalPadding?: boolean;
 		[key: string]: any;
 	}
 
@@ -21,7 +20,6 @@
 		flex = [1, 2],
 		children,
 		nested,
-		noHorizonalPadding = false,
 		...rest
 	}: Props = $props();
 </script>
@@ -30,7 +28,6 @@
 	class="split-control"
 	class:has-nested={!!nested}
 	class:column
-	class:no-hpadding={noHorizonalPadding}
 	aria-label={typeof label === 'string' ? label : undefined}
 	{...rest}
 >
@@ -79,9 +76,6 @@
 .split-control.column {
   flex-direction: column;
 }
-.split-control.column .left {
-  padding-bottom: 10px;
-}
 .split-control.column .right {
   padding-top: 0;
 }
@@ -103,12 +97,6 @@
   min-width: 0;
 }
 
-.no-hpadding .left,
-.no-hpadding .right {
-  padding-left: 0;
-  padding-right: 0;
-}
-
 .caption-wrap {
   margin-top: 4px;
 }</style>

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

@@ -6,7 +6,6 @@ interface Props {
     flex?: number[];
     children?: Snippet;
     nested?: Snippet;
-    noHorizonalPadding?: boolean;
     [key: string]: any;
 }
 declare const SplitControl: import("svelte").Component<Props, {}, "">;

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

@@ -4,6 +4,6 @@ interface Props {
     children?: import('svelte').Snippet;
     [key: string]: any;
 }
-declare const Switch: import("svelte").Component<Props, {}, "input" | "checked">;
+declare const Switch: import("svelte").Component<Props, {}, "checked" | "input">;
 type Switch = ReturnType<typeof Switch>;
 export default Switch;