let-them-talk 5.2.5 → 5.4.0

package/office/assets/glass-wall.js

@@ -0,0 +1,64 @@
+import * as THREE from 'three';
+import { mat, PAL } from './materials.js';
+
+export default {
+  id: 'glass-wall',
+  name: 'Glass Wall',
+  category: 'structural',
+  icon: 'GW',
+  gridW: 2, gridD: 1, height: 3,
+  factory: function() {
+    var g = new THREE.Group();
+
+    // Glass panel
+    var panel = new THREE.Mesh(
+      new THREE.BoxGeometry(2, 3, 0.06),
+      PAL.glass()
+    );
+    panel.castShadow = false;
+    panel.receiveShadow = true;
+    g.add(panel);
+
+    // Top chrome frame
+    var topFrame = new THREE.Mesh(
+      new THREE.BoxGeometry(2, 0.08, 0.1),
+      PAL.chrome()
+    );
+    topFrame.position.y = 1.5;
+    topFrame.castShadow = true;
+    g.add(topFrame);
+
+    // Bottom chrome frame
+    var botFrame = new THREE.Mesh(
+      new THREE.BoxGeometry(2, 0.08, 0.1),
+      PAL.chrome()
+    );
+    botFrame.position.y = -1.5;
+    botFrame.castShadow = true;
+    g.add(botFrame);
+
+    // Left vertical chrome post
+    var leftPost = new THREE.Mesh(
+      new THREE.BoxGeometry(0.06, 3, 0.1),
+      PAL.chrome()
+    );
+    leftPost.position.x = -0.97;
+    leftPost.castShadow = true;
+    g.add(leftPost);
+
+    // Right vertical chrome post
+    var rightPost = leftPost.clone();
+    rightPost.position.x = 0.97;
+    g.add(rightPost);
+
+    // Mid chrome rail (horizontal)
+    var midRail = new THREE.Mesh(
+      new THREE.BoxGeometry(2, 0.04, 0.08),
+      PAL.chromeBrushed()
+    );
+    midRail.position.y = 0.5;
+    g.add(midRail);
+
+    return g;
+  }
+};

package/office/assets/half-wall.js

@@ -0,0 +1,49 @@
+import * as THREE from 'three';
+import { mat, PAL } from './materials.js';
+
+export default {
+  id: 'half-wall',
+  name: 'Half Wall',
+  category: 'structural',
+  icon: 'HW',
+  gridW: 2, gridD: 1, height: 1.2,
+  factory: function() {
+    var g = new THREE.Group();
+
+    // Main body
+    var body = new THREE.Mesh(
+      new THREE.BoxGeometry(2, 1.2, 0.25),
+      PAL.concrete()
+    );
+    body.castShadow = true;
+    body.receiveShadow = true;
+    g.add(body);
+
+    // Top cap — chrome rail
+    var cap = new THREE.Mesh(
+      new THREE.BoxGeometry(2.04, 0.07, 0.32),
+      PAL.chrome()
+    );
+    cap.position.y = 0.635;
+    cap.castShadow = true;
+    g.add(cap);
+
+    // Base strip
+    var base = new THREE.Mesh(
+      new THREE.BoxGeometry(2.04, 0.09, 0.28),
+      mat(0x1e2128, { roughness: 0.7 })
+    );
+    base.position.y = -0.555;
+    g.add(base);
+
+    // Front face subtle recess panel
+    var panel = new THREE.Mesh(
+      new THREE.BoxGeometry(1.7, 0.85, 0.02),
+      mat(0x24272f, { roughness: 0.9 })
+    );
+    panel.position.z = 0.13;
+    g.add(panel);
+
+    return g;
+  }
+};

package/office/assets/hanging-plant.js

