timeback 0.0.0-alpha.2 → 0.1.1

package/dist/client/adapters/vue/SignInButton.vue

@@ -0,0 +1,260 @@
+<!--
+  Sign In with Timeback Button
+
+  A pre-styled button for Timeback SSO authentication.
+  Fully customizable via CSS variables.
+
+  @example
+  ```vue
+  <script setup>
+  import { SignInButton } from 'timeback/vue'
+  </script>
+
+  <template>
+    <SignInButton />
+    <SignInButton variant="outline">Continue with Timeback</SignInButton>
+  </template>
+  ```
+-->
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useTimeback } from './provider'
+
+/**
+ * Props for SignInButton component.
+ */
+interface Props {
+	/** Additional CSS class names */
+	class?: string
+	/** Disabled state */
+	disabled?: boolean
+	/** Show loading spinner when clicked */
+	showLoading?: boolean
+	/** Button variant */
+	variant?: 'default' | 'outline' | 'minimal'
+	/** Button size */
+	size?: 'sm' | 'md' | 'lg'
+	/** Show Timeback logo */
+	showLogo?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	class: '',
+	disabled: false,
+	showLoading: true,
+	variant: 'default',
+	size: 'md',
+	showLogo: true,
+})
+
+const emit = defineEmits<{
+	(e: 'click', event: MouseEvent): void
+}>()
+
+const timeback = useTimeback()
+const isLoading = ref(false)
+
+const isReady = computed(() => !!timeback.value)
+
+const classes = computed(() => {
+	return [
+		'timeback-signin-btn',
+		props.variant !== 'default' && `timeback-signin-btn--${props.variant}`,
+		props.size !== 'md' && `timeback-signin-btn--${props.size}`,
+		props.class,
+	]
+		.filter(Boolean)
+		.join(' ')
+})
+
+function handleClick(e: MouseEvent) {
+	emit('click', e)
+	if (e.defaultPrevented) {
+		return
+	}
+
+	if (props.showLoading) {
+		isLoading.value = true
+	}
+	timeback.value?.auth.signIn()
+}
+</script>
+
+<template>
+	<button
+		type="button"
+		:class="classes"
+		:disabled="disabled || !isReady || isLoading"
+		:aria-busy="isLoading"
+		@click="handleClick"
+	>
+		<svg
+			v-if="isLoading"
+			class="timeback-signin-btn__spinner"
+			width="16"
+			height="16"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-hidden="true"
+		>
+			<circle
+				cx="12"
+				cy="12"
+				r="10"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-opacity="0.25"
+			/>
+			<path
+				d="M12 2C6.48 2 2 6.48 2 12"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+			/>
+		</svg>
+		<svg
+			v-else-if="showLogo"
+			class="timeback-signin-btn__logo"
+			width="20"
+			height="18"
+			viewBox="0 0 199 180"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-hidden="true"
+		>
+			<g clip-path="url(#tb-logo-clip-vue)">
+				<path
+					d="M121.432 179.456C110.607 177.871 101.153 173.91 92.4882 168.085C91.1274 167.17 89.4598 165.404 89.4375 164.008C89.2123 149.891 89.3002 135.77 89.3002 119.86C93.1365 123.255 95.8538 125.706 98.6224 128.099C103.151 132.012 107.437 136.28 112.314 139.703C126.466 149.635 145.037 147.25 156.045 134.448C166.919 121.803 167.226 101.374 155.695 89.6399C145.727 79.4958 134.693 70.3995 123.251 60.0438C123.251 77.8871 123.251 94.5637 123.251 112.15C121.428 110.999 120.279 110.479 119.383 109.676C110.329 101.573 101.241 93.5044 92.3634 85.2109C90.8519 83.7988 89.4363 81.3758 89.4209 79.4084C89.2249 54.4218 89.2905 29.4332 89.3061 4.44502C89.3066 3.64954 89.3061 2.22136 89.3061 1.47755C90.8061 1.47755 92.694 1.47857 94.1427 1.47755C118.131 1.46071 142.12 1.52088 166.108 1.39821C169.235 1.38222 171.33 2.18661 173.251 4.75826C180.607 14.6032 188.189 24.279 196.266 34.7705C179.79 34.7705 164.169 34.7705 148.548 34.7705C147.871 34.7705 147.366 34.7705 146.866 34.7705C147.866 35.7705 150.35 38.3018 151.61 39.4825C162.643 49.8249 174.663 59.3807 184.245 70.947C202.474 92.9508 203.539 118.134 191.204 143.046C178.598 168.508 156.61 180.302 128.298 180.295C126.154 180.295 124.011 179.778 121.432 179.456Z"
+					fill="currentColor"
+				/>
+				<circle cx="40" cy="133" r="39" fill="currentColor" />
+				<circle cx="39" cy="39" r="39" fill="currentColor" />
+			</g>
+			<defs>
+				<clipPath id="tb-logo-clip-vue">
+					<rect width="199" height="180" fill="currentColor" />
+				</clipPath>
+			</defs>
+		</svg>
+		<slot>Sign in with Timeback</slot>
+	</button>
+</template>
+
+<style scoped>
+.timeback-signin-btn {
+	/* Colors */
+	--tb-btn-bg: #0f172a;
+	--tb-btn-bg-hover: #1e293b;
+	--tb-btn-text: #ffffff;
+	--tb-btn-border: transparent;
+
+	/* Outline variant */
+	--tb-btn-outline-bg: transparent;
+	--tb-btn-outline-bg-hover: #f1f5f9;
+	--tb-btn-outline-text: #0f172a;
+	--tb-btn-outline-border: #e2e8f0;
+
+	/* Minimal variant */
+	--tb-btn-minimal-bg: transparent;
+	--tb-btn-minimal-bg-hover: #f1f5f9;
+	--tb-btn-minimal-text: #0f172a;
+
+	/* Sizing */
+	--tb-btn-padding-x: 1rem;
+	--tb-btn-padding-y: 0.625rem;
+	--tb-btn-font-size: 0.875rem;
+	--tb-btn-border-radius: 0.5rem;
+	--tb-btn-gap: 0.5rem;
+
+	/* Transitions */
+	--tb-btn-transition: all 150ms ease;
+
+	/* Focus ring */
+	--tb-btn-focus-ring: #3b82f6;
+	--tb-btn-focus-ring-offset: 2px;
+
+	/* Base styles */
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--tb-btn-gap);
+	padding: var(--tb-btn-padding-y) var(--tb-btn-padding-x);
+	font-size: var(--tb-btn-font-size);
+	font-weight: 500;
+	font-family: inherit;
+	line-height: 1.5;
+	border-radius: var(--tb-btn-border-radius);
+	border: 1px solid var(--tb-btn-border);
+	background-color: var(--tb-btn-bg);
+	color: var(--tb-btn-text);
+	cursor: pointer;
+	transition: var(--tb-btn-transition);
+	text-decoration: none;
+	white-space: nowrap;
+}
+
+.timeback-signin-btn:hover:not(:disabled) {
+	background-color: var(--tb-btn-bg-hover);
+}
+
+.timeback-signin-btn:focus-visible {
+	outline: 2px solid var(--tb-btn-focus-ring);
+	outline-offset: var(--tb-btn-focus-ring-offset);
+}
+
+.timeback-signin-btn:disabled {
+	opacity: 0.6;
+	cursor: not-allowed;
+}
+
+/* Outline variant */
+.timeback-signin-btn--outline {
+	--tb-btn-bg: var(--tb-btn-outline-bg);
+	--tb-btn-bg-hover: var(--tb-btn-outline-bg-hover);
+	--tb-btn-text: var(--tb-btn-outline-text);
+	--tb-btn-border: var(--tb-btn-outline-border);
+}
+
+/* Minimal variant */
+.timeback-signin-btn--minimal {
+	--tb-btn-bg: var(--tb-btn-minimal-bg);
+	--tb-btn-bg-hover: var(--tb-btn-minimal-bg-hover);
+	--tb-btn-text: var(--tb-btn-minimal-text);
+	--tb-btn-border: transparent;
+}
+
+/* Sizes */
+.timeback-signin-btn--sm {
+	--tb-btn-padding-x: 0.75rem;
+	--tb-btn-padding-y: 0.375rem;
+	--tb-btn-font-size: 0.75rem;
+	--tb-btn-gap: 0.375rem;
+}
+
+.timeback-signin-btn--lg {
+	--tb-btn-padding-x: 1.5rem;
+	--tb-btn-padding-y: 0.75rem;
+	--tb-btn-font-size: 1rem;
+	--tb-btn-gap: 0.625rem;
+}
+
+/* Logo */
+.timeback-signin-btn__logo {
+	flex-shrink: 0;
+}
+
+/* Loading spinner */
+.timeback-signin-btn__spinner {
+	animation: timeback-spin 1s linear infinite;
+}
+
+@keyframes timeback-spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+</style>

