@developer_tribe/react-builder 1.0.6 → 1.0.8

package/src/styles/components/_bottom-bar.scss

@@ -1,15 +1,16 @@
-@use '../foundation/colors';
+@use '../foundation/colors' as colors;
 
 .rb-bottom-bar {
   position: fixed;
   left: 50%;
   transform: translateX(-66%);
   bottom: 10px;
+  z-index: 200;
 
   height: 50px;
   border-radius: 24px;
 
-  background-color: #fff;
+  background-color: colors.$surfaceColor;
   color: colors.$textColor;
 
   display: flex;
@@ -20,8 +21,8 @@
   padding: 0 10px;
   gap: 10px;
 
-  border: 1px solid rgba(colors.$textColor, 0.06);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+  border: 1px solid colors.$borderColor;
+  box-shadow: 0 8px 20px hsl(var(--foreground, 220.9 39.3% 11%) / 0.08);
 }
 
 .rb-bottom-bar__button {
@@ -40,27 +41,14 @@
 
 .rb-bottom-bar__button.is-active {
   color: colors.$accentColor;
-  background: rgba(colors.$accentColor, 0.08);
-  box-shadow: 0 0 18px rgba(colors.$accentColor, 0.28);
-}
-
-.rb-bottom-bar__button--preview.is-active {
-  // make preview cursor extra obvious
-  box-shadow:
-    0 0 0 3px rgba(colors.$accentColor, 0.18),
-    0 0 26px rgba(colors.$accentColor, 0.35);
-}
-
-.rb-bottom-bar__button:focus-visible {
-  outline: none;
-  box-shadow:
-    0 0 0 3px rgba(colors.$accentColor, 0.18),
-    0 0 18px rgba(colors.$accentColor, 0.22);
+  background: colors.$accentColor; /* Fallback */
+  background: color-mix(in srgb, #{colors.$accentColor}, transparent 92%);
+  box-shadow: 0 0 10px hsl(var(--primary, 221.2 83.2% 53.3%) / 0.18);
 }
 
 /* border between each tool button */
 .rb-bottom-bar__button + .rb-bottom-bar__button {
-  border-left: 1px solid rgba(colors.$textColor, 0.06);
+  border-left: 1px solid colors.$borderColor;
   padding-left: 14px;
   margin-left: 4px;
 }
@@ -102,12 +90,12 @@
 
 .rb-bottom-bar__lang.is-active {
   color: colors.$accentColor;
-  text-shadow: 0 0 12px rgba(colors.$accentColor, 0.25);
+  text-shadow: 0 0 12px hsl(var(--primary, 221.2 83.2% 53.3%) / 0.25);
 }
 
 /* border between each language button */
 .rb-bottom-bar__lang + .rb-bottom-bar__lang {
-  border-left: 1px solid rgba(colors.$textColor, 0.06);
+  border-left: 1px solid colors.$borderColor;
   margin-left: 8px;
   padding-left: 14px;
 }

package/src/styles/components/_editor-shell.scss

@@ -5,7 +5,7 @@
 .editor-tabs {
   display: flex;
   gap: 8px;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid colors.$borderColor;
 }
 
 .editor-tab {
@@ -29,8 +29,9 @@
 }
 
 .editor-tab--active {
-  background: #fff;
-  border-color: #e5e7eb #e5e7eb #fff #e5e7eb;
+  background: colors.$surfaceColor;
+  border-color: colors.$borderColor colors.$borderColor colors.$surfaceColor
+    colors.$borderColor;
 }
 
 .editor-panels {
@@ -89,7 +90,7 @@
   cursor: pointer;
   font-size: 12px;
   &.editor-device-button--selected {
-    border-color: #000;
+    border-color: colors.$textColor;
   }
 }
 
@@ -129,14 +130,14 @@
   font-size: 12px;
   line-height: 1.2;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.95);
-  border-color: rgba(15, 23, 42, 0.15);
-  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08);
+  background: hsl(var(--card, 0 0% 100%) / 0.95);
+  border-color: hsl(var(--foreground, 220.9 39.3% 11%) / 0.15);
+  box-shadow: 0 2px 4px hsl(var(--foreground, 220.9 39.3% 11%) / 0.08);
 }
 
 .debug-button:hover {
-  background: #fff;
-  border-color: rgba(15, 23, 42, 0.3);
+  background: colors.$surfaceColor;
+  border-color: hsl(var(--foreground, 220.9 39.3% 11%) / 0.3);
 }
 
 .editor-button:disabled {
@@ -147,7 +148,7 @@
 /* Specific hooks for save buttons (kept empty for now) */
 .editor-save-button,
 .editor-save-previewconfig-button {
-  color: #000;
+  color: colors.$textColor;
   font-weight: 600;
   font-size: 12px;
 }
@@ -158,9 +159,9 @@
   margin-top: 12px;
   min-height: 52px;
   border-style: dashed;
-  border-color: #cbd5f5;
-  background: #f8fafc;
-  color: #0f172a;
+  border-color: colors.$borderColor;
+  background: colors.$canvasColor;
+  color: colors.$textColor;
   font-weight: 600;
   gap: 10px;
   transition:
@@ -176,14 +177,33 @@
   border-radius: 999px;
   align-items: center;
   justify-content: center;
-  background: #2563eb;
-  color: #fff;
+  background: colors.$accentColor;
+  color: colors.$surfaceColor;
   font-size: 18px;
   line-height: 1;
 }
 
 .builder__add-button:hover {
-  border-color: #94a3b8;
-  background: #eef2ff;
-  color: #111827;
+  border-color: colors.$borderColor;
+  background: colors.$canvasColor;
+  color: colors.$textColor;
+}
+
+.side-tool-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 5;
+}
+
+.side-tool select {
+  width: 100%;
+  font-size: 11px;
+  padding: 4px 6px;
+}
+
+.side-tool .debug-button {
+  border-radius: 0;
+  width: 100%;
+  justify-content: center;
 }