@@ -0,0 +1,112 @@
+import * as THREE from 'three';
+import { mat, PAL } from './materials.js';
+
+export default {
+  id: 'hanging_plant',
+  name: 'Hanging Plant',
+  category: 'nature',
+  icon: 'Hp',
+  gridW: 1, gridD: 1, height: 3.0,
+  factory: function() {
+    var g = new THREE.Group();
+
+    // Ceiling mount bracket
+    var mount = new THREE.Mesh(
+      new THREE.BoxGeometry(0.06, 0.06, 0.06),
+      mat(0x111111, { roughness: 0.5, metalness: 0.6 })
+    );
+    mount.position.y = 3.0;
+    g.add(mount);
+
+    // Chain links (vertical rod segments)
+    var chainMat = PAL.chromeBrushed();
+    var chainSegments = 6;
+    for (var i = 0; i < chainSegments; i++) {
+      var link = new THREE.Mesh(
+        new THREE.TorusGeometry(0.018, 0.006, 6, 10),
+        chainMat
+      );
+      link.position.y = 2.92 - i * 0.145;
+      link.rotation.x = (i % 2 === 0) ? 0 : Math.PI / 2;
+      g.add(link);
+    }
+
+    // Hanging pot (round, dark clay)
+    var pot = new THREE.Mesh(
+      new THREE.CylinderGeometry(0.16, 0.11, 0.22, 18),
+      mat(0x1a1822, { roughness: 0.82 })
+    );
+    pot.position.y = 2.04;
+    pot.castShadow = true;
+    g.add(pot);
+
+    // Pot rim
+    var rim = new THREE.Mesh(
+      new THREE.TorusGeometry(0.165, 0.016, 8, 24),
+      mat(0x111018, { roughness: 0.78 })
+    );
+    rim.rotation.x = Math.PI / 2;
+    rim.position.y = 2.148;
+    g.add(rim);
+
+    // Support wires (3 wires from rim to chain)
+    var wireMat = mat(0x666666, { roughness: 0.40, metalness: 0.60 });
+    for (var w = 0; w < 3; w++) {
+      var wireAngle = (w / 3) * Math.PI * 2;
+      var wire = new THREE.Mesh(
+        new THREE.CylinderGeometry(0.004, 0.004, 0.76, 4),
+        wireMat
+      );
+      wire.position.set(
+        Math.sin(wireAngle) * 0.13,
+        2.53,
+        Math.cos(wireAngle) * 0.13
+      );
+      wire.rotation.z = Math.atan2(Math.sin(wireAngle) * 0.13, 0.38);
+      wire.rotation.x = Math.atan2(Math.cos(wireAngle) * 0.13, 0.38);
+      g.add(wire);
+    }
+
+    // Soil
+    var soil = new THREE.Mesh(
+      new THREE.CylinderGeometry(0.148, 0.148, 0.014, 18),
+      mat(0x1a1510, { roughness: 0.99 })
+    );
+    soil.position.y = 2.155;
+    g.add(soil);
+
+    // Trailing leaf clusters (draping down)
+    var leafColors = [0x2d8a4e, 0x226638, 0x1e5c30, 0x358050];
+    var trailCount = 7;
+    for (var t = 0; t < trailCount; t++) {
+      var tAngle = (t / trailCount) * Math.PI * 2;
+      var tRadius = 0.10 + (t % 3) * 0.04;
+      var tDrop = t * 0.10;
+
+      var leaf = new THREE.Mesh(
+        new THREE.SphereGeometry(0.062, 8, 7),
+        mat(leafColors[t % leafColors.length], { roughness: 0.82 })
+      );
+      leaf.scale.set(0.7, 0.5, 1.2);
+      leaf.position.set(
+        Math.sin(tAngle) * (tRadius + 0.05),
+        1.95 - tDrop,
+        Math.cos(tAngle) * (tRadius + 0.05)
+      );
+      leaf.castShadow = true;
+      g.add(leaf);
+    }
+
+    // Main foliage cluster in pot
+    var mainLeaf = new THREE.Mesh(
+      new THREE.SphereGeometry(0.18, 12, 10),
+      mat(0x2d8a4e, { roughness: 0.80 })
+    );
+    mainLeaf.scale.set(1, 0.65, 1);
+    mainLeaf.position.y = 2.22;
+    mainLeaf.castShadow = true;
+    g.add(mainLeaf);
+
+    return g;
+  }
+};

package/office/assets/index.js