package/dist/client/adapters/vue/SignInButton.vue.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Sign In with Timeback Button (Vue)
+ *
+ * Type declarations for SignInButton.vue component.
+ */
+
+import type { DefineComponent } from 'vue'
+
+/**
+ * Props for SignInButton component.
+ */
+export interface SignInButtonProps {
+	/** Additional CSS class names */
+	class?: string
+	/** Disabled state */
+	disabled?: boolean
+	/** Show loading spinner when clicked */
+	showLoading?: boolean
+	/** Button variant */
+	variant?: 'default' | 'outline' | 'minimal'
+	/** Button size */
+	size?: 'sm' | 'md' | 'lg'
+	/** Show Timeback logo */
+	showLogo?: boolean
+}
+
+/**
+ * Sign In with Timeback button component.
+ *
+ * Triggers SSO authentication flow when clicked.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { SignInButton } from 'timeback/vue'
+ * </script>
+ *
+ * <template>
+ *   <!-- Basic usage -->
+ *   <SignInButton />
+ *
+ *   <!-- Custom text -->
+ *   <SignInButton>Continue with Timeback</SignInButton>
+ *
+ *   <!-- Outline variant -->
+ *   <SignInButton variant="outline" />
+ * </template>
+ * ```
+ */
+declare const SignInButton: DefineComponent<SignInButtonProps>
+
+export default SignInButton
+export { SignInButtonProps }