package/src/styles/components/_mockos-router.scss

@@ -1,3 +1,5 @@
+@use '../foundation/colors' as colors;
+
 .mockos-router {
   width: 100%;
   height: 100%;
@@ -18,35 +20,35 @@
 }
 
 .mockos-screen--launchscreen {
-  background-color: #000000;
+  background-color: colors.$textColor;
 }
 
 .mockos-screen--home {
   padding: 20px;
-  background-color: #f5f5f5;
+  background-color: colors.$canvasColor;
 }
 
 .mockos-screen--onboard {
   padding: 20px;
-  background-color: #ffffff;
+  background-color: colors.$surfaceColor;
 }
 
 .mockos-screen--subscription {
   padding: 20px;
-  background-color: #ffffff;
+  background-color: colors.$surfaceColor;
 }
 
 // Screen Content
 .mockos-screen__title {
   font-size: 32px;
   font-weight: bold;
-  color: #000;
+  color: colors.$textColor;
   margin-bottom: 16px;
 }
 
 .mockos-screen__subtitle {
   font-size: 16px;
-  color: #666;
+  color: colors.$mutedTextColor;
 }
 
 .mockos-screen__heading {
@@ -57,7 +59,7 @@
 
 .mockos-screen__text {
   font-size: 16px;
-  color: #333;
+  color: colors.$textColor;
   margin-bottom: 12px;
 }
 
@@ -68,13 +70,13 @@
   margin-bottom: 12px;
 
   &--premium {
-    background-color: #007aff;
-    color: #fff;
+    background-color: colors.$accentColor;
+    color: colors.$surfaceColor;
   }
 
   &--basic {
-    background-color: #e5e5e5;
-    color: #333;
+    background-color: colors.$canvasColor;
+    color: colors.$textColor;
   }
 }
 
