@floegence/floe-webapp-core 0.1.15 → 0.1.17

package/dist/app/ActivityAppsMain.d.ts

@@ -0,0 +1,23 @@
+import { type Accessor } from 'solid-js';
+import { type FloeComponent } from '../context/ComponentRegistry';
+import { type KeepAliveStackProps, type KeepAliveView } from '../components/layout/KeepAliveStack';
+export interface ActivityAppsMainProps<TProtocol = unknown> {
+    class?: string;
+    /** Override the active id (default: LayoutContext.sidebarActiveTab). */
+    activeId?: Accessor<string>;
+    /**
+     * Explicit view list (advanced).
+     * When provided, the registry is not required.
+     */
+    views?: KeepAliveView[];
+    /**
+     * Registry-driven filter (default: sidebar.fullScreen === true).
+     * Only used when `views` is not provided.
+     */
+    include?: (component: FloeComponent<TProtocol>) => boolean;
+    /** Forwarded to KeepAliveStack (default: true). */
+    lazyMount?: KeepAliveStackProps['lazyMount'];
+    /** Forwarded to KeepAliveStack (default: true). */
+    keepMounted?: KeepAliveStackProps['keepMounted'];
+}
+export declare function ActivityAppsMain<TProtocol = unknown>(props: ActivityAppsMainProps<TProtocol>): import("solid-js").JSX.Element;

package/dist/app/index.d.ts

@@ -1,2 +1,3 @@
 export { FloeProvider, type FloeProviderProps } from './FloeProvider';
 export { FloeApp, type FloeAppProps } from './FloeApp';
+export { ActivityAppsMain, type ActivityAppsMainProps } from './ActivityAppsMain';

package/dist/components/layout/KeepAliveStack.d.ts

@@ -0,0 +1,16 @@
+import { type JSX } from 'solid-js';
+export interface KeepAliveView {
+    id: string;
+    render: () => JSX.Element;
+    class?: string;
+}
+export interface KeepAliveStackProps {
+    views: KeepAliveView[];
+    activeId: string;
+    class?: string;
+    /** When true, a view is mounted only after its first activation (default: true). */
+    lazyMount?: boolean;
+    /** When true, mounted views stay mounted after deactivation (default: true). */
+    keepMounted?: boolean;
+}
+export declare function KeepAliveStack(props: KeepAliveStackProps): JSX.Element;

package/dist/components/layout/index.d.ts