@@ -0,0 +1,151 @@
+// Asset Registry — auto-imports all individual asset files
+// Each asset is a separate file for maintainability
+import * as THREE from 'three';
+
+// Categories
+export var ASSET_CATEGORIES = [
+  { id: 'structural',  label: 'Structural',  icon: 'ST' },
+  { id: 'furniture',   label: 'Furniture',   icon: 'FN' },
+  { id: 'office',      label: 'Office',      icon: 'OF' },
+  { id: 'decor',       label: 'Decor',       icon: 'DC' },
+  { id: 'nature',      label: 'Nature',      icon: 'NT' },
+  { id: 'tech',        label: 'Tech',        icon: 'TC' },
+  { id: 'lighting',    label: 'Lighting',    icon: 'LT' },
+  { id: 'kitchen',     label: 'Kitchen',     icon: 'KT' },
+  { id: 'recreation',  label: 'Recreation',  icon: 'RC' },
+  { id: 'exterior',    label: 'Exterior',    icon: 'EX' },
+];
+
+// Import all asset modules
+import wall from './wall.js';
+import glass_wall from './glass-wall.js';
+import half_wall from './half-wall.js';
+import floor_tile from './floor-tile.js';
+import marble_floor from './marble-floor.js';
+import carpet_tile from './carpet-tile.js';
+import door from './door.js';
+import glass_door from './glass-door.js';
+import archway from './archway.js';
+import column from './column.js';
+
+import desk from './desk.js';
+import gaming_desk from './gaming-desk.js';
+import chair from './chair.js';
+import gaming_chair from './gaming-chair.js';
+import sofa from './sofa.js';
+import l_sofa from './l-sofa.js';
+import coffee_table from './coffee-table.js';
+import dining_table from './dining-table.js';
+
+import filing_cabinet from './filing-cabinet.js';
+import whiteboard from './whiteboard.js';
+import meeting_table from './meeting-table.js';
+import reception_desk from './reception-desk.js';
+import printer from './printer.js';
+import water_cooler from './water-cooler.js';
+
+import painting from './painting.js';
+import sculpture from './sculpture.js';
+import rug from './rug.js';
+import vase from './vase.js';
+import trophy from './trophy.js';
+import wall_clock from './wall-clock.js';
+
+import plant from './plant.js';
+import indoor_tree from './indoor-tree.js';
+import palm_tree from './palm-tree.js';
+import flower_pot from './flower-pot.js';
+import hanging_plant from './hanging-plant.js';
+import cactus from './cactus.js';
+
+import monitor from './monitor.js';
+import dual_monitor from './dual-monitor.js';
+import pc_tower from './pc-tower.js';
+import server_rack from './server-rack.js';
+import tv_screen from './tv-screen.js';
+import speaker from './speaker.js';
+
+import floor_lamp from './floor-lamp.js';
+import pendant_light from './pendant-light.js';
+import desk_lamp from './desk-lamp.js';
+import spotlight from './spotlight.js';
+import neon_strip from './neon-strip.js';
+import chandelier from './chandelier.js';
+
+import bar_counter from './bar-counter.js';
+import bar_stool from './bar-stool.js';
+import coffee_machine from './coffee-machine.js';
+import fridge from './fridge.js';
+import sink from './sink.js';
+import microwave from './microwave.js';
+
+import pool_table from './pool-table.js';
+import foosball from './foosball.js';
+import arcade_cabinet from './arcade-cabinet.js';
+import treadmill from './treadmill.js';
+import beanbag from './beanbag.js';
+import ping_pong from './ping-pong.js';
+
+import bench from './bench.js';
+import street_lamp from './street-lamp.js';
+import trash_can from './trash-can.js';
+import planter_box from './planter-box.js';
+import fence from './fence.js';
+import bollard from './bollard.js';
+
+// Master asset list
+export var ASSETS = [
+  // Structural
+  wall, glass_wall, half_wall, floor_tile, marble_floor, carpet_tile, door, glass_door, archway, column,
+  // Furniture
+  desk, gaming_desk, chair, gaming_chair, sofa, l_sofa, coffee_table, dining_table,
+  // Office
+  filing_cabinet, whiteboard, meeting_table, reception_desk, printer, water_cooler,
+  // Decor
+  painting, sculpture, rug, vase, trophy, wall_clock,
+  // Nature
+  plant, indoor_tree, palm_tree, flower_pot, hanging_plant, cactus,
+  // Tech
+  monitor, dual_monitor, pc_tower, server_rack, tv_screen, speaker,
+  // Lighting
+  floor_lamp, pendant_light, desk_lamp, spotlight, neon_strip, chandelier,
+  // Kitchen
+  bar_counter, bar_stool, coffee_machine, fridge, sink, microwave,
+  // Recreation
+  pool_table, foosball, arcade_cabinet, treadmill, beanbag, ping_pong,
+  // Exterior
+  bench, street_lamp, trash_can, planter_box, fence, bollard,
+];
+
+// Get asset by ID
+export function getAsset(id) {
+  for (var i = 0; i < ASSETS.length; i++) {
+    if (ASSETS[i].id === id) return ASSETS[i];
+  }
+  return null;
+}
+
+// Get assets by category
+export function getAssetsByCategory(cat) {
+  return ASSETS.filter(function(a) { return a.category === cat; });
+}
+
+// Create a ghost (transparent preview) of an asset
+export function createGhost(assetId) {
+  var asset = getAsset(assetId);
+  if (!asset) return null;
+  var group = asset.factory();
+  group.traverse(function(child) {
+    if (child.isMesh) {
+      child.material = new THREE.MeshStandardMaterial({
+        color: 0x44ff88,
+        transparent: true,
+        opacity: 0.35,
+        depthWrite: false,
+      });
+    }
+  });
+  group.userData.isGhost = true;
+  group.userData.assetId = assetId;
+  return group;
+}