package/dist/client/adapters/vue/index.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Vue Client Module
+ *
+ * Vue 3-specific exports for Timeback SDK.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { TimebackProvider, useTimeback, SignInButton } from 'timeback/vue'
+ *
+ * const timeback = useTimeback()
+ *
+ * function handleSignIn() {
+ *   timeback.value?.auth.signIn()
+ * }
+ *
+ * async function handleFetchProfile() {
+ *   const profile = await timeback.value?.user.fetch()
+ * }
+ *
+ * function handleStartActivity() {
+ *   const activity = timeback.value?.activity.new({
+ *     id: 'lesson-1',
+ *     name: 'Intro',
+ *     courseCode: 'MATH'
+ *   })
+ *   activity?.start()
+ * }
+ * </script>
+ *
+ * <template>
+ *   <TimebackProvider>
+ *     <SignInButton />
+ *   </TimebackProvider>
+ * </template>
+ * ```
+ */
+export { Activity, createClient, TimebackClient } from 'timeback/client';
+export type { ActivityMetrics, ActivityParams, TimebackUser } from 'timeback/client';
+export { TimebackProvider, useTimeback } from './provider';
+export { default as SignInButton } from './SignInButton.vue';
+export type { SignInButtonProps } from './SignInButton.vue';
+//# sourceMappingURL=index.d.ts.map

package/dist/client/adapters/vue/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/client/adapters/vue/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAGH,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AACxE,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAGpF,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAG1D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAC5D,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/client/adapters/vue/index.ts

@@ -0,0 +1,48 @@
+/**
+ * Vue Client Module
+ *
+ * Vue 3-specific exports for Timeback SDK.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { TimebackProvider, useTimeback, SignInButton } from 'timeback/vue'
+ *
+ * const timeback = useTimeback()
+ *
+ * function handleSignIn() {
+ *   timeback.value?.auth.signIn()
+ * }
+ *
+ * async function handleFetchProfile() {
+ *   const profile = await timeback.value?.user.fetch()
+ * }
+ *
+ * function handleStartActivity() {
+ *   const activity = timeback.value?.activity.new({
+ *     id: 'lesson-1',
+ *     name: 'Intro',
+ *     courseCode: 'MATH'
+ *   })
+ *   activity?.start()
+ * }
+ * </script>
+ *
+ * <template>
+ *   <TimebackProvider>
+ *     <SignInButton />
+ *   </TimebackProvider>
+ * </template>
+ * ```
+ */
+
+// Re-export from timeback/client for convenience
+export { Activity, createClient, TimebackClient } from 'timeback/client'
+export type { ActivityMetrics, ActivityParams, TimebackUser } from 'timeback/client'
+
+// Vue-specific
+export { TimebackProvider, useTimeback } from './provider'
+
+// Components
+export { default as SignInButton } from './SignInButton.vue'
+export type { SignInButtonProps } from './SignInButton.vue'