@@ -107,7 +109,7 @@
   transition: background-color 0.2s;
 
   &:hover {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: hsl(var(--card, 0 0% 100%) / 0.1);
   }
 
   &:active {
@@ -120,7 +122,7 @@
   height: 60px;
   border-radius: 13px;
   overflow: hidden;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 8px hsl(var(--foreground, 220.9 39.3% 11%) / 0.3);
 
   svg {
     width: 100%;
@@ -131,7 +133,7 @@
 
 .mockos-launcher__app-name {
   font-size: 12px;
-  color: #ffffff;
+  color: colors.$surfaceColor;
   text-align: center;
   max-width: 70px;
   overflow: hidden;

package/src/styles/components/_ui-components.scss

@@ -1,7 +1,6 @@
 @use '../foundation/colors' as colors;
 @use '../foundation/sizes' as sizes;
 @use '../foundation/mixins' as *;
-@use 'sass:color';
 
 .editor-controls {
   display: grid;
@@ -11,7 +10,7 @@
 }
 
 .editor-section {
-  background: #fff;
+  background: colors.$surfaceColor;
   border: 1px solid colors.$borderColor;
   border-radius: sizes.$radiusRounded;
   padding: sizes.$spaceComfy;
@@ -35,15 +34,15 @@
   padding: 8px 12px;
   border-radius: 8px;
   border: 1px solid colors.$borderColor;
-  background: #fff;
+  background: colors.$surfaceColor;
   cursor: pointer;
   transition:
     background 0.2s ease,
     box-shadow 0.2s ease;
 
   &:hover {
-    background: #f9fafb;
-    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
+    background: colors.$canvasColor;
+    box-shadow: 0 6px 16px hsl(var(--foreground, 220.9 39.3% 11%) / 0.06);
   }
 }
 
@@ -55,7 +54,7 @@
   padding: 0 8px;
   border: 1px solid colors.$borderColor;
   border-radius: sizes.$radiusRounded;
-  background: #fff;
+  background: colors.$surfaceColor;
   color: colors.$textColor;
   font: inherit;
   outline: none;
@@ -64,8 +63,8 @@
     box-shadow 0.15s ease;
 
   &:focus {
-    border-color: color.adjust(colors.$borderColor, $lightness: -8%);
-    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
+    border-color: colors.$borderColor;
+    box-shadow: 0 0 0 3px hsl(var(--foreground, 220.9 39.3% 11%) / 0.04);
   }
 }
 
@@ -120,7 +119,7 @@
   height: 20px;
   border-radius: 6px;
   border: 2px solid colors.$borderColor;
-  background: #fff;
+  background: colors.$surfaceColor;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -129,7 +128,7 @@
     border-color 0.2s ease,
     box-shadow 0.2s ease,
     transform 0.2s ease;
-  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
+  box-shadow: 0 2px 6px hsl(var(--foreground, 220.9 39.3% 11%) / 0.12);
 
   &::after {
     content: '';
@@ -150,17 +149,17 @@
 }
 
 .builder-checkbox__native:focus-visible + .builder-checkbox__control {
-  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
+  box-shadow: 0 0 0 3px hsl(var(--primary, 221.2 83.2% 53.3%) / 0.3);
 }
 
 .builder-checkbox__native:checked + .builder-checkbox__control {
-  background: linear-gradient(135deg, #1f2937, #4f46e5);
+  background: linear-gradient(135deg, colors.$textColor, colors.$accentColor);
   border-color: transparent;
-  box-shadow: 0 6px 14px rgba(79, 70, 229, 0.35);
+  box-shadow: 0 6px 14px hsl(var(--primary, 221.2 83.2% 53.3%) / 0.35);
 }
 
 .builder-checkbox__native:checked + .builder-checkbox__control::after {
-  border-color: #fff;
+  border-color: colors.$surfaceColor;
   transform: rotate(45deg) scale(1);
 }
 
@@ -171,7 +170,7 @@
 
 .builder-checkbox__helper {
   font-size: 12px;
-  color: #6b7280;
+  color: colors.$mutedTextColor;
   margin-left: 30px;
 }
 

package/src/styles/foundation/_colors.scss

@@ -1,8 +1,28 @@
-/* Library color tokens live in a single place for easy discovery. */
-$textColor: #111827;
-$mutedTextColor: #6b7280;
-$surfaceColor: #ffffff;
-$canvasColor: #f3f4f6;
-$borderColor: #e5e7eb;
-$accentColor: #2563eb;
-$dangerColor: #ef4444;
+/* Library color tokens live in a single place for easy discovery.
+ *
+ * TribeHub theming (shadcn/ui style):
+ * - Host app defines HSL channels as CSS variables (without the `hsl()` wrapper).
+ * - Builder consumes them as `hsl(var(--token))`.
+ * - If the host doesn't define a token, we fall back to the builder defaults.
+ */
+
+$background: hsl(var(--background, 220 14.3% 95.9%));
+$foreground: hsl(var(--foreground, 220.9 39.3% 11%));
+$card: hsl(var(--card, 0 0% 100%));
+$cardForeground: hsl(var(--card-foreground, 220.9 39.3% 11%));
+$muted: hsl(var(--muted, 220 14.3% 95.9%));
+$mutedForeground: hsl(var(--muted-foreground, 220 8.9% 46.1%));
+$primary: hsl(var(--primary, 221.2 83.2% 53.3%));
+$primaryForeground: hsl(var(--primary-foreground, 0 0% 100%));
+$destructive: hsl(var(--destructive, 0 84.2% 60.2%));
+$destructiveForeground: hsl(var(--destructive-foreground, 0 0% 100%));
+$border: hsl(var(--border, 220 13% 91%));
+
+/* Back-compat aliases used by the existing SCSS. */
+$textColor: $foreground;
+$mutedTextColor: $mutedForeground;
+$surfaceColor: $card;
+$canvasColor: $background;
+$borderColor: $border;
+$accentColor: $primary;
+$dangerColor: $destructive;

package/src/styles/foundation/_mixins.scss

@@ -14,7 +14,7 @@
 
 @mixin thin-scrollbar {
   scrollbar-width: thin;
-  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
+  scrollbar-color: hsl(var(--foreground, 220.9 39.3% 11%) / 0.25) transparent;
   &::-webkit-scrollbar {
     width: 8px;
     height: 4px;

package/src/styles/foundation/_sizes.scss

@@ -1,4 +1,6 @@
 /* Library sizing scale (spacing, radii, shadow) stays centralized. */
+@use './colors' as colors;
+
 $spaceTight: 4px;
 $spaceSnug: 6px;
 $spaceCompact: 8px;
@@ -16,8 +18,8 @@ $radiusPill: 12px;
 $borderWidthHairline: 1px;
 $outlineWidthFocus: 2px;
 
-$cardShadow: 0 10px 30px rgba(0, 0, 0, 0.12);
-$shadowTooltip: 0 6px 16px rgba(0, 0, 0, 0.2);
+$cardShadow: 0 10px 30px hsl(var(--foreground, 220.9 39.3% 11%) / 0.12);
+$shadowTooltip: 0 6px 16px hsl(var(--foreground, 220.9 39.3% 11%) / 0.2);
 
 $fontSizeXs: 11px;
 $fontSizeSm: 12px;

package/src/styles/layout/_builder.scss

@@ -49,7 +49,7 @@
     padding: 0 sizes.$spaceTight;
     margin: 0;
     background: colors.$accentColor;
-    color: #fff;
+    color: colors.$surfaceColor;
     font-size: clamp(sizes.$fontSizeXs, 1.3vw, sizes.$fontSizeSmPlus);
     white-space: nowrap;
     overflow: hidden;

package/src/styles/modals/_add-component.scss

@@ -49,7 +49,7 @@
   border-radius: 12px;
   padding: sizes.$spaceComfy;
   margin-bottom: sizes.$spaceCozy;
-  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.05);
+  box-shadow: 0 10px 20px hsl(var(--foreground, 220.9 39.3% 11%) / 0.05);
 }
 
 .add-component-modal__group-title {
@@ -86,7 +86,7 @@
 
 .add-component-modal__card:hover {
   border-color: colors.$accentColor;
-  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.15);
+  box-shadow: 0 10px 25px hsl(var(--primary, 221.2 83.2% 53.3%) / 0.15);
   transform: translateY(-2px);
 }
 

package/src/styles/modals/_color-modal.scss

@@ -30,7 +30,7 @@
   width: 32px;
   height: 32px;
   border-radius: 6px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid hsl(var(--foreground, 220.9 39.3% 11%) / 0.1);
 }
 
 .color-modal__selected-label {
@@ -158,7 +158,7 @@
 }
 
 .color-modal__swatch-preview--light {
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid hsl(var(--foreground, 220.9 39.3% 11%) / 0.1);
 }
 
 .color-modal__swatch-label {

package/src/styles/modals/_modal-shell.scss

@@ -10,7 +10,7 @@
 .modal__overlay {
   position: absolute;
   inset: 0;
-  background: rgba(0, 0, 0, 0.4);
+  background: hsl(var(--foreground, 220.9 39.3% 11%) / 0.4);
   z-index: 0;
 }
 

package/src/utils/analyseNodeByPatterns.ts

@@ -334,26 +334,11 @@ function validateAttributesByPattern(
   if (attrs == null) return ok();
   if (!isPlainObject(attrs)) return fail(`attributes must be an object`, path);
 
-  const componentType = normalizeTypeOrFallback(pattern.pattern.type);
-
   const schema: AttributeSchema = (getAttributeSchema(pattern.pattern.type) ??
     pattern.pattern.attributes ??
     {}) as AttributeSchema;
 
   for (const [attrName, attrValue] of Object.entries(attrs)) {
-    // Legacy compatibility: older onboard samples/projects stored theme on the provider.
-    // Modern projects store theme under `appConfig.theme`, but we still accept this
-    // attribute to avoid breaking existing JSON.
-    if (componentType === 'OnboardProvider' && attrName === 'theme') {
-      if (typeof attrValue !== 'string') {
-        return fail(`Expected one of: light, dark`, joinPath(path, attrName));
-      }
-      if (attrValue !== 'light' && attrValue !== 'dark') {
-        return fail(`Expected one of: light, dark`, joinPath(path, attrName));
-      }
-      continue;
-    }
-
     const attrSpec = schema?.[attrName];
     if (!attrSpec) {
       if (pattern.allowUnknownAttributes) continue;

package/dist/components/MobilePanelToggleButton.d.ts

@@ -1,8 +0,0 @@
-export type MobilePanelToggleButtonProps = {
-    label: string;
-    isActive: boolean;
-    ariaLabel: string;
-    ariaControls: string;
-    onClick: () => void;
-};
-export declare function MobilePanelToggleButton({ label, isActive, ariaLabel, ariaControls, onClick, }: MobilePanelToggleButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/hooks/useMinimumDelay.d.ts

@@ -1,7 +0,0 @@
-/**
- * Ensures a boolean becomes `true` only after a minimum delay.
- * Resets to `false` whenever `deps` change.
- *
- * Common use-case: keep a loading indicator visible for at least N ms.
- */
-export declare function useMinimumDelay(delayMs: number, deps?: unknown[]): boolean;

package/dist/hooks/useMobileEditorPanels.d.ts

@@ -1,12 +0,0 @@
-export type MobileEditorPanel = 'builder' | 'attributes';
-export type UseMobileEditorPanelsOptions = {
-    breakpoint?: number;
-};
-export declare function useMobileEditorPanels(options?: UseMobileEditorPanelsOptions): {
-    isMobile: boolean;
-    mobilePanel: MobileEditorPanel | null;
-    toggleMobilePanel: (panel: MobileEditorPanel) => void;
-    closeMobilePanels: () => void;
-    leftPanelIsOpen: boolean;
-    attributesPanelIsOpen: boolean;
-};

package/dist/hooks/useSyncProjectPageStore.d.ts

@@ -1,15 +0,0 @@
-import type { AppConfig } from '../types/PreviewConfig';
-import type { ProjectColors } from '../types/Project';
-export type UseSyncProjectPageStoreArgs = {
-    appConfig: AppConfig;
-    name: string;
-    projectColors: ProjectColors | undefined;
-    setAppConfig: (appConfig: AppConfig) => void;
-    setProjectName: (name: string) => void;
-    setProjectColors: (colors: ProjectColors | undefined) => void;
-};
-/**
- * Syncs ProjectPage props into the render store.
- * Kept as a small hook to keep ProjectPage UI-focused.
- */
-export declare function useSyncProjectPageStore({ appConfig, name, projectColors, setAppConfig, setProjectName, setProjectColors, }: UseSyncProjectPageStoreArgs): void;

package/src/components/MobilePanelToggleButton.tsx

@@ -1,39 +0,0 @@
-export type MobilePanelToggleButtonProps = {
-  label: string;
-  isActive: boolean;
-  ariaLabel: string;
-  ariaControls: string;
-  onClick: () => void;
-};
-
-export function MobilePanelToggleButton({
-  label,
-  isActive,
-  ariaLabel,
-  ariaControls,
-  onClick,
-}: MobilePanelToggleButtonProps) {
-  return (
-    <button
-      type="button"
-      className={`mobile-panel-toggle__button${isActive ? ' mobile-panel-toggle__button--active' : ''}`}
-      aria-label={ariaLabel}
-      aria-expanded={isActive}
-      aria-controls={ariaControls}
-      onClick={onClick}
-    >
-      <span className="mobile-panel-toggle__icon" aria-hidden="true">
-        <svg viewBox="0 0 16 12" role="presentation" focusable="false">
-          <path
-            d="M1 1h14M1 6h14M1 11h14"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            fill="none"
-          />
-        </svg>
-      </span>
-      <span className="mobile-panel-toggle__label">{label}</span>
-    </button>
-  );
-}

package/src/hooks/useMinimumDelay.ts

@@ -1,20 +0,0 @@
-import { useEffect, useState } from 'react';
-
-/**
- * Ensures a boolean becomes `true` only after a minimum delay.
- * Resets to `false` whenever `deps` change.
- *
- * Common use-case: keep a loading indicator visible for at least N ms.
- */
-export function useMinimumDelay(delayMs: number, deps: unknown[] = []) {
-  const [done, setDone] = useState<boolean>(false);
-
-  useEffect(() => {
-    setDone(false);
-    const timer = setTimeout(() => setDone(true), delayMs);
-    return () => clearTimeout(timer);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [delayMs, ...deps]);
-
-  return done;
-}