package/office/assets/indoor-tree.js

@@ -0,0 +1,90 @@
+import * as THREE from 'three';
+import { mat, PAL } from './materials.js';
+
+export default {
+  id: 'indoor_tree',
+  name: 'Indoor Tree',
+  category: 'nature',
+  icon: 'IT',
+  gridW: 1, gridD: 1, height: 3.5,
+  factory: function() {
+    var g = new THREE.Group();
+
+    // Large planter (square, dark concrete)
+    var planter = new THREE.Mesh(
+      new THREE.BoxGeometry(0.72, 0.40, 0.72),
+      mat(0x2e3038, { roughness: 0.88 })
+    );
+    planter.position.y = 0.20;
+    planter.castShadow = true;
+    planter.receiveShadow = true;
+    g.add(planter);
+
+    // Planter rim trim (gold strip)
+    var rimTop = new THREE.Mesh(
+      new THREE.BoxGeometry(0.76, 0.03, 0.76),
+      PAL.gold()
+    );
+    rimTop.position.y = 0.415;
+    g.add(rimTop);
+
+    // Soil
+    var soil = new THREE.Mesh(
+      new THREE.BoxGeometry(0.68, 0.025, 0.68),
+      mat(0x1a1510, { roughness: 0.99 })
+    );
+    soil.position.y = 0.413;
+    g.add(soil);
+
+    // Trunk — lower
+    var trunkMat = mat(0x3d2b12, { roughness: 0.80 });
+    var trunkLow = new THREE.Mesh(
+      new THREE.CylinderGeometry(0.075, 0.095, 1.20, 10),
+      trunkMat
+    );
+    trunkLow.position.y = 1.02;
+    trunkLow.castShadow = true;
+    g.add(trunkLow);
+
+    // Trunk — upper (slims slightly)
+    var trunkUp = new THREE.Mesh(
+      new THREE.CylinderGeometry(0.048, 0.075, 1.10, 10),
+      trunkMat
+    );
+    trunkUp.position.y = 2.17;
+    trunkUp.castShadow = true;
+    g.add(trunkUp);
+
+    // Canopy tier 1 — bottom, widest
+    var canopy1 = new THREE.Mesh(
+      new THREE.SphereGeometry(0.55, 14, 10),
+      PAL.leaf()
+    );
+    canopy1.scale.set(1, 0.7, 1);
+    canopy1.position.y = 2.65;
+    canopy1.castShadow = true;
+    g.add(canopy1);
+
+    // Canopy tier 2 — middle
+    var canopy2 = new THREE.Mesh(
+      new THREE.SphereGeometry(0.44, 14, 10),
+      mat(0x226638, { roughness: 0.80 })
+    );
+    canopy2.scale.set(1, 0.75, 1);
+    canopy2.position.y = 3.05;
+    canopy2.castShadow = true;
+    g.add(canopy2);
+
+    // Canopy tier 3 — top, smallest, pointy
+    var canopy3 = new THREE.Mesh(
+      new THREE.SphereGeometry(0.28, 12, 10),
+      mat(0x1e5c30, { roughness: 0.82 })
+    );
+    canopy3.scale.set(1, 1.2, 1);
+    canopy3.position.y = 3.42;
+    canopy3.castShadow = true;
+    g.add(canopy3);
+
+    return g;
+  }
+};