package/dist/client/adapters/vue/provider.d.ts

@@ -0,0 +1,94 @@
+import { TimebackClient } from 'timeback/client';
+import type { PropType, ShallowRef } from 'vue';
+/**
+ * TimebackProvider component.
+ *
+ * Wraps your app to provide the Timeback client via Vue's provide/inject.
+ * Handles SSR gracefully by only initializing the client in the browser.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { TimebackProvider } from 'timeback/vue'
+ * </script>
+ *
+ * <template>
+ *   <TimebackProvider>
+ *     <App />
+ *   </TimebackProvider>
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- With custom client -->
+ * <script setup>
+ * import { TimebackProvider, createClient } from 'timeback/vue'
+ *
+ * const client = createClient({ baseURL: 'https://example.com/api/timeback' })
+ * </script>
+ *
+ * <template>
+ *   <TimebackProvider :client="client">
+ *     <App />
+ *   </TimebackProvider>
+ * </template>
+ * ```
+ */
+export declare const TimebackProvider: import("@vue/runtime-core").DefineComponent<import("@vue/runtime-core").ExtractPropTypes<{
+    /** Optional Timeback client instance. If not provided, one is created automatically. */
+    client: {
+        type: PropType<TimebackClient>;
+        default: undefined;
+    };
+}>, () => import("@vue/runtime-core").VNode<import("@vue/runtime-core").RendererNode, import("@vue/runtime-core").RendererElement, {
+    [key: string]: any;
+}>[] | null, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
+    /** Optional Timeback client instance. If not provided, one is created automatically. */
+    client: {
+        type: PropType<TimebackClient>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    client: TimebackClient;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, true, {}, any>;
+/**
+ * Composable to access the Timeback client.
+ *
+ * Returns the client instance or undefined if not yet hydrated.
+ * Use this to access all Timeback functionality: auth, user, activities.
+ *
+ * @returns The Timeback client or undefined
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useTimeback } from 'timeback/vue'
+ *
+ * const timeback = useTimeback()
+ *
+ * function handleSignIn() {
+ *   timeback.value?.auth.signIn()
+ * }
+ *
+ * async function handleFetchProfile() {
+ *   const profile = await timeback.value?.user.fetch()
+ * }
+ *
+ * function handleStartActivity() {
+ *   const activity = timeback.value?.activity.new({
+ *     id: 'lesson-1',
+ *     name: 'Intro',
+ *     courseCode: 'MATH'
+ *   })
+ *   activity?.start()
+ * }
+ * </script>
+ *
+ * <template>
+ *   <button @click="handleSignIn">Sign In</button>
+ * </template>
+ * ```
+ */
+export declare function useTimeback(): ShallowRef<TimebackClient | undefined>;
+//# sourceMappingURL=provider.d.ts.map

package/dist/client/adapters/vue/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../../src/client/adapters/vue/provider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAGhD,OAAO,KAAK,EAAgB,QAAQ,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAqC7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,gBAAgB;IAG3B,wFAAwF;;;;;;;;IAAxF,wFAAwF;;;;;;;0FAoBxF,CAAA;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAgB,WAAW,IAAI,UAAU,CAAC,cAAc,GAAG,SAAS,CAAC,CAQpE"}

package/dist/client/adapters/vue/provider.ts

@@ -0,0 +1,147 @@
+import { TimebackClient } from 'timeback/client'
+import { defineComponent, inject, onMounted, provide, shallowRef } from 'vue'
+
+import type { InjectionKey, PropType, ShallowRef } from 'vue'
+
+/**
+ * Vue Provider
+ *
+ * Context-based Timeback client for Vue 3.
+ */
+
+/**
+ * Injection key for Timeback client.
+ */
+const TimebackKey: InjectionKey<ShallowRef<TimebackClient | undefined>> = Symbol('timeback')
+
+/**
+ * Check if we're running in the browser.
+ *
+ * @returns True if in browser
+ */
+function isBrowser(): boolean {
+	return typeof window !== 'undefined'
+}
+
+// Singleton client instance for browser
+let clientInstance: TimebackClient | undefined
+
+/**
+ * Get or create the singleton Timeback client.
+ *
+ * @returns TimebackClient instance
+ */
+function getOrCreateClient(): TimebackClient {
+	if (!clientInstance) {
+		clientInstance = new TimebackClient()
+	}
+	return clientInstance
+}
+
+/**
+ * TimebackProvider component.
+ *
+ * Wraps your app to provide the Timeback client via Vue's provide/inject.
+ * Handles SSR gracefully by only initializing the client in the browser.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { TimebackProvider } from 'timeback/vue'
+ * </script>
+ *
+ * <template>
+ *   <TimebackProvider>
+ *     <App />
+ *   </TimebackProvider>
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- With custom client -->
+ * <script setup>
+ * import { TimebackProvider, createClient } from 'timeback/vue'
+ *
+ * const client = createClient({ baseURL: 'https://example.com/api/timeback' })
+ * </script>
+ *
+ * <template>
+ *   <TimebackProvider :client="client">
+ *     <App />
+ *   </TimebackProvider>
+ * </template>
+ * ```
+ */
+export const TimebackProvider = defineComponent({
+	name: 'TimebackProvider',
+	props: {
+		/** Optional Timeback client instance. If not provided, one is created automatically. */
+		client: {
+			type: Object as PropType<TimebackClient>,
+			default: undefined,
+		},
+	},
+	setup(props, { slots }) {
+		const clientRef = shallowRef<TimebackClient | undefined>(props.client)
+
+		// SSR-safe: only create client in browser if not provided
+		onMounted(() => {
+			if (!clientRef.value && isBrowser()) {
+				clientRef.value = getOrCreateClient()
+			}
+		})
+
+		provide(TimebackKey, clientRef)
+
+		return () => (slots.default ? slots.default() : null)
+	},
+})
+
+/**
+ * Composable to access the Timeback client.
+ *
+ * Returns the client instance or undefined if not yet hydrated.
+ * Use this to access all Timeback functionality: auth, user, activities.
+ *
+ * @returns The Timeback client or undefined
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useTimeback } from 'timeback/vue'
+ *
+ * const timeback = useTimeback()
+ *
+ * function handleSignIn() {
+ *   timeback.value?.auth.signIn()
+ * }
+ *
+ * async function handleFetchProfile() {
+ *   const profile = await timeback.value?.user.fetch()
+ * }
+ *
+ * function handleStartActivity() {
+ *   const activity = timeback.value?.activity.new({
+ *     id: 'lesson-1',
+ *     name: 'Intro',
+ *     courseCode: 'MATH'
+ *   })
+ *   activity?.start()
+ * }
+ * </script>
+ *
+ * <template>
+ *   <button @click="handleSignIn">Sign In</button>
+ * </template>
+ * ```
+ */
+export function useTimeback(): ShallowRef<TimebackClient | undefined> {
+	const clientRef = inject(TimebackKey, undefined)
+	if (!clientRef) {
+		// Return a standalone ref if not in provider context
+		// This allows usage without provider (client won't be auto-created)
+		return shallowRef<TimebackClient | undefined>(undefined)
+	}
+	return clientRef
+}

package/dist/client/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Client Module
+ *
+ * Framework-agnostic client exports.
+ */
+export { createClient } from './timeback-client';
+export { TimebackClient } from './timeback-client.class';
+export { createActivity, Activity } from './lib/activity';
+//# sourceMappingURL=index.d.ts.map

package/dist/client/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/client/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AAGxD,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA"}