@@ -6,4 +6,5 @@ export { BottomBar, BottomBarItem, StatusIndicator, type BottomBarProps, type Bo
 export { MobileTabBar, type MobileTabBarItem, type MobileTabBarProps } from './MobileTabBar';
 export { ResizeHandle, type ResizeHandleProps } from './ResizeHandle';
 export { Panel, PanelHeader, PanelContent, type PanelProps, type PanelHeaderProps, type PanelContentProps } from './Panel';
+export { KeepAliveStack, type KeepAliveStackProps, type KeepAliveView } from './KeepAliveStack';
 export * from '../deck';

package/dist/context/ViewActivationContext.d.ts

@@ -0,0 +1,12 @@
+import { type Accessor, type JSX } from 'solid-js';
+export interface ViewActivationContextValue {
+    id: string;
+    active: Accessor<boolean>;
+    activationSeq: Accessor<number>;
+}
+export interface ViewActivationProviderProps {
+    value: ViewActivationContextValue;
+    children: JSX.Element;
+}
+export declare function ViewActivationProvider(props: ViewActivationProviderProps): JSX.Element;
+export declare function useViewActivation(): ViewActivationContextValue;

package/dist/context/index.d.ts

@@ -8,3 +8,4 @@ export { ComponentRegistryProvider, useComponentRegistry, useComponentContextFac
 export { WidgetRegistryProvider, useWidgetRegistry, createWidgetRegistry, type WidgetDefinition, type WidgetProps, type WidgetRegistryValue, } from './WidgetRegistry';
 export { DeckProvider, useDeck, createDeckService, type DeckWidget, type DeckLayout, type DragState, type ResizeState, type DeckContextValue, } from './DeckContext';
 export { WidgetStateProvider, useWidgetStateContext, useWidgetState, useCurrentWidgetId, type WidgetStateContextValue, type WidgetStateProviderProps, } from './WidgetStateContext';
+export { ViewActivationProvider, useViewActivation, type ViewActivationContextValue, type ViewActivationProviderProps } from './ViewActivationContext';

package/dist/floe.css

@@ -0,0 +1,442 @@
+/*
+ * Floe design tokens + base styles + custom utilities.
+ *
+ * This file is Tailwind v4 input CSS (it uses @theme/@layer) and is consumed by:
+ * - `@floegence/floe-webapp-core/styles` (precompiled bundle via `globals.css`)
+ * - `@floegence/floe-webapp-core/tailwind` (downstream Tailwind integration entry)
+ *
+ * It intentionally does NOT include:
+ * - `@import 'tailwindcss'` (owned by the application / precompiled entry)
+ * - any `@source` directives (owned by the entry that imports this file)
+ */
+
+
+/* Import theme definitions - they define the CSS variables */
+@import './themes/light.css';
+@import './themes/dark.css';
+
+/*
+ * TailwindCSS v4 requires @theme for utilities. However, CSS variable
+ * references don't work properly for background/text color utilities.
+ * Instead, we use @utility to define custom utilities that reference
+ * CSS variables at runtime.
+ */
+
+/* Border radius - these work fine with var() */
+@theme {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+/* Custom color utilities using CSS variables */
+@layer utilities {
+  /* Background colors */
+  .bg-background { background-color: var(--background); }
+  .bg-foreground { background-color: var(--foreground); }
+  .bg-primary { background-color: var(--primary); }
+  .bg-primary-foreground { background-color: var(--primary-foreground); }
+  .bg-secondary { background-color: var(--secondary); }
+  .bg-secondary-foreground { background-color: var(--secondary-foreground); }
+  .bg-muted { background-color: var(--muted); }
+  .bg-muted-foreground { background-color: var(--muted-foreground); }
+  .bg-accent { background-color: var(--accent); }
+  .bg-accent-foreground { background-color: var(--accent-foreground); }
+  .bg-card { background-color: var(--card); }
+  .bg-card-foreground { background-color: var(--card-foreground); }
+  .bg-popover { background-color: var(--popover); }
+  .bg-popover-foreground { background-color: var(--popover-foreground); }
+  .bg-border { background-color: var(--border); }
+  .bg-input { background-color: var(--input); }
+  .bg-ring { background-color: var(--ring); }
+  .bg-success { background-color: var(--success); }
+  .bg-success-foreground { background-color: var(--success-foreground); }
+  .bg-warning { background-color: var(--warning); }
+  .bg-warning-foreground { background-color: var(--warning-foreground); }
+  .bg-error { background-color: var(--error); }
+  .bg-error-foreground { background-color: var(--error-foreground); }
+  /* Alias: destructive == error (VSCode-style danger actions) */
+  .bg-destructive { background-color: var(--error); }
+  .bg-destructive-foreground { background-color: var(--error-foreground); }
+  .bg-info { background-color: var(--info); }
+  .bg-info-foreground { background-color: var(--info-foreground); }
+  .bg-sidebar { background-color: var(--sidebar); }
+  .bg-sidebar-foreground { background-color: var(--sidebar-foreground); }
+  .bg-sidebar-primary { background-color: var(--sidebar-primary); }
+  .bg-sidebar-primary-foreground { background-color: var(--sidebar-primary-foreground); }
+  .bg-sidebar-accent { background-color: var(--sidebar-accent); }
+  .bg-sidebar-accent-foreground { background-color: var(--sidebar-accent-foreground); }
+  .bg-sidebar-border { background-color: var(--sidebar-border); }
+  .bg-sidebar-ring { background-color: var(--sidebar-ring); }
+  .bg-activity-bar { background-color: var(--activity-bar); }
+  .bg-activity-bar-foreground { background-color: var(--activity-bar-foreground); }
+  .bg-activity-bar-foreground-active { background-color: var(--activity-bar-foreground-active); }
+  .bg-activity-bar-badge { background-color: var(--activity-bar-badge); }
+  .bg-activity-bar-badge-foreground { background-color: var(--activity-bar-badge-foreground); }
+  .bg-terminal-background { background-color: var(--terminal-background); }
+  .bg-terminal-foreground { background-color: var(--terminal-foreground); }
+
+  /* Text colors */
+  .text-background { color: var(--background); }
+  .text-foreground { color: var(--foreground); }
+  .text-primary { color: var(--primary); }
+  .text-primary-foreground { color: var(--primary-foreground); }
+  .text-secondary { color: var(--secondary); }
+  .text-secondary-foreground { color: var(--secondary-foreground); }
+  .text-muted { color: var(--muted); }
+  .text-muted-foreground { color: var(--muted-foreground); }
+  .text-accent { color: var(--accent); }
+  .text-accent-foreground { color: var(--accent-foreground); }
+  .text-card { color: var(--card); }
+  .text-card-foreground { color: var(--card-foreground); }
+  .text-popover { color: var(--popover); }
+  .text-popover-foreground { color: var(--popover-foreground); }
+  .text-border { color: var(--border); }
+  .text-input { color: var(--input); }
+  .text-ring { color: var(--ring); }
+  .text-success { color: var(--success); }
+  .text-success-foreground { color: var(--success-foreground); }
+  .text-warning { color: var(--warning); }
+  .text-warning-foreground { color: var(--warning-foreground); }
+  .text-error { color: var(--error); }
+  .text-error-foreground { color: var(--error-foreground); }
+  /* Alias: destructive == error */
+  .text-destructive { color: var(--error); }
+  .text-destructive-foreground { color: var(--error-foreground); }
+  .text-info { color: var(--info); }
+  .text-info-foreground { color: var(--info-foreground); }
+  .text-sidebar { color: var(--sidebar); }
+  .text-sidebar-foreground { color: var(--sidebar-foreground); }
+  .text-sidebar-primary { color: var(--sidebar-primary); }
+  .text-sidebar-primary-foreground { color: var(--sidebar-primary-foreground); }
+  .text-sidebar-accent { color: var(--sidebar-accent); }
+  .text-sidebar-accent-foreground { color: var(--sidebar-accent-foreground); }
+  .text-sidebar-border { color: var(--sidebar-border); }
+  .text-sidebar-ring { color: var(--sidebar-ring); }
+  .text-activity-bar { color: var(--activity-bar); }
+  .text-activity-bar-foreground { color: var(--activity-bar-foreground); }
+  .text-activity-bar-foreground-active { color: var(--activity-bar-foreground-active); }
+  .text-activity-bar-badge { color: var(--activity-bar-badge); }
+  .text-activity-bar-badge-foreground { color: var(--activity-bar-badge-foreground); }
+  .text-terminal-background { color: var(--terminal-background); }
+  .text-terminal-foreground { color: var(--terminal-foreground); }
+
+  /* Border colors */
+  .border-border { border-color: var(--border); }
+  .border-input { border-color: var(--input); }
+  .border-ring { border-color: var(--ring); }
+  .border-primary { border-color: var(--primary); }
+  .border-secondary { border-color: var(--secondary); }
+  .border-muted { border-color: var(--muted); }
+  .border-accent { border-color: var(--accent); }
+  .border-sidebar-border { border-color: var(--sidebar-border); }
+
+  /* Ring colors */
+  .ring-ring { --tw-ring-color: var(--ring); }
+  .ring-primary { --tw-ring-color: var(--primary); }
+  .ring-sidebar-ring { --tw-ring-color: var(--sidebar-ring); }
+
+  /* Hover states for primary */
+  .hover\:bg-primary\/90:hover { background-color: color-mix(in srgb, var(--primary) 90%, transparent); }
+  .hover\:bg-secondary\/80:hover { background-color: color-mix(in srgb, var(--secondary) 80%, transparent); }
+  .hover\:bg-accent:hover { background-color: var(--accent); }
+  .hover\:bg-accent\/50:hover { background-color: color-mix(in srgb, var(--accent) 50%, transparent); }
+  .hover\:bg-muted:hover { background-color: var(--muted); }
+  .hover\:text-accent-foreground:hover { color: var(--accent-foreground); }
+  .hover\:bg-error\/90:hover { background-color: color-mix(in srgb, var(--error) 90%, transparent); }
+  .hover\:bg-destructive\/10:hover { background-color: color-mix(in srgb, var(--error) 10%, transparent); }
+  .hover\:text-destructive:hover { color: var(--error); }
+
+  /* Opacity variants for overlays */
+  .bg-background\/60 { background-color: color-mix(in srgb, var(--background) 60%, transparent); }
+  .bg-background\/80 { background-color: color-mix(in srgb, var(--background) 80%, transparent); }
+  .bg-muted\/40 { background-color: color-mix(in srgb, var(--muted) 40%, transparent); }
+  .bg-muted\/50 { background-color: color-mix(in srgb, var(--muted) 50%, transparent); }
+  .bg-muted\/70 { background-color: color-mix(in srgb, var(--muted) 70%, transparent); }
+  .bg-muted\/80 { background-color: color-mix(in srgb, var(--muted) 80%, transparent); }
+  .bg-muted-foreground\/30 { background-color: color-mix(in srgb, var(--muted-foreground) 30%, transparent); }
+  .bg-primary\/70 { background-color: color-mix(in srgb, var(--primary) 70%, transparent); }
+  .bg-accent\/40 { background-color: color-mix(in srgb, var(--accent) 40%, transparent); }
+  .bg-accent\/80 { background-color: color-mix(in srgb, var(--accent) 80%, transparent); }
+  .text-muted-foreground\/70 { color: color-mix(in srgb, var(--muted-foreground) 70%, transparent); }
+  .placeholder\:text-muted-foreground\/60::placeholder { color: color-mix(in srgb, var(--muted-foreground) 60%, transparent); }
+
+  /* Additional hover states */
+  .hover\:bg-primary\/50:hover { background-color: color-mix(in srgb, var(--primary) 50%, transparent); }
+  .hover\:bg-muted\/70:hover { background-color: color-mix(in srgb, var(--muted) 70%, transparent); }
+  .hover\:bg-muted\/80:hover { background-color: color-mix(in srgb, var(--muted) 80%, transparent); }
+  .hover\:bg-accent\/40:hover { background-color: color-mix(in srgb, var(--accent) 40%, transparent); }
+  .hover\:bg-sidebar-accent\/80:hover { background-color: color-mix(in srgb, var(--sidebar-accent) 80%, transparent); }
+  .hover\:border-border\/50:hover { border-color: color-mix(in srgb, var(--border) 50%, transparent); }
+  .border-border\/50 { border-color: color-mix(in srgb, var(--border) 50%, transparent); }
+
+  /* Gradient utilities with CSS variables */
+  .from-primary {
+    --tw-gradient-from: var(--primary);
+    --tw-gradient-to: transparent;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+  }
+  .to-primary\/70 {
+    --tw-gradient-to: color-mix(in srgb, var(--primary) 70%, transparent);
+  }
+}
+
+/* Base styles */
+@layer base {
+  * {
+    border-color: var(--border);
+    scrollbar-width: thin;
+    scrollbar-color: var(--muted) transparent;
+  }
+
+  *::-webkit-scrollbar {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background: var(--muted);
+    border-radius: 9999px;
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in srgb, var(--muted-foreground) 50%, transparent);
+  }
+
+  html {
+    height: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+    /* Prevent the viewport from rubber-banding; scroll should be inside app panels. */
+    overscroll-behavior: none;
+  }
+
+  body {
+    height: 100%;
+    overflow: hidden;
+    overscroll-behavior: none;
+    background-color: var(--background);
+    color: var(--foreground);
+    font-family:
+      'Inter',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      sans-serif;
+  }
+
+  #root {
+    height: 100%;
+  }
+
+  /* Monospace for code and terminal */
+  code,
+  pre,
+  .font-mono {
+    font-family:
+      'JetBrains Mono',
+      'Fira Code',
+      'SF Mono',
+      Menlo,
+      Monaco,
+      Consolas,
+      monospace;
+  }
+
+  /* Focus styles */
+  :focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
+  }
+
+  :focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  /* Selection */
+  ::selection {
+    background: color-mix(in srgb, var(--primary) 20%, transparent);
+    color: var(--foreground);
+  }
+}
+
+/* Animation utilities */
+@layer utilities {
+  .animate-in {
+    animation: animate-in 200ms ease-out;
+  }
+
+  .animate-out {
+    animation: animate-out 150ms ease-in;
+  }
+
+  .slide-in-from-top {
+    --tw-enter-translate-y: -100%;
+  }
+
+  .slide-in-from-bottom {
+    --tw-enter-translate-y: 100%;
+  }
+
+  .slide-in-from-left {
+    --tw-enter-translate-x: -100%;
+  }
+
+  .slide-in-from-right {
+    --tw-enter-translate-x: 100%;
+  }
+
+  .slide-in-from-top-2 {
+    --tw-enter-translate-y: -0.5rem;
+  }
+
+  .slide-in-from-top-4 {
+    --tw-enter-translate-y: -1rem;
+  }
+
+  .fade-in {
+    --tw-enter-opacity: 0;
+  }
+
+  .zoom-in-95 {
+    --tw-enter-scale: 0.95;
+  }
+
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@keyframes animate-in {
+  from {
+    opacity: var(--tw-enter-opacity, 1);
+    transform: translate(
+        var(--tw-enter-translate-x, 0),
+        var(--tw-enter-translate-y, 0)
+      )
+      scale(var(--tw-enter-scale, 1));
+  }
+}
+
+@keyframes animate-out {
+  to {
+    opacity: var(--tw-exit-opacity, 0);
+    transform: translate(
+        var(--tw-exit-translate-x, 0),
+        var(--tw-exit-translate-y, 0)
+      )
+      scale(var(--tw-exit-scale, 1));
+  }
+}
+
+/* Loading animation keyframes */
+@keyframes snake-move {
+  0%,
+  100% {
+    transform: scale(0.8);
+    opacity: 0.3;
+  }
+  50% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* Safe area insets for mobile */
+@layer utilities {
+  .safe-bottom {
+    padding-bottom: env(safe-area-inset-bottom, 0);
+  }
+
+  .safe-top {
+    padding-top: env(safe-area-inset-top, 0);
+  }
+
+  .safe-left {
+    padding-left: env(safe-area-inset-left, 0);
+  }
+
+  .safe-right {
+    padding-right: env(safe-area-inset-right, 0);
+  }
+}
+
+/* Advanced Card animations */
+@keyframes gradient-shift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes morph {
+  0%, 100% {
+    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
+    transform: translate(0, 0) rotate(0deg);
+  }
+  25% {
+    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
+    transform: translate(10%, 10%) rotate(90deg);
+  }
+  50% {
+    border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%;
+    transform: translate(0, 20%) rotate(180deg);
+  }
+  75% {
+    border-radius: 60% 40% 60% 30% / 60% 30% 40% 70%;
+    transform: translate(-10%, 10%) rotate(270deg);
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+@keyframes glow-pulse {
+  0%, 100% {
+    box-shadow: 0 0 5px var(--primary), 0 0 20px var(--primary);
+  }
+  50% {
+    box-shadow: 0 0 20px var(--primary), 0 0 40px var(--primary);
+  }
+}