package/office/assets/l-sofa.js

@@ -0,0 +1,153 @@
+import * as THREE from 'three';
+import { mat, PAL } from './materials.js';
+
+export default {
+  id: 'l-sofa',
+  name: 'L-Sofa',
+  category: 'furniture',
+  icon: 'LS',
+  gridW: 4, gridD: 2, height: 0.9,
+  factory: function() {
+    var g = new THREE.Group();
+    var fabricMat = PAL.fabric();
+    var frameMat = mat(0x17191f, { roughness: 0.6 });
+    var capMat = mat(0x1e2028, { roughness: 0.45 });
+    var cushionMat = mat(0x252830, { roughness: 0.92 });
+
+    // === MAIN SECTION (3W, along X axis) ===
+    var mainBase = new THREE.Mesh(
+      new THREE.BoxGeometry(3.0, 0.18, 0.9),
+      frameMat
+    );
+    mainBase.position.set(0, 0.09, 0);
+    mainBase.castShadow = true;
+    mainBase.receiveShadow = true;
+    g.add(mainBase);
+
+    var mainSeat = new THREE.Mesh(
+      new THREE.BoxGeometry(2.88, 0.16, 0.76),
+      fabricMat
+    );
+    mainSeat.position.set(0, 0.26, 0);
+    mainSeat.castShadow = true;
+    g.add(mainSeat);
+
+    var mainBack = new THREE.Mesh(
+      new THREE.BoxGeometry(2.88, 0.56, 0.18),
+      fabricMat
+    );
+    mainBack.position.set(0, 0.62, -0.35);
+    mainBack.castShadow = true;
+    g.add(mainBack);
+
+    var mainBackCap = new THREE.Mesh(
+      new THREE.BoxGeometry(3.0, 0.06, 0.20),
+      capMat
+    );
+    mainBackCap.position.set(0, 0.92, -0.34);
+    g.add(mainBackCap);
+
+    // 3 seat cushions main
+    [-0.96, 0, 0.96].forEach(function(x) {
+      var c = new THREE.Mesh(new THREE.BoxGeometry(0.88, 0.10, 0.72), cushionMat);
+      c.position.set(x, 0.37, 0.01);
+      c.castShadow = true;
+      g.add(c);
+    });
+
+    // Left arm (main section)
+    var leftArm = new THREE.Mesh(new THREE.BoxGeometry(0.18, 0.46, 0.9), fabricMat);
+    leftArm.position.set(-1.41, 0.41, 0);
+    leftArm.castShadow = true;
+    g.add(leftArm);
+
+    var leftArmCap = new THREE.Mesh(new THREE.BoxGeometry(0.20, 0.04, 0.92), capMat);
+    leftArmCap.position.set(-1.41, 0.65, 0);
+    g.add(leftArmCap);
+
+    // === WING SECTION (1.5W, along Z axis, attached to right side) ===
+    // Offset so it attaches at right end of main section
+    var wingBase = new THREE.Mesh(
+      new THREE.BoxGeometry(1.5, 0.18, 0.9),
+      frameMat
+    );
+    wingBase.position.set(2.0, 0.09, 0.85);
+    wingBase.rotation.y = Math.PI / 2;
+    wingBase.castShadow = true;
+    wingBase.receiveShadow = true;
+    g.add(wingBase);
+
+    var wingSeat = new THREE.Mesh(
+      new THREE.BoxGeometry(1.38, 0.16, 0.76),
+      fabricMat
+    );
+    wingSeat.position.set(2.0, 0.26, 0.85);
+    wingSeat.rotation.y = Math.PI / 2;
+    wingSeat.castShadow = true;
+    g.add(wingSeat);
+
+    var wingBack = new THREE.Mesh(
+      new THREE.BoxGeometry(1.38, 0.56, 0.18),
+      fabricMat
+    );
+    wingBack.position.set(2.35, 0.62, 0.85);
+    wingBack.rotation.y = Math.PI / 2;
+    wingBack.castShadow = true;
+    g.add(wingBack);
+
+    var wingBackCap = new THREE.Mesh(
+      new THREE.BoxGeometry(1.5, 0.06, 0.20),
+      capMat
+    );
+    wingBackCap.position.set(2.35, 0.92, 0.85);
+    wingBackCap.rotation.y = Math.PI / 2;
+    g.add(wingBackCap);
+
+    // 2 seat cushions on wing
+    [-0.38, 0.38].forEach(function(offset) {
+      var c = new THREE.Mesh(new THREE.BoxGeometry(0.62, 0.10, 0.72), cushionMat);
+      c.position.set(2.0, 0.37, 0.85 + offset);
+      c.castShadow = true;
+      g.add(c);
+    });
+
+    // Wing end arm
+    var wingArm = new THREE.Mesh(new THREE.BoxGeometry(0.18, 0.46, 0.9), fabricMat);
+    wingArm.position.set(2.0, 0.41, 1.63);
+    wingArm.rotation.y = Math.PI / 2;
+    wingArm.castShadow = true;
+    g.add(wingArm);
+
+    var wingArmCap = new THREE.Mesh(new THREE.BoxGeometry(0.20, 0.04, 0.92), capMat);
+    wingArmCap.position.set(2.0, 0.65, 1.63);
+    wingArmCap.rotation.y = Math.PI / 2;
+    g.add(wingArmCap);
+
+    // Corner connector piece
+    var corner = new THREE.Mesh(
+      new THREE.BoxGeometry(0.9, 0.18, 0.9),
+      frameMat
+    );
+    corner.position.set(1.5, 0.09, 0.45);
+    corner.castShadow = true;
+    g.add(corner);
+
+    var cornerSeat = new THREE.Mesh(
+      new THREE.BoxGeometry(0.78, 0.16, 0.78),
+      fabricMat
+    );
+    cornerSeat.position.set(1.5, 0.26, 0.45);
+    g.add(cornerSeat);
+
+    // 6 chrome legs
+    var legMat = PAL.chrome();
+    var legGeo = new THREE.CylinderGeometry(0.025, 0.02, 0.09, 8);
+    [[-1.35, -0.35], [-1.35, 0.38], [0.5, -0.35], [1.5, 1.25], [2.0, 1.25], [1.5, -0.35]].forEach(function(p) {
+      var leg = new THREE.Mesh(legGeo, legMat);
+      leg.position.set(p[0], 0.045, p[1]);
+      g.add(leg);
+    });
+
+    return g;
+  }
+};

package/office/assets/marble-floor.js

@@ -0,0 +1,64 @@
+import * as THREE from 'three';
+import { mat, PAL } from './materials.js';
+
+export default {
+  id: 'marble-floor',
+  name: 'Marble Floor',
+  category: 'structural',
+  icon: 'MF',
+  gridW: 2, gridD: 2, height: 0.02,
+  factory: function() {
+    var g = new THREE.Group();
+
+    // White marble slab
+    var slab = new THREE.Mesh(
+      new THREE.BoxGeometry(2, 0.02, 2),
+      PAL.marbleWhite()
+    );
+    slab.receiveShadow = true;
+    g.add(slab);
+
+    // Gold border inlay — all 4 sides
+    var goldMat = PAL.gold();
+    var borderThick = 0.04;
+    var borderH = 0.022;
+
+    var borderN = new THREE.Mesh(
+      new THREE.BoxGeometry(2, borderH, borderThick),
+      goldMat
+    );
+    borderN.position.z = -(1 - borderThick / 2);
+    g.add(borderN);
+
+    var borderS = borderN.clone();
+    borderS.position.z = 1 - borderThick / 2;
+    g.add(borderS);
+
+    var borderW = new THREE.Mesh(
+      new THREE.BoxGeometry(borderThick, borderH, 2),
+      goldMat
+    );
+    borderW.position.x = -(1 - borderThick / 2);
+    g.add(borderW);
+
+    var borderE = borderW.clone();
+    borderE.position.x = 1 - borderThick / 2;
+    g.add(borderE);
+
+    // Inner gold diamond accent lines
+    var innerMat = mat(0xc9a227, { roughness: 0.35, metalness: 0.65 });
+    var accentH = new THREE.Mesh(
+      new THREE.BoxGeometry(1.5, borderH, 0.015),
+      innerMat
+    );
+    g.add(accentH);
+
+    var accentV = new THREE.Mesh(
+      new THREE.BoxGeometry(0.015, borderH, 1.5),
+      innerMat
+    );
+    g.add(accentV);
+
+    return g;
+  }